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

外部サービス向けのAPIが公開されていないGoogle+のシェアボタンをオリジナルのデザインに変更するために、Javascriptで共有数を取得してみました。

どこからシェア数を取得するか？

まずどこからShare数を取得すればいいのかが問題となります。Google+純正のシェアボタンの構造を見るとわかる通り、以下のページをHTMLのIFRAMEで表示しているようです。

https://plusone.google.com/_/+1/fastbutton?hl=ja&url=ページのURL

このページのソースを見てみると、以下のJavascriptが目的の値となります。

window.__SSR = {c: **.* ,si:*,su:*,e:'*@gmail.com',dn:'*',a:'bubble',at:'*',ld:[,[2,80,[]
,1,106]
]
,s:'widget',annd: 2.0 ,bp: {}, id:'*'}

このwindow.__SSRという値のc: **.*の部分が目的のカウント数となります。この部分を正規表現で抽出してあげれば目的は達成できそうです。

Access-Control-Allow-Originを回避する

値を取得するソースは見つかったので、jQueryを使ってAjax経由で取得すればいいのですが、ここでクロスドメイン制約（Access-Control-Allow-Origin）によってエラーが発生してしまいます。

このクロスドメイン制約は、Javascriptだけで回避することが不可能なので、外部のサービスに頼ることになります。今回はYahoo! Pipesを使用してみます。

Yahoo! Pipesを経由してXMLを取得する

このPipesでは、YQLというクエリを発行して結果を得るような構造になっています。今回は以下のようなYQLを発行します。

SELECT content FROM data.headers WHERE url='https://plusone.google.com/_/+1/fastbutton?hl=ja&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

上記のYQLをhttp://query.yahooapis.com/v1/public/yqlにリクエストすれば結果が取得できます。

実際にjQueryでシェア数を取得する

これらを踏まえて、Javascriptを書いてみると以下のようになります。

var url = "http://www.google.com/";
var e = "#google-share";
$.ajax({
    type: "get", dataType: "xml",
    url: "http://query.yahooapis.com/v1/public/yql",
    data: {
        q: "SELECT content FROM data.headers WHERE url='https://plusone.google.com/_/+1/fastbutton?hl=ja&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 = $(data).find("content").text();
        var match = content.match(/window\.__SSR[\s*]=[\s*]{c:[\s*](\d+)/i);
        var count = (match != null) ? match[1] : 0;

        $(e).text(count);
    }
});

先頭のurlの部分を取得したいページのURLに、eの部分を取得した結果を挿入する要素に変更すればOKです。

Googleさん早く...

API公開してください！