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

feedly
このエントリーをはてなブックマークに追加
PR

懐かしき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( 'http://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

 

 

コピペだけで導入できるのでよかったら使ってみてください

あと、よかったらこのブログもfeedlyに登録しっちゃったりして!

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)