はてなブログにFeedlyの購読者数付きボタンをJavascriptだけで設置する方法
本日はブログカスタマイズネタです。いーとてくのろじでは、Feedlyの購読者数付きボタンをとあるすWEBスクレイピングサービス経由で取得して表示させていたのですが、試用期間が過ぎてエラー表示となってしまい、しばらくずっと放置していました。このままでは気持ち悪いのでそろそろ直さなければ！と思い立ち、何か良い方法は無いかと探し回ったところ「Yahoo! Pies」というサービス経由でJavascritだけで取ってこれる素敵な方法を発見。はてなブログに表示させるコードを含めて紹介します。先日の知恵に感謝です。
ScraperWikiの試用期間が過ぎて取得できなくなった
もともと@tarVolcanoさんの下記の記事を参考に、
Feedlyの購読者数付きボタンを作っていたのですが、記事の中で説明されているWEBスクレイピングサービスのScraperWikiの試用期間が過ぎて購読者数が取得できなくなってしまいました。（昔は無料でもずっと使えたんですかね？）
Yahoo! Pies ならずっと無料で使えて会員登録も不要
正直ずっと放置プレイだったのですが、正月でやっと重い腰が上がりました。無料でずっと使えて、おまけにJavascriptだけで取ってこれるやり方無いかなぁと探していたところ、まさに探し求めていた情報を寝ログさんの記事で発見。
Yahoo.com が提供するマッシュアップサービス「Yahoo! Pipes」を利用して、feedlyのソースから購読者数を抜いて来ます。
Yahoo! Pipes とはどんなサービスか？を簡単に説明すると、様々な異なるソースから取ってきた情報をブラウザ上でコネコネ加工して好きな形式で出力できるWEBサービスです。
RSSフィードや外部のサービスなどのさまざまな情報をまとめたり、マッシュアップすることができる。 Yahoo! Pipes では、Ajaxによるグラフィカルユーザーインターフェースを持った「Pipes Editor」上で、「モジュール」をドラッグして「パイプ」で接続することにより、異なる「ソース」から取得した情報を、どのように加工（例えばフィルタリング）すべきかのルールを設定する。 加工した結果は、RSSフィードやJSON、KMLなどで出力される。
米Yahoo!のIDを取得すれば、実際にブラウザ上でGUIを使ってコネコネできるようになります。（今回の購読者数付きボタンを作りたいという要件だけであれば、特に会員登録せずとも、出来上がったソースを引用すれば実現可能です。）
実際のソースはこんな感じ。ちょっと見た目は悪いですが、参考にどうぞ。（はてなブログさん、「見たまま記法」でソースを引用するのがとても辛い...今更はてな記法に切り替えるのもしんどいので、何か改善してくれないかなぁ。）
紹介のため少しコードを改変していますが、いーとてくのろじの場合は下記のコードをサイドバーにペタッと貼って使っています。
<script>
//feedlyの購読者数を取得
function get_social_count_feedly(rss_url, selcter) {
jQuery.ajax({
type: "get", dataType: "json",
url: "http://query.yahooapis.com/v1/public/yql",
data: {
q: "SELECT content FROM data.headers WHERE url='http://cloud.feedly.com/v3/feeds/feed%2F" + encodeURIComponent(rss_url) + "' and ua='#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36'",
format: "json",
env: "http://datatables.org/alltables.env"
},
success: function (data) {
count = data.query.results.resources.content.json['subscribers'];
//console.log(count);
jQuery( selcter ).text(count);
console.log('feedly_count:');
console.log(count);
}
});
}
document.addEventListener( "DOMContentLoaded", get_social_count_feedly('[ブログのfeed用URL（RSS）]', '#feedlyCount'), false );
// ]]></script>
<div id="feedly-followers" class="over"><span id="feedlyCount" class="subscribers"></span> <a href="[ブログのfeedlyページURL]" target="blank"><img id="feedlyFollow" src="[ボタン表示用の画像]" alt="follow us in feedly" /></a></div>
イベントリスナーに登録しておいて、コンテンツが読み込まれた時に再度読み込みに行く作りにしています。
1点、注意点としてjQueryを使っているので、特に設定していない場合は別途読み込みが必要です。もし未設定の場合は、管理画面からヘッダに下記コードを挿入するのが手っ取り早いと思います。（Googleが提供しているjQueryです。）
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
ずっとエラー表示だった購読者数がまた現れてスッキリな気分です。それにしても、Yahoo! Pipesは今回初めて知って使ってみましたが、かなり便利ですね。他社ブログサービスを使っているから受け入れるしか無い制約だと思っていたことが、Javascriptさえ使えてしまえば、色々実現できてしまいそうです。
あとがき @aiza_waiさんをフォロー
最近やや惰性で書いている感がありましたが、修正工事をしたらまたブログへの愛着がちょっと戻ってきました。もうすぐ毎日書いて１年！流石に１年の振り返り記事は書かないとなぁ〜
