feedly購読者数付き横型フォローボタンの作り方｜コピペで使えるWordPressカスタマイズ

feedlyアイコンの右側に、購読者数が表示される吹き出しのついた、小さなフォローボタンを作ってみました。

WordPressのタイトル下あたりに置くと収まりがよさそうな感じです。

これまで、feedlyボタンのvertical（縦型）のものはありました。

ソースも公開しちゃいます！Feedly登録ボタンの購読者数カウンタを自作してみました

ただ、horizontal（横型）のものは見かけたことがなかったので作成してみました。

以下は、Wordpressで、その設定を行う方法です。

functions.phpの編集

まずは、親テーマでも子テーマでも、どちらでもいいのですがfunctions.phpに購読者数を取得する関数を追加します。

以下の関数をコピペすればOKです。

//feedlyの購読者数取得
function get_feedly_count(){
  $feed_url = rawurlencode( get_bloginfo( 'rss2_url' ) );
  $res = '0';
  $subscribers = wp_remote_get( "http://cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
  if (!is_wp_error( $subscribers ) && $subscribers["response"]["code"] === 200) {
    $subscribers = json_decode( $subscribers['body'] );
    $subscribers = $subscribers->subscribers;
    
    set_transient( 'feedly_subscribers', $subscribers, 60 * 60 * 12 );
    $res = ($subscribers ? $subscribers : '0');
    return $res;
  }
}

参考ソースも公開しちゃいます！Feedly登録ボタンの購読者数カウンタを自作してみました

テンプレートファイルの編集

feedlyミニボタンを表示させたい箇所に、以下のように記入します。

個人的には、single.phpの投稿タイトル下あたりがちょうどいいと思います。

<span class="feedly-btn-horizontal">
  <a href='http://feedly.com/index.html#subscription%2Ffeed%2F<?php urlencode(bloginfo('rss2_url')); ?>' target='blank'>
    <img id='feedly-follow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-medium_2x.png' alt="">
  </a>
  <span class="arrow_box">
    <a href='http://feedly.com/index.html#subscription%2Ffeed%2F<?php urlencode(bloginfo('rss2_url')); ?>' target='blank'>
      <?php echo get_feedly_count(); ?>
    </a>
  </span>
</span>

style.cssの編集

こちらも、親テーマ、子テーマどちらでも良いですがstyle.cssに以下のように追記します。

/************************************
** 購読者数つきFeedlyボタン（横型）
************************************/
.feedly-btn-horizontal img#feedly-follow{
  width:60px;
  height:20px;
  border:0;
  margin-right:3px;
}

.feedly-btn-horizontal .arrow_box {
  position: relative;
  background: #fff;
  border: 1px solid #BDBDBD;
  padding: 0 6px;
  border-radius:3px;
  top:-7px;
  line-height:18px;
  display:inline-block;
  height:20px;
}

.feedly-btn-horizontal a{
  color:#333;
  font-size:11px;
  text-decoration:none;
  line-height:18px;
}

.feedly-btn-horizontal .arrow_box:after,
.feedly-btn-horizontal .arrow_box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.feedly-btn-horizontal .arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 3px;
  margin-top: -3px;
}

.feedly-btn-horizontal .arrow_box:before {
  border-color: rgba(189, 189, 189, 0);
  border-right-color: #BDBDBD;
  border-width: 4px;
  margin-top: -4px;
}

吹き出しのスタイルは、cssarrowpleaseで生成したものを使いました。ものすごく簡単です。