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

仕組みについて

前述したﾎﾎ冢次男さんの記事で書かれている通り、Feedlyの購読者数などの情報はJSON形式で取得する事が可能です。
が、ウチはMT使って静的に出力してるんでPHPの環境はあるんですが、ﾎﾎ冢次男さんのやり方ではダメなんですね。
で、JavaScriptで書こうと思ったんですが、クロスドメインの制約がある為にクライアント（ローカルマシン）から他のサーバー（この場合Feedlyのサーバー）に対してJavaScriptを実行する事は出来ません。

その為、Feedlyからデータを取得する部分はPHPによってサーバサイドで実行するようにしています。
JavaScriptから非同期通信でPHPを呼び出し、PHPから取得したデータを返してもらいます。
JavaScriptは受け取ったデータでidで指定された要素の中身を書き換えます。
所謂、Ajaxってヤツですね。

因みに、同じ仕組みを使って簡単にFeedly購読者数を確認出来るページも公開しましたので併せてどうぞ。

[K]RSSフィードのURLを入力するだけ！簡単にFeedlyの購読者数を確認できるページを公開しました | Knowledge Colors

ソースコード

ソースコードについて以下を参考にご自身の環境に合わせて適宜修正してみてください。

PHP

PHPの内容はﾎﾎ冢次男さんの記事で書かれているものとほぼ同じです。
JavaScriptから渡された「feed」の値をエンコードしてFeedlyのJSONを読み込み、配列に展開して購読者数の値だけを返します。
エラーが発生した場合は「０（ゼロ）」を返します。

【PHPの記述】

<?php
    // 直接このファイルを開かれたらエラー
    if (!(isset($_SERVER['HTTP_X_REQUESTED_WITH'])
                    && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest')
                    && (!empty($_SERVER['SCRIPT_FILENAME']) && 'json.php' === basename($_SERVER['SCRIPT_FILENAME']))
    ) {
        die ('直接このファイルを開かないでください。');
    }

    $feed = $_GET['feed'];
    $feedUrl = rawurlencode($feed);
    if(!$json = file_get_contents("http://cloud.feedly.com/v3/feeds/feed%2F" . $feedUrl)) {
        $data =array('subscribers' => 0);
    } else {
        $data = json_decode( $json , true );
    }

    echo $data['subscribers'];
?>

JavaScript

JavaScriptのソースは以下の通りです。
一行目の「url」で定義している部分にご自身のRSSフィードのURLを記述してください。
二行目の「phpPath」は実際にFeedlyのデータを取得するPHPファイルの設置場所を記述します。呼び出し元のファイルと違う場所に設置する場合は適宜修正してください。

【JavaScriptの記述】

<script type="text/javascript">
var url = 'https://knowledgecolors.net/atom.xml'; // RSSフィードのURLを入力
var phpPath = '/feedly/getFeedlyCount.php'; // PHPファイルのパスを記述

try {
    var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
    var xmlHttpRequest = new XMLHttpRequest();
}
xmlHttpRequest.onreadystatechange = function()
{
    var result = document.getElementById('feedly-count');
    var READYSTATE_COMPLETED = 4;
    var HTTP_STATUS_OK = 200;

    if( this.readyState == READYSTATE_COMPLETED ) {
        if( this.status == HTTP_STATUS_OK ) {
            var subscribers = this.responseText;
            result.innerHTML = subscribers;
        } else {
            result.innerHTML = 'Failed';
        }
    } else {
        result.innerHTML = 'Loading...';
    }
}
xmlHttpRequest.open( 'GET', phpPath + '?feed=' + url, true );
xmlHttpRequest.send( null );
</script>

HTML

HTML側の記述は以下の通りです。
JavaScriptで「feedly-count」のidを指定しているのでそこに返された購読者数が書き込まれます。
それ以外の部分は修正しても特に問題は無いと思います。

例えば「<p>現在の購読者数は <span id="feedly-count"></span> です。</p>」のような記述方法でも大丈夫です。
但し、CSSで見た目を制御しているので、CSSの修正も必要です。

カウンタの表示場所はJavaScriptを実行している同じページの表示領域（bodyタグ内）なら何処に設置しても大丈夫な筈です。
但し、idで指定していますので同一ページ内に複数設置するとJavaScriptエラーになるかもしれません。

因みに、Feedlyボタン画像のサイズはwidth、heightを指定して表示サイズを変更してます。
もっとボタンぽいデザインのモノもありますので、そちらを使ってもイイかもしれません。
オイラはこのデザインが気に入ったのでサイズ調整して使いました。

【HTMLの記述】

<div id="feedly-followers">
<!-- ↓カウンタ部分 -->
<span id="feedly-count" class="fdly-count">0</span>
<!-- ↓Feedly標準のフォローボタン -->
<a href='http://cloud.feedly.com/#subscription%2Ffeed
%2Fhttp%3A%2F%2Fknowledgecolors.net%2atom.xml' target=
'blank'><img id='feedlyFollow' src='http://s3.feedly.com/
img/follows/feedly-follow-rectangle-flat-big_2x.png' alt=
'follow us in feedly' width='85' height='36'></a>

</div>

以下の様なCSSで主にカウンタ部分の修飾をしています。
一般的なSNSボタンを真似して吹き出しを付け、ボーダーは緑にしてFeedlyっぽい感じにしてみました。

CSS

【CSSの記述】

/* カウンタ付きFeedlyボタン全体を包括するブロック */
#feedly-followers {
    display: block;
}
/* カウンタ本体の修飾 */
#feedly-count {
    margin-bottom: 6px;
    top: 0px;
    width: 74px;	←カウンタの幅
    height: 31px;	←カウンタの高さ
    background-color: #FFF;
    position: relative;
    border: 1px solid #669966;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 0 4px;
    font-family: Arial;
    font-size: 16px;
    line-height: 31px;
    text-align: center;
    color: #2D4C86;
    display: block;
}
/* カウンタ吹き出し部分の修飾 */
.fdly-count:after,
.fdly-count:before {
    border: solid transparent;
    content: ' ';
    height: 0;
    right: 100%;
    position: absolute;
    width: 0;
}
.fdly-count:before {
    border-width: 5px;
    border-top-color: #B0C1D8;
    top: 32px;	←カウンタの高さを変えたら調整が必要
    left: 45%;
}
.fdly-count:after {
    border-width: 5px;
    border-top-color: #FFF;
    top: 30px;	←カウンタの高さを変えたら調整が必要
    left: 45%;
}

で、完成品が↓こちらです。

0

このボタンを押して登録後、このページを再読み込みするとカウンタが増えているのを確認出来たりしますが、お試しになりますか？
お試しになりますか？
お試しになりますね？
押してください。
ほら、押して！(f・Д・)f

ダウンロード

って事で、日頃のご愛顧に感謝して今回のソースを公開します。
試してみたい方は下のダウンロードボタンをクリックしてファイルをダウンロードしてください。

FeedlyCounter.zip（2.26 KB）

ファイルはZIP形式でまとめてありますのでダウンロード後解凍して、ご自分の環境に合わせて編集してください。
HTML、CSS、JavaScript、PHPの４つのファイルに分けてありますが、１つのファイルに全て記述する事も可能です。
ま、色々試してみてくださいw

注意事項

• 配布ファイルにはFeedlyのボタン部分は含まれていません。
  下記サイトよりご自分の環境に合わせたボタンを取得して使用してください。
  『feedly. your news. delivered.』
• 設置にはご利用のサーバでの独自PHPの実行が許可されている必要があります。
• 設置した事によって発生した如何なる損害・損失、その他不利益に対して当方では責任を負いかねます。
  自己責任ってことでお願いしますね♪
• サポート等も出来かねますので、上手く動かない時は勉強だと思って自己解決をお願い致します。
  ま、Twitter等で質問して頂ければ可能な時にお返事する事も出来なくも無い事も無い事は無いかもしれませんw
• ソースの修正・改変等は自由にして頂いて結構です。
  但し、再配布はしないでください。故意か否かを別にして、不正なスクリプト仕込んで弊ブログが配布しているかの様な事をされると非常に困っちゃいます。
• 不都合が生じた場合など、予告無くソースの公開を中止する場合がありますので予めご了承ください。
  将来的にFeedlyがAPIやカウンタ付のボタンを公開した場合は配布を中止すると思います。

関連リンク

• ﾎﾎ冢次男 - 開いた口が半開きになるブログ
• welcome to feedly
• feedly. your news. delivered.（Feedly登録ボタン作成）

[スポンサードリンク]