デザイン

ソーシャルメディアのシェアボタンをオリジナルデザインにしたのでその手順のご紹介

share-button

今回は、WordPressでデフォルトのソーシャル系のシェアボタンを画像は使わずにオリジナルスタイルのデザインで表示させる方法のご紹介です。
とにかくデフォルトのシェアボタンだと体感的にページが遅く感じる方は、多いのではないでしょうか?
シェアボタンをオリジナルスタイルのシェアボタンにすることによって、PC/スマホでの表示スピードの向上にも繋がりますので、ユーザーにストレスなくページを閲覧してもらうことが出来ると思います。
今回は下記のソーシャル系のシェアボタンのオリジナルデザインを作成していきたいと思います。

  • Facebook
  • Twitter
  • Gooogle +
  • はてブ
  • Pocket

今回はカウント数は、表示させていません。
僕的には、別にカウント数は表示させなくてもいいかなーという考えだし、カウント数を表示させるために、JavaScriptかPHPを利用してカウント数を表示させると思うのですが、それで遅くなったら嫌だしwww、Pocketに関しては、調べた結果外部サービス向けにAPIが公開されていませんし、無理やりカウント数を表示させるみたいなので、今のところやめとこうという結果になりました。
カウント数を、どうしても表示させたい方は、下記WPプラグインを利用するか、または下記サイトをご参考下さい。

今回ご紹介するシャーシャルシェアボタンデザインの完成形は、このサイトでも利用しているシェアボタンとなります。
ロゴの部分は、アイコンフォントを利用しています。
デザインに関しては、ご自身のサイトに合うようにカスタマイズしてもらえばと思います。

ソーシャル系のシェアボタンをオリジナルボタンに実装方法

それでは、シェアボタンをオリジナルボタンに実装をしていきたいと思います。

アイコンフォントの準備

まずは、今回利用するFacebookやTwitterのアイコンフォントの準備をしていきたいと思います。
アイコンフォントを利用すれば、Retinaディスプレイのスマホ表示もサイズを気にせず使え、CSS/CSS3で色なども安易に変更が可能となります。
今回は、【IcoMoon】というWebサービスを使いたいと思います。
IcoMoonでは、使いたいアイコンを選ぶだけでCSSファイルと選んだアイコンが入ったファイルがダウンロードが出来ますし、icomoonではオリジナルのアイコンも制作出来ます。
今回は、IcoMoonを利用するのですが、IcoMoonでは、Pocketやはてブのアイコンフォントが残念なことにありません。
なので下記サイトで配布しているはてブやPocketのSVGをダウンロードして、IcoMoonを利用してはてブやPocketのオリジナルのアイコンを制作して他のアイコンフォントと一緒にダウンロードします。
IcoMoonを利用してオリジナルのアイコン製作方法も下記サイトで説明してありますので、ご参考下さい。

利用するアイコンフォントが決まったらダウンロードしてCSSで書きだして、ご自身のルートディレクトリにダウンロードした【fonts】というフォルダを設置して下さい。

PHPコードの準備

それでは、次にPHPコードの準備をしていきます。
下記コードをシェアボタンを設置したい場所のテンプレートファイルに貼り付けて下さい。

<div class="single_sns">
<ul>
  <?php
    $url_encode=urlencode(get_permalink());
    $title_encode=urlencode(get_the_title());
  ?>
  <li class="facebook">
    <a href="http://www.facebook.com/sharer.php?src=bm&u=<a895585ddddc0af0c937a4a66e5b3944 />&t=<068a860cb5f44488de9ac0218f072ebf />" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
      <i class="icon-facebook"></i>
      <span>Facebook</span>
    </a>
  </li>
  <li class="twitter">
    <a href="http://twitter.com/intent/tweet?url=<b450ab8c9b04b60a9f3f36042b8adc57 />;text=<d34cf74de5b43efc1b95bb10147fcd7a />;via=【Twitterユーザー名】;tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;">
      <i class="icon-twitter"></i>
      <span>Twitter</span>
    </a>
  </li>
  <li class="googleplus">
    <a href="https://plus.google.com/share?url=<219aa8068d3d783ec653d3d582c4a717 />" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
      <i class="icon-googleplus"></i>
      <span>Google+</span>
    </a>
  </li>
  <li class="hatebu">
    <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<f8d4e73ce08f1f82d216192c183574eb />" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" >
      <i class="icon-hatebu"></i>
      <span>はてブ</span>
    </a>
  </li>
  <li class="pocket">
    <a href="http://getpocket.com/edit?url=<eb345f176593c5455b134423bde3fffb />&title=<8ebe965368bd627b6afb551aedb956f2 />" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">
      <i class="icon-pocket"></i>
      <span>Pocket</span>
    </a>
  </li>
</ul>
</div>

Twitterのユーザー名には、ご自身のユーザー名を入力して下さい。
また、<i class="icon-facebook"></i>などは、アイコンフォントのクラス名となっております。
IcoMoonでダウンロードしたアイコンフォントなどでクラス名などは変わってくると思いますので、ダウンロードしたフォイルのCSSでご確認後、クラス名の修正がある場合は修正して下さい。

CSSでシェアボタンのスタイルを調整

最後にCSSでシェアボタンのスタイルを調整してきます。
下記コードをコピーして貼り付けて下さい。

/*---------------------------------------------------------
  	SNSボタンスタイル
---------------------------------------------------------*/
.single_sns{
	margin-bottom:15px;
	padding: 0 0 0 0;
	}
.single_sns ul li{
	display:block;
	float:left;
	vertical-align:top;	
	}
.single_sns ul li a{
	display:block;
	width:112px;
	padding:12px 10px 10px 10px;
	text-align:center;
	font-size:16px;
	color:#fff;
	font-weight:bold;
	}
.single_sns ul li a:hover{
	text-decoration:none;
	opacity:0.85;	
	}
.single_sns ul li a span{
	padding-left:5px;	
	}
.single_sns ul li.twitter a{
	background:#55ACEE;	
	}
.single_sns ul li.facebook a{
	background:#3A5A9A;	
	}
.single_sns ul li.googleplus a{
	background:#C83726;	
	}
.single_sns ul li.hatebu a{
	background:#008FDE;	
	}
.single_sns ul li.pocket a{
	background:#EE4056;	
	}

上記まで記載しましたらオリジナルシェアボタンの完成です。
まぁじつのさい、デフォルトのシェアボタンでもいいと思いますが、シェアボタンがサイトデザインに合っていない時や、シェアボタンの表示スピードに不満がある方にはオリジナルボタンにしてみてもいいのかもしれません。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS css-dropdown-3

WebメニューのデザインにHTMLとCSSで作るドロップダウンメニュー

NEXT origin_3509154032

【WPプラグイン】Jetpackの自動ではき出すOGPタグを削除する