Pocketのシェア数をJavaScriptのAjaxで取得する方法

800px-Tellason_jeans_back_pocket

Pocketは、外部サービス向けにAPIが公開されていません。

ですので、シェア数を取得する方法は、情報が少ないです。しかも、JavaScript(jQuery)で取得する方法にいたっては、ちょっと検索した限りでは見つかりませんでした。

なので、いろいろ試行錯誤してみた結果、何とかうまくいった方法があったので、その方法を紹介したいと思います。

photo by A Continuous Lean

スポンサーリンク
レクタングル(大)広告

Pocketでシェア数を取得する

Pocketのシェア数をPHPから取得するには、以下の方法があります。

PocketはAPIを公開していないので、上記のようなPocketボタンのHTMLからPHPを用いて直接取得する形となります。

ただこれを、jQueryのAjax経由で取得しようとすると、クロスドメイン制約(Access-Control-Allow-Origin)によってエラーが発生してしまいます。

この制約は、JavaScriptだけで回避することができません。

そこで以前、シェア数をJavaScriptで非同期に取得する方法まとめでGoogleのシェア数取得にも同様の問題があったため、その問題解決するべく、Google+のシェア数をJavascriptで取得する方法を参考にして、その方法をPocketにも応用してみました。

その、クロスドメイン制約を回避する方法は、「Yahoo! Pipes(サービス終了)」というサービスを経由してPocketに接続するというものです。

Yahoo! Pipes では、Ajaxによるグラフィカルユーザーインターフェースを持った「Pipes Editor」上で、「モジュール」をドラッグして「パイプ」で接続することにより、異なる「ソース」から取得した情報を、どのように加工(例えばフィルタリング)すべきかのルールを設定する。加工した結果は、RSSフィードやJSON、KMLなどで出力される。

Yahoo! Pipes – Wikipedia

このサービスを利用することで、以下のような構造になるので、クロスドメイン制約を回避することができます。

こちらのサイト→[Ajaxで接続]→Yahoo! Pipes→[制約のないプログラム言語で取得]→Pocket

PocketからAjaxでシェア数を取得する方法

前置きが長くなりましたが、具体的なシェア数を取得する方法です。

JavaScriptの編集

まずは、JavaScriptの記述です。

Yahoo! Pipesを経由して、HTMLを取得し、取得したものから正規表現でカウント部分を抜き出しています。

[シェア数を取得したいURL]の部分にURLを記入して使用します。

もちろん、関数部分を外部ファイルに切り分けて使用してもOKです。

WordPressでの使用

WordPressで使用するなら、テンプレート内に以下のように書きます。

参考 Google+のシェア数をJavascriptで取得する方法

HTML側の編集

あとは、HTML(Wordpressならテンプレート)に、シェア数の取得結果を表示する部分を書き加えます。

CSSセレクターが「.pocket-count」と書いたので、以下のようなタグをHTMLに挿入します。

こうすることで、サイトのページが読み込まれたあとに、Pocketのシェア数が取得&表示されます。

以下のように、ボタンの吹き出し部分の中に挿入すればそこにカウントが読み込まれます。

Pocketのシェア数表示例

注意点

冒頭にも書きましたが、Pocketは外部にAPIを公開していません。

ですので、純正PocketボタンのHTMLを読み込んで取得しているわけですが、その取得先のHTMLには以下のように書かれています。

Please do not scrape this for the Pocket count.

It is not relible for you to use and will likely change.

Contact us at api@getpocket.com for an official API.

Thanks!

HTMLをスクレーピングして取得する方法は、APIで取得するような信頼性はないので、今後のPocketの仕様変更により、今後いきなり取得できなくなる可能性があります。(ポケットがシェア数周辺のHTML記述を少し変更するだけで、使えなくなります。)

まとめ

こんな感じに無理やりですが、Pocketのシェア数をJavaScriptから取得することができました。

それにしても「Yahoo! Pipes(サービス終了)」、便利そうです。使い方次第で、Ajaxからでもいろいろなものが取得できるようになりそうです。