個別投稿のページの最下部に、以前アイキャッチ画像とともに、Facebookのいいねボタンを設置したのですが、
この時はついでにTwitterのフォローボタンをその下に一緒に設置しました。
今回、一緒にFeedlyのフォローボタンと購読者数のバルーンを表示するボックスを並べて設置してみましたので、ご紹介します。
ちなみにこれも、部長ナビさんのオーダーが元になってます^^;
こっちはマテリアル版ということでご容赦いただいて、早速行ってみよ〜(笑)
single.phpへ追記する
TwitterとFeedlyについては、ボタンは標準のものを使ってますので、何も特別なことはありません。
ただ、モバイルの場合はボタンを小さくしたかったので、PCとモバイルで若干デザインを変えるようにしています。
<?php if (is_mobile()) :?> <ul class="snsfollow-area"> <li><span>Twitterで〇〇を</span><a href="https://twitter.com/(twitter-id)" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @(twitter-id)</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li> <li><span>Feedlyで最新記事を購読</span> <span class="feedly-btn-horizontal"> <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F(site-url)%2Ffeed' target='blank'> <img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-small_2x.png' alt='follow us in feedly' width='66' height='20'> </a> <span class="arrow_box"> <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F(site-url)%2Ffeed' target='blank'> <?php echo scc_get_follow_feedly(); ?> </a> </span> </span> </li> </ul> <?php else: ?> <ul class="snsfollow-area"> <li><a href="https://twitter.com/(twitter-id)" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false" data-dnt="true">Follow @(twitter-id)</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><span>Twitterで〇〇をフォローしよう!</span></li> <li> <span class="feedly-btn-horizontal"> <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F(site-url)%2Ffeed' target='blank'> <img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-medium_2x.png' alt='follow us in feedly' width='71' height='28'> </a> <span class="arrow_box"> <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F(site-url)%2Ffeed' target='blank'> <?php echo scc_get_follow_feedly(); ?> </a> </span> </span> <span>Feedlyで最新記事を購読</span></li> </ul> <?php endif; ?>
このコードにTwitterのIDやFeedのURLを設定して、適当な場所に挿入します。
私の場合は、コメントの下に挿入しました。
前回の記事で既にTtitterの部分を実装済みの場合は、その部分ごとに入れ替えます。
style.cssでデザインを整える
仕上げにstyle.cssにスタイルを挿入していきます。
style.cssのPC・全体の部分に貼り付けます。
ul.snsfollow-area { display:table; table-layout: fixed; width:100%; } ul.snsfollow-area li { display:table-cell; vertical-align:middle; text-align: center; background: #e6e5e1; padding: 8px; border: 8px #fff solid; } ul.snsfollow-area li span { font-size: 11px; text-align: center; display: block; }
これで完成です。
PCとモバイルでに表示させてみる
PCの場合
モバイル用
お分りいただけるでしょうか。若干デザインが異なります。
PC用の方は大きめのボタンとその下にタイトルが来ていますね。一方モバイル用の方はボタンを小さいものにして、タイトルを上に持ってきました。
バルーンにもちゃんと購読者数が表示されています。少ないけどね^^;
ちなみに、これはプラグイン「SNS Count Cache」が動いてないと購読者数を引っ張ってこれないので、ご注意を。