WordPressの記事トップにSNSのシェア数を表示する

share-count-display-thumbnail

ブログをやるうえで、記事をバズらせるというのは一つの夢でもあります。

こちらのサイトによると、バズるブログの60%はファーストビュー(ページを開いたとき最初に目に見える範囲)にSNSのシェア数とボタンが設置されているのだそうです。

[blogcard url=”http://naifix.com/above-the-fold/”]

シェア数が見えることによって、この記事がどれだけの人に評価されているのかが読む前にわかるという点ではすごく読み手に親切ですよね。

ただ、ボタンを設置すると読み込むのに時間がかかってしまったりで不利になる点もあったりします。

そこで今回は、ボタンはなしのシェア数だけ表示するというカスタマイズをしてみたので参考になればと思います。

読み手に親切なシェア数の表示カスタマイズ

「Font Awesome」のアイコンフォントを使ってシンプルにカスタマイズしたいと思います。

最終完成イメージ

カスタマイズ完成イメージです。

23205235

「Font Awesome」のリンク

まず、「Font Awesome」をWordpressに導入していない方はこちらを参考にヘッダーにリンクを追加してください。

[blogcard url=”https://lognote.biz/font-awesome/”]

コードを追加する

下記コードをsingle.phpのループ内に記述します。使用環境に応じて全体をdivで囲み、cssで整えてください。

閲覧数はプラグイン「WordPress Popular Posts」をインストールしていれば表示可能です。

SNSのシェア数はプラグイン「SNS Count Cache」から取ってきています。

<div class="blogbox">
<p><span class="kdate"><i class="fa fa-calendar"></i> //記事投稿日
<time class="entry-date date updated" datetime="<?php the_time(DATE_W3C); ?>">
<?php the_time( 'Y/m/d' ); ?>
</time>
<i class="fa fa-eye" aria-hidden="true"></i> //閲覧数
<?php if (function_exists('wpp_get_views')) { echo wpp_get_views( get_the_ID() ); } ?> views
<i class="fa fa-twitter"></i> //Twitter
<?php if(function_exists('scc_get_share_twitter')) echo scc_get_share_twitter(); ?>
<i class="fa fa-facebook"></i> //Facebook
<?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?>
<i class="fa fa-google-plus"></i> //Google Plus
<?php if(function_exists('scc_get_share_gplus')) echo scc_get_share_gplus(); ?>
<i class="fa fa-hatena"></i> //はてなブックマーク
<?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?>
<i class="fa fa-get-pocket"></i> //Pocket
<?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?>
<i class="fa fa-rss"></i> //feedly
<?php if(function_exists('scc_get_follow_feedly')) echo scc_get_follow_feedly(); ?>
<i class="fa fa-commenting-o" aria-hidden="true"></i> //コメント数
<a href="<?php comments_link(); ?>"><?php comments_number('(0)','(1)','(%)'); ?></a></span></p>
</div>

必要のないものは適当に省いてください。

CSSはSTINGER7ではこのようになっています。ちなみに私はこのまま使用しています。

/* 記事タイトル下 */
.blogbox p {
font-size: 12px;
margin: 0px;
color: #666666;
line-height: 15px;
}
.blogbox {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666666;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #666666;
margin-bottom: 20px;
padding: 5px;
}

コピペで同じように表示されるはずです。

あとはシェアされるような記事を頑張って書くだけです。これが一番難しいんですけどね。

share-count-display-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで