【簡単】コピペで設置 Feedlyの購読者数のカウントボタンを作る

懐かしきGoogle Reader時代

今や、フィードリーダーはFeedlyの時代に

って事で

Feedly の購読者数を取得して表示し

FacebookやTwitterの様に、カウントを表示したボタンを作る方法

Feedlyのカウントボタンを作る

まず、WEBサイトでPHPが使えることが前提です

HTMLでもPHPを動かせる方法があるので、そういった方法を使って

HTMLファイルでもPHPを動くようにしておいてください

こちらの記事が参考になるかと思います通常の方法も載ってます

さくらインターネットのレンタルサーバーでHTMLのファイルでもPHPが使えるようにする方法

あとは、PHPのコードとHTMLを書けば

現在のfeedlyの購読者の数を取得することが出来ます

さらにCSSでデザインしてやれば、立派なボタンに

PHPの部分はこちらのサイトで紹介されているコードを利用させて頂きました

http://hayashikejinan.com/webwork/rss/432/

コード PHP+HTML

<?php
// RSS feed のURLをエンコード
$feed_url = rawurlencode( 'https://9-bb.com/feed/' );

// 購読情報をJsonで取得して購読者数だけ頂く
$subscribers = file_get_contents( "http://cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
$subscribers = json_decode( $subscribers );
$subscribers = $subscribers->subscribers;
?>
<div class="feedly-count-box">
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F9-bb.com%2Ffeed%2F'  target='blank'>
<span><?php echo $subscribers; ?></span>
<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>

(コードをダブルクリックで簡単に選択出来ます)

3行目のURLを自身のRSSのURLに

11行目のURLを自身のFeedlyの登録の画面のURLに

11行目のURLはFeedlyのボタンの作成のページで作ったURLを使うと簡単です

http://www.feedly.com/factory.html

コード CSS

.feedly-count-box {
  width: 71px;
  text-align: center;
}

.feedly-count-box a {
  text-decoration: none;
}

.feedly-count-box span {
  display: block;
  color: #444;
  border: 1px solid #aaa;
  margin-bottom: 5px;
  font-size: 13px;
  padding: 5px;
  border-radius: 3px;
  position: relative;
  background: #fff;
}

.feedly-count-box span:before {
  position: absolute;
  top: 100%;
  left: 28px;
  width: 0;
  height: 0;
  content: "";
  border: 5px solid transparent;
  border-top-color: #999;
}

.feedly-count-box span:after {
  position: absolute;
  top: 100%;
  left: 29px;
  width: 0;
  height: 0;
  content: "";
  border: 4px solid transparent;
  border-top-color: #fff;
}

.feedly-count-box img:hover {
  opacity: 0.8;
}

(コードをダブルクリックで簡単に選択出来ます)

CSSに、コレを追加してやればカウントボックスのボタンが出来上がりです(下のは画像)

WS003224