ようやくできた!feedlyの購読者数をJavaScriptのAjaxオンリーで取得する方法

feedly

先日、Pocketのシェア数をJavaScriptだけで取得する方法を書きました。

Pocketのシェア数をJavaScriptのAjaxで取得する方法
Pocketは、外部サービス向けにAPIが公開されていません。 ですので、シェア数を取得する方法は、情報が少ないです。しかも、...

上の記事は、Google+のシェア数をJavascriptで取得する方法を参考に、「Yahoo! Pipes(サービス終了)」というサービスを経由することによって、AjaxでページのHTMLをXMLで取得し、正規表現でカウント数を抽出しています。

直接、PocketにjQueryのAjax経由で取得しようとすると、クロスドメイン制約(Access-Control-Allow-Origin)によってエラーが発生するのを、Yahoo! Pipesを経由(パイプ)することで防いでいます。

今回のfeedlyの購読者数も同様に取得します。で、その方法の紹介です。

追記:Yahoo! Pipes経由での取得は、feedly側で拒否られたかもしれません。ですので、オーソドックスにPHPで取得した方が良いかもしれません。

feedlyの購読者カウントの取得方法。Yahoo! PipesからAjaxでの取得拒否対策
以前feedlyの購読者数を「Yahoo! Pipes(サービス終了)」を経由して、Ajaxで取得する方法を書きました。 ただこの...

追記(2015年10月):Yahoo! Pipesがサービス停止ということで代替方法。

feedlyの購読者数をAjaxで非同期に取得するWordpressカスタマイズ方法
以前、PHPとWordpress関数を利用して、テーマチェッカーでもエラーが出ない「feedly購読者数取得関数」を書きました。 ...
スポンサーリンク
レクタングル(大)広告

これまでのfeedly購読者数取得方法

feedlyの購読者数を取得するには以下のようにfeedlyにアクセスする必要があります。

このようにアクセスすることで、以下のようなjsonデータが帰ってきます。

この返却値の以下の部分が購読者数になります。

これまで、ネットにあるfeedlyの購読者数取得方法をまとめると以下のような感じです

PHPで取得

PHPで取得する方法は、以前僕も記事に書いているのでそれを紹介します。

feedly購読者数付き横型フォローボタンの作り方|コピペで使えるWordpressカスタマイズ
feedlyアイコンの右側に、購読者数が表示される吹き出しのついた、小さなフォローボタンを作ってみました。 Wordpressのタ...

この記事では、次のような関数を使ってWordpress上で購読者数を取得しています。

WordPressを使用していないんだったら、以下のような感じ。

参考 ソーシャルカウントの取得方法まとめ(全9サイト)

PHP+JavaScriptで取得する

あともう一つの方法として、クロスドメインエラー回避のため、自分のサーバーでPHPで購読者数を取得し、そこで取得した数値をJavaScript+Ajaxで取得するという方法もあります。

PHPで購読者数を取得し書き出す。

これで取得した数値を、JavaScriptからAjaxで取得します。

ただ、この方法だと、PHPのfile_get_contents()関数が、サーバーの設定次第では、動作しません。サーバーのPHP.iniの設定により、外部ファイルを取得できるように設定していないと、この関数はエラーが出ます。(後、file_get_contents()関数は、Wordpress的にも推奨されていない関数です。)

ですので、多くの人に配布するテーマ内で、この方法を利用することはできません。(今回、本来テーマにそんな機能は不要ということは置いといてください。)

JavaScriptのみで購読者数を取得する方法

そこで、「こちらが書くコードはJavaScriptオンリーで、サーバーの状態関係なく取得する方法はないものか?」と考えたとき、やっぱり「Yahoo! Pipes(サービス終了)」を使うしかないということになりました。その他の方法も思いつかないですし。

で、Yahoo! Pipesを利用して取得する方法が以下。

簡単に説明すると、Yahoo! PipesからJSONデータを取得する設定にしてクエリをかけて、うまくいったら、dataオブジェクトが取得されます。

その後、detaオブジェクト内にjsonがあるので、その中の、購読者数を取得します。

dataオブジェクトは、Chromeのディベロッパーツールでconsole.log(data);と書いて、コンソールに表示させると、中身を確認することができます。

dataオブジェクト


今回まとめて書きましたが、関数部分を外部ファイルに書き出しても良いです。

WordPressで使用する場合は、コメントしてある以下の部分のように使用すればOKです。

あとは、購読者数を表示させるHTML部分に以下のコードを挿入すればOKです。

0の部分を のようにFont Awesomeを使用したスピナーをクルクルさせることで、「読み込み中…」を表現すると、訪問者にもわかりやすいかもしれません。

feedlyカウント1giffeedlyカウント取得後

まとめ

最初、ググってもこういったJavaScriptだけのfeedlyの取得方法は出てこなかったので、やり方がわかるまで、いろいろ試行錯誤しました。

ただ、「Yahoo! Pipes(サービス終了)」を使用してのJSONデータの返し方がわかってからは、XMLを返す方法よりも簡単でした。JSONデータを取得する今回の方法は、オブジェクトが返ってくるので、手軽にデータにアクセスできます。(Pocketの方法と違って、HTMLから正規表現で抽出する必要がないので。)

それにしても、Yahoo! Pipes本当に便利です。工夫次第でいろいろなものの取得に使えそうです。