Twitterのシェア数が表示されなくなってから、Twitterのボタンが上に上がってしまい、なんだかバランスが微妙になってしまいましたね…（＾＾；）
…と、思いつつも放ったらかしだったので、テーマを手直ししているついでに、いっそここらで流行？のSNSシェアボタンに乗っかっておこうと思い、実装してみました。
参考にさせていただいたのは、OZPAさんの記事になります。
各SNSのシェア数を取得
まず実装に必要なものは、各SNSのシェア数
WordPressプラグインのSNS Count Cacheをインストールします。
※Twitterは仕様が変更になってしまったため、相変わらずシェア数は表示されません。
SNS Count Cache
Quotation: SNS Count Cache
世の中には便利なものが沢山ありますね。
このWordpressプラグインは、Facebook、Google+、はてブ、Pocket、Feedlyのシェア数をキャッシュしてくれるプラグイン
インストールして、有効にするとWordpressのサイドバーに「SNS Count Cache」が表示されますので、クリックするとダッシュボードが表示されます。そちらにてキャッシュ等が確認できます。
またキャッシュ途中でも作業は可能です。
※Feedlyに関しては、部分的完了になるまでは数値が表示されませんでした。
実装コード
PHPコード
コードをテーマのsingle.php内、シェアボタンを設置したい場所に書きます。
また、以前紹介しましたアイコンWebフォント「Font Awesome」を利用しています。
「Font Awesome」に無いFeedlyとはてブに関しては、FeedlyはRSSアイコンにて、はてブは文字にて対応しました。
OZPAさんのコードにFeedlyと、アイコンWebフォントを追加しただけです。
<div class="snsShareArea">
<!-- Twitter -->
<a class="btn--twitter" href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>&via=アカウント名&tw_p=tweetbutton&related=アカウント名" target="_blank">
<i class="fa fa-twitter"></i> Twitter
<!-- SNS Count CacheよりTwitterのシェア数を取得 -->
<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php echo get_the_title(); ?>" target="_blank" class="btn--facebook">
<i class="fa fa-facebook-official"></i> Facebook
<!-- SNS Count CacheよりFacebookのシェア数を取得 -->
<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?>
</a>
<!-- Google+ -->
<a class="btn--google" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">
<i class="fa fa-google-plus"></i> Google+
<!-- SNS Count CacheよりGoogle+のシェア数を取得 -->
<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?>
</a>
<!-- はてなブックマーク -->
<a class="btn--hatena" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>" target="_blank">
<span style="font-weight:bold">B!</span> はてブ
<!-- SNS Count Cacheよりはてなブックマークのシェア数を取得 -->
<?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?>
</a>
<!-- Pocket -->
<a class="btn--pocket" href="http://getpocket.com/edit?url=<?php the_permalink();?>&title=<?php echo get_the_title;?>" target="blank">
<i class="fa fa-get-pocket"></i> Pocket
<!-- SNS Count CacheよりPocketのシェア数を取得 -->
<?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?>
</a>
<!-- Feedly -->
<a class="btn--feedly" href="http://cloud.feedly.com/#subscription%2Ffeed/<?php echo get_bloginfo('rss2_url'); ?>" target="blank">
<i class="fa fa-rss-square"></i> Feedly
<!-- SNS Count CasheよりFeedlyの登録数を取得 -->
<?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?>
</a>
</div>
CSSコード
こちらもOZPAさんのコードにFeedlyのカラーを追加しただけ。
.snsShareArea:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.snsShareArea a{
box-sizing: border-box;
display: block;
float: left;
width: 31.3%;
margin: 1%;
padding: .7em 0;
border-radius: 3px;
color: white;
text-decoration: none;
text-align: center;
}
.btn--twitter{
background: #55acee;
}
.btn--facebook{
background: #3b5998;
}
.btn--google{
background: #dd4b39;
}
.btn--hatena{
background: #008FDE;
}
.btn--pocket{
background: #ee4056;
}
.btn--feedly{
background: #83c054;
}
あとがき
地味なカラーで構成されているうちのブログに花が咲いた感じです（謎）
鮮やかなボタンになったので、皆さんが押してくれることを祈ります…
さてhover時はどんな仕様にするかな
