サイト管理をしている際にページ解析をしているとよく出るエラーがSNSボタン関係のモノ、そちらが気になっていたのでGoogle検索をかけてみたところ…一石二鳥となるWebサイトを見つけることができました。
今までは各SNSから提供されている公式ボタン用プログラムコードを管理サイト用にCSSデザインなどで高さを揃えて…などしていましたが、元となるSNSのプログラムがアップデートされていた時などに気づかず、古いプログラムコードで使用していた為エラーを吐き出す仕組みとなっていました。
それならば足並みを揃えた自サイト用のプログラムコードにしましょう。その実行による恩恵として、各SNSから読み込んでいた画像やscriptタグ、iframeなどにかかる時間の短縮も可能。という考え方となります。
こちらのページで書かれていることが非常にわかりやすくほぼそのまま参考とさせていただいております。
ソーシャルボタンを自作してWordPressの高速化 | アフィリエイトで稼ぐ方法を全部話そうと思う
http://affiliate150.com/social-button
当サイトSoricityで使用しているWordpress用テーマ「Xeory Extension」での挿入に成功しましたので、そちらの方法を投稿いたします。
SNSボタン作成の手順
SNSボタンの設置をした時、どのように表示されるかというデザインをCSSで指定します。当サイトで使用しているバズ部様のテーマ「Xeory Extension」用の表記となっております。
デザイン指定のためCSSファイルに指示を追加
子テーマのCSSでボタンのスタイルを作成しておきます。子テーマのCSSに次の記述をしておきます。
/* SNSボタン */
.share {
margin-top : 40px;}
.share ul {
margin : 0;
padding : 0;
list-style : none;}
.share li a {
display : block;
padding : 10px;
color : #fff;
font-size : 14px;
text-decoration : none;
text-align : center;}
.share li a:hover {
opacity :0.8;
color : #fff;}
.share li a:visited {
color: #fff;}
.share ul:after {
content : "";
display : block;
clear : both;}
.tweet a {
background-color : #55acee;}
.facebook a {
background-color : #315096;}
.googleplus a {
background-color : #dd4b39;}
.hatena a {
background-color : #008fde;}
.line a {
background-color: #00c300;}
.pocket a {
background-color :#f03e51;}
.rss a {
background-color: #ff8c00;}
.feedly a {
background-color: #6cc655;}
.share li {
float : left;
width : 25%;
margin : 0;
margin-top:15px;}
説明は重要な部分だけとさせていただき、最後の記述「.share li」の部分で各ボタンの幅（width）を25%にしております。これはボタンを８つ設置するのですが、4つずつ並べたいので100%を４で割って25%という計算です。
続いてスマートフォン用のページのボタンのスタイルも追加しておきます。
@media screen and (max-width:600px){
.share li {
float: left;
width: 49%;
margin: 0 1% 2% 0;}
.share li a {
border-radius:6px;}
}
@media screen and (max-width: 600px)がブラウザのサイズが600px以下ならという条件分岐です。
つまりスマートフォン用のページでは各ボタンの横幅（width）を49%にしています。スマートフォンで横一列は見にくいですよね。横幅49%にしておけばスマートフォンではこのように表示されます。
ここの横幅を100%に変更すると横に一つずつ縦並びにもできます。さて、これでCSSは完成です。続いてSNSボタンを設置するのですが、先に各ボタンの設置コードから紹介して最後に設置場所を紹介していきます。
ソーシャルボタン設置コード
ソーシャルボタンの設置ですが、全部のコードを書くと非常に複雑で長くなってしまいますので、子テーマに「sns.php」を用意して、そこにソーシャルボタンのコードを書きます。それで完成させた「sns.php」を設置したい場所で呼びだすという方針です。
これなら設置したい複数の場所でこの「sns.php」を呼びだすだけですし、もしソーシャルボタンをもう少しカスタマイズしたいという場合に「sns.php」を編集するだけで設置したすべての場所のコードを全部一括で変更できますので簡単です。
という訳でまずは子テーマに「sns.php」を作成しておきます。これは他の子テーマを作成する手順と同じで、子テーマのフォルダに「sns.php」と名づけたファイルをアップするだけです。中身は後で書きますので、とりあえず名前だけ付けてファイルを作成しておきます。
子テーマに「sns.php」の作成ができたらWordPressに戻って「外観」⇒「テーマ編集」と進み、先ほど作成した「sns.php」を開きます。
それで「sns.php」にSNSボタンの設置コードを書いて行きます。
<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>
<div class="share">
<ul>
<!--Facebookボタン-->
<li class="facebook"><a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<i class="fa fa-facebook"></i> facebook <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a></li>
<!--ツイートボタン-->
<li class="tweet"><a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<i class="fa fa-twitter"></i> tweet <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a></li>
<!--Google+ボタン-->
<li class="googleplus"><a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
<i class="fa fa-google-plus"></i> Google+ <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a></li>
<!--はてなボタン-->
<li class="hatena"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;">
<i class="fa fa-hatena"></i> はてブ <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a></li>
<!--LINEボタン-->
<li class="line"><a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">
<i class="fa fa-line"></i> LINE</a></li>
<!--ポケットボタン-->
<li class="pocket"><a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>">
<i class="fa fa-get-pocket"></i> Pocket <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>
<!--RSSボタン-->
<li class="rss"><a href="<?php echo home_url(); ?>/?feed=rss2">
<i class="fa fa-rss"></i> RSS</a></li>
<!--feedlyボタン-->
<li class="feedly"><a href="http://feedly.com/i/subscription/feed/https://soricity.com//feed" target="blank">
<i class="fa fa-rss"></i> feedly <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>
</ul>
</div>
「feedly」のコードには自分のドメインを入れる部分がありますので、「自分のドメイン」と書かれている部分を消してここに自分のドメインを入れます。
「Xeory Extension」では最初から「Font Awesome Icons」というwebアイコンがインストールされていますので、そちらを使用しています。海外のwebアイコンサイトですので、はてブやLINEなどがありませんがいずれ導入されることを期待して、記入だけしてあります。
<i class="fa fa-hatena"></i> <i class="fa fa-line"></i> <i class="fa fa-get-pocket"></i>
こんな感じで各ボタンのテキスト部分の直前に「Font Awesome Icons」で取得したアイコンを呼び出してます。全部のボタンにこの記述をしてますので、確認してみて下さい。
また、各ボタンのシェア数まで表示させたい場合にはWordPressのプラグイン「SNS Count Cache」を入れて有効化すればシェア数まで表示されるようにしてます。プラグインを有効化してしばらく時間が経つと表示されるようになります。
SNSボタンの設置場所
ボタンの設置場所ですが、当サイトSoricity | ソリシティで使用しているテーマ「Xeory Extension」では親テーマから子テーマに「single.php」を追加しています。まずは「single.php」の中から次の記述を探します。「Ctrl」+「F」を押すと検索窓が出ますのでそれで探すと早いです。
<?php echo bzb_social_buttons();?>
これが記事本文のコンテンツの終わりの部分です。現在のバージョン（0.1.7）では「bzb_social_buttons」というファイルは存在しておりませんのでこの記述を変更して「sns.php」を呼び出してみましょう。 カテゴリーページでは表示したくないので「個別ページなら」という条件分岐をしておきました。
<?php if ( is_single() ) : ?> <?php get_template_part( 'sns' ); ?> <?php endif; ?>
私の場合は固定ページをトップページに指定（表示設定でできます）しているのでこれで終了ですが、トップページを固定ページにしていないという方はトップページにSNSボタンが表示されないと思います。その場合は子テーマに「index.php」を作成して親テーマの記述をコピペしておきます。
トップページにSNSボタンを設置する場合には若干コードを変更する部分がありますのでSNS.phpは呼び出さずに直接全部書いてしまうと良いとおもいます。設置コードの先頭部分だけこのように変更します。
<?php
$url_encode=urlencode(get_home_url());
$title_encode=urlencode(get_bloginfo('name'));
?>
「div class=”share”」以下はそのままでOKです。こんな感じになります。
以上で設置が完了です。お疲れさまでした
