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

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の記述です。

<script>
//ポケットのストック数を取得
function get_social_count_pocket(url, selcter) {
  jQuery.ajax({
    type: "get", dataType: "xml",
    url: "http://query.yahooapis.com/v1/public/yql",
    data: {
      q: "SELECT content FROM data.headers WHERE url='https://widgets.getpocket.com/v1/button?label=pocket&count=vertical&v=1&url=" + 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: "xml",
      env: "http://datatables.org/alltables.env"
    },
    success: function (data) {
      var content = jQuery(data).find("content").text();
      var match = content.match(/<em id="cnt">(\d+)<\/em>/i);
      var count = (match != null) ? match[1] : 0;
 
      jQuery( selcter ).text(count);
    }
  });
}

get_social_count_pocket('[シェア数を取得したいURL]', '.pocket-count');
</script>

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

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

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

WordPressでの使用

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

get_social_count_pocket('<?php the_permalink(); ?>', '.pocket-count');

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

HTML側の編集

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

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

<span class="pocket-count">0</span>

こうすることで、サイトのページが読み込まれたあとに、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記述を少し変更するだけで、使えなくなります。）