【WordPress】Feedlyのフォローボタンと購読者数バルーンを設置してみた

個別投稿のページの最下部に、以前アイキャッチ画像とともに、Facebookのいいねボタンを設置したのですが、

【WordPress】「この記事が気に入ったら いいね!しよう」を投稿ページに設置する方法

この時はついでに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用

 

モバイル用

モバイル用

お分りいただけるでしょうか。若干デザインが異なります。

PC用の方は大きめのボタンとその下にタイトルが来ていますね。一方モバイル用の方はボタンを小さいものにして、タイトルを上に持ってきました。

バルーンにもちゃんと購読者数が表示されています。少ないけどね^^;

 

ちなみに、これはプラグイン「SNS Count Cache」が動いてないと購読者数を引っ張ってこれないので、ご注意を。

コメントを残す

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