購読者数つきのFeedlyボタンを設置したので、その方法と参考にしたサイトを紹介

Feedly button with subscribers number title
Feedly Logo / AJC1

RSSリーダーの最大手だったGoogle Readerがサービスを終了し、その代替として一番人気となっているFeedly

他にもRSSリーダーのサービスはありますが、ほぼGoogle Readerの需要を置き換えたといってもいいくらいではないでしょうか。


それに合わせ本ブログでもFeedlyの購読ボタンを設置していたのですが、このたびそのボタンを購読者数つきに変更しました。

たまに自分のブログの購読者数をブックマークレット等でチェックしたりしていたのですが、その手間を省くのとより購読を促せる効果があるかもと考えてのことです。

今回は、その購読者数つきFeedlyボタン設置の際に参考にしたサイトとその実装方法をご紹介。


Feedlyってなに?

welcome to feedly

Feedlyは、前述の通りGoogle Readerと同様のRSSリーダーサービスの1つ。

Google Reader終了時に1ボタンで移行できる機能をつけたことや、Google Readerとかなり近い外観と使い勝手、Reeder等各種RSSリーダーアプリが続々とFeedlyに対応してきたこともあり、現在では多くのRSS購読者が利用するサービスとなっています。

購読者数つきのFeedlyボタンってどんなの?

Feedlyのサイトで公開されている購読ボタンに、購読者数の吹き出しをつけたもの。
見た目はツイートボタンやいいねボタンと似たような感じになります。

Feedly button with subscribers number 1

購読者数をつけることで、記事を読んでくれた方がよりボタンを押しやすくなったり、自分自身も購読者数をすぐに確認できる効果もあります。

参考にしたサイトと実装方法

では、実際の実装方法です。

と言っても私は技術的に詳しい方ではなく、いろいろ調べて以下の2記事を参考にさせていただきました。
(というか以下の記事の組み合わせです)

これらの記事がなければやってみようとすら思わなかったことでしょう・・・。
有益な情報に感謝。

なお、WordPressなどPHPの実行環境がないと動作しませんので、あしからず。


まず、Feedly購読者数付きボタンを表示させたい位置にPHPとHTMLを記述します。

PHP部分は以下。これは前者の方の記事そのままです。

[php]<?php
if ( false === ( $subscribers = get_transient( ‘feedly_subscribers’ ) ) ) :
$feed_url = rawurlencode( get_bloginfo( ‘rss2_url’ ) );

$subscribers = wp_remote_get( "http://cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
$subscribers = json_decode( $subscribers[‘body’] );
$subscribers = $subscribers->subscribers;

// 負荷軽減のため半日キャッシュする(数値はお好みで)
set_transient( ‘feedly_subscribers’, $subscribers, 60 * 60 * 12 );
endif;
?>[/php]

さらに続けて、以下のHTMLを記述。こちらは後者の記事のHTMLに、前者の記事の購読者数表示を組み合わせたもの。
フィードのURLは自分のブログのものと置き換えてくださいね。

[html]<div id="feedly-followers">
<span id="feedly-count" class="fdly-count"><?php echo $subscribers; ?></span>
<a href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fushigyu.net%2Ffeed%2F’ 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>
</div>[/html]

ここまででボタン及び購読者数は表示されるはず。あとは、CSSで見た目を整えます。

以下は後者の記事で公開されているCSSを当ブログ用にちょっとだけ変えたものになっているので、適宜イイ感じになるように調整してください。

[css]/* 購読者数つきFeedlyボタン */
#feedly-followers {
display: block;
}
/* 購読者数の表示部分 */
#feedly-count {
margin-bottom: 6px;
width: 62px; ←カウンタの幅
height: 31px; ←カウンタの高さ
background-color: #FFF;
position: relative;
border: 1px solid #669966;
border-radius: 4px;
padding: 0 4px;
font-family: Arial;
font-size: 16px;
line-height: 31px;
text-align: center;
display: block;
background: white;
}
/* 購読者数吹き出し部分 */
.fdly-count:after,
.fdly-count:before {
border: solid transparent;
content: ‘ ‘;
right: 43%;
position: absolute;
}
.fdly-count:before {
border-width: 5px;
border-top-color: #B0C1D8;
top: 32px;
}
.fdly-count:after {
border-width: 5px;
border-top-color: #FFF;
top: 30px;
}
​[/css]

初心者の方でも、Chromeの「デベロッパーツール」なんかを使うと割とできますよ。

私のブログは現時点(2013/8/18)で3,161人もの方が購読してくれているらしい。ありがたいことです。

あとがき

記事の下のほうに今回紹介した購読ボタンを設置しておりますので(PC版の場合。モバイル版は吹き出しなしの購読者数表示のみ)、このブログちょっと読んでみてもいいなーと思ってくれた方はぜひポチッとお願いいたします!

この記事をシェアする!

ABOUTこの記事をかいた人

牛嶋 将太郎@ushigyu

牛嶋 将太郎@ushigyu

株式会社エコーズ代表取締役社長(と名乗ってみたくて会社をつくりました)。当ブログにておすすめの製品やお店、旅行先、ガジェットなどを気のむくままに、わかりやすさを心がけて紹介しています。
長崎出身で福岡市在住。東京で就職しましたが独立を機に学生時代を過ごした大好きな福岡に帰還。
⇒ まずはじめに読んでほしい「役立つ」「得する」「面白い」記事はこちら