Google+1のシェア数をクライアントサイドだけで取得 & Facebookのシェア数の取得に関する特殊な事情 & ちょっと宣伝

## Google+1のシェア数取得までの道のり

### 第1章 Google+1攻略作戦

巷で紹介されているシェア数の取得の情報って大体はTwitter、Facebook、はてなブックマークだけなんです。

なぜかというと上記3サービスには公式でシェア数を取得するAPIが用意されているから。

SNS分野に殴り込みをかけてしばらくたったネットの怪物、あのGoogleがこともあろうにシェア数を取得するAPIを用意していないときたもんだ。

まあ公式のボタン使えよってことなのかね・・・

でもやっぱりGoogle+1のシェア数欲しいなーって事でググってみたらこんなのを見つけました。

<http://stackoverflow.com/questions/8853342/how-to-get-google-1-count-for-current-page-in-php>

公式のGoogle+1ボタンは専用のスクリプトをロードして、そのスクリプトがページ内にインラインフレームを作ってそこにボタン部分のHTMLを埋め込むという処理になっていますが、その埋め込むHTML自体を直接取得してその中からシェア数の数字を引っこ抜くという力技ですが、一応この方法でシェア数は取得できるようです。

で、問題はここからで、上記の記事はPHPによる取得、つまりサーバーサイドだからこそできる方法であり、クライアントサイドからjQueryで同じことをやろうとしても「クロスドメインだからさせねーよ」になってしまいます。

安易な解決方法としてはサーバーサイドでGoogle+1のシェア数を取得する小型スクリプトを用意して、それとセットで動かせば目的は達成できますが・・・

### 第2章 そんなの全然お手軽じゃない！

やっぱりjQueryのプラグインだけで取得できるようにしたい。

どこかにあるはずだ・・・Google Feed APIみたいな中継サービスでRSS以外に対応しているようなのが・・・

と思い探してみたところ、YQLというYahooが提供しているサービスでインターネット上のさまざまなリソースをSQLの形式で指定して取得できるようです。

参考サイト: <http://hail2u.net/blog/coding/you-can-do-it-with-yql.html>

これよこれ。これとさっきのGoogle+1ボタンのシェア数取得を組み合わせれば攻略完了でないの。ﾌﾞﾋﾋ

で、$.ajaxでこんなリクエストを飛ばしてみました。

```
http://query.yahooapis.com/v1/public/yql?q=SELECT * FROM html WHERE url='https://plusone.google.com/_/+1/fastbutton?hl=ja&url={シェア数を取得したいURL}'
# 実際にはパラメータのURLエンコードが必要
```

あれ？取得できない？と思って[YQL Console](http://developer.yahoo.com/yql/console/?q=SELECT%20*%20FROM%20html%20WHERE%20url%3D%27https%3A%2F%2Fplusone.google.com%2F_%2F%2B1%2Ffastbutton%3Fhl%3Dja%26url%3Dhttp%3A%2F%2Fexample.com%2F%27)で確認してみたら

### 第3章 圧倒的拒否からの逆転

```
Redirected to a robots.txt restricted URL: https://plusone.google.com/_/+1/fastbutton? ...
```

googleのrobots.txtに拒否られてやんの。ｵﾜﾀ

でも諦めたらそこで試合終了らしいからもうちょっと粘ってみる。

で、見つけました。YQLにはOpen Data Tableというプラグインみたいな機能があって、その中の`data.header`というプラグインを使えばgoogleにアクセスできるみたい。

参考: <http://stackoverflow.com/questions/9200513/yql-redirected-to-a-robots-txt-restricted-url-error-for-google-domain>

参考: <http://hail2u.net/blog/coding/jquery-query-yql-plugin-supports-open-data-tables.html>

これらを参考に、先ほどの$.ajaxリクエストのURLを修正。

```
http://query.yahooapis.com/v1/public/yql?q=SELECT content FROM data.headers WHERE url='https://plusone.google.com/_/+1/fastbutton?hl=ja&url={シェア数を取得したいURL}' and ua='#{それっぽいUser-Agent}'&env=http://datatables.org/alltables.env
# 実際にはパラメータのURLエンコードが必要
```

[修正バージョンのYQL Console](http://developer.yahoo.com/yql/console/?q=SELECT%20content%20FROM%20data.headers%20WHERE%20url%3D%27https%3A%2F%2Fplusone.google.com%2F_%2F%2B1%2Ffastbutton%3Fhl%3Dja%26url%3Dhttp%3A%2F%2Fexample.com%2F%27&env=http://datatables.org/alltables.env)

おおっHTMLを取得できた！あとはこのHTMLをｺﾞﾆｮｺﾞﾆｮして・・・

![gplus.png](https://qiita-image-store.s3.amazonaws.com/0/17021/92cbddc5-fe14-f911-0d07-ae7639ee9390.png)

でけたー！

と、こんな感じでゴリ押し感満載ですがGoogle+1ボタンのシェア数を取得する事ができました。

めでたしめでたし。

## Facebookの正確なシェア数の取得に至るまでの苦難の物語

### 第1章 あれ？Facebookのシェア数が公式のいいねボタンの数字と違くね？

巷でよく紹介されているFacebookのシェア数の取得方法はこんな感じだと思います。

```
https://graph.facebook.com/{シェア数を取得したいURL}
```

通常、このリクエストを飛ばすとこんなJSONが返ってきます。

```json
{
  "shares": 100,
  "id": "{指定したURL}"
}
```

この`shares`が公式のいいねボタンの数字と同一になると一般的には言われています。

でも、一部のサイトに対してはこんなJSONが返ってくることがあります。

```json
{
  "were_here_count": 0,
  "talking_about_count": 0,
  "name": "{サイト名}",
  "link": "{指定したURL}",
  "likes": ２,
  "is_published": true,
  "is_community_page": false,
  "id": "{数字のみで構成されたID}",
  "about": "{サイトの説明ぽい}",
  "app_id": "0",
  "can_post": false,
  "category": "Website",
  "checkins": 0,
  "description": "{サイトの説明ぽい}",
  "has_added_app": false
}
```

なんぞこれ？と思いましたが、どうやらOGP(Open Graph Protocol)を設定しているサイトではこんなJSONが返ってくるみたいです(でも全部じゃないっぽいので正直イミフ)。

困ったのが、このJSONには`shares`なる項目がありません。

`likes`の__2__ってのがそうなんじゃないの？とも思いましたが、この時チェックしたサイトのいいねボタンの数字は__7__でした。

### 第2章 じゃあプランBで

Facebookのシェア数を取得する方法は他にもあります。FQL(Facebook Query Language)です。

参考サイト: <http://www.imamura.biz/blog/sns/facebook/8393>

というわけでFQLで同じサイトのシェア数を取得してみる事にします。

```
https://graph.facebook.com/fql?q=SELECT total_count FROM link_stat WHERE url='{シェア数を取得したいURL}'
# 実際にはパラメータのURLエンコードが必要
```

こんな感じでリクエストを飛ばすとこんなJSONが返ってきます。

```json
{
  "data": [
    {
      "total_count": 5
    }
  ]
}
```

この`total_count`がシェア数なわけですよ(ﾄﾞﾔｧ。

ってあれ？__7__じゃないし・・・

いやでも大抵の場合はこれでいけるはずなんです。ホントですカンベンしてください。

### 第3章 ん？2 + 5 = 7？ﾊｯ

えー、マジでー？と思いましたがマジっぽいです。海外のフォーラムで同様の現象に遭遇した人がいました。

http://developers.easylike.net/bugs/420816354668146?browse=search_5112a71d859973e15625142

今は404になってます。なんてこった。

つまりまとめると、

1. Graph APIの`shares`が取得できればそれをそのまま
2. Graph APIの`likes`があれば、それとFQLで取得した`total_count`を足したものを
3. `likes`がなければFQLの`total_count`をそのまま

って感じの順番で試せば公式のいいねボタンと同じ数字が取得できるっぽいです。

Facebookに関しては今のところ、これで問題なく動いてます。

## ちょっと宣伝 jQuery POP'n SocialButtonにも対応させました。

jQuery POP'n SocialButtonの紹介については[過去の投稿](http://qiita.com/items/58dac4a4da5763b693cc)をご覧ください。

簡単に言うと各種SNSサービスのカスタムシェアボタンを表示できるjQueryプラグインです。

こんな感じでGoogle+1ボタンに対応しました。

![example1.png](https://qiita-image-store.s3.amazonaws.com/0/17021/4d1d2888-2986-9751-754c-c449a32f3095.png)

さらにGitHubリポジトリのスター数表示ボタンもつけちゃいました(誰得)。

![example3.png](https://qiita-image-store.s3.amazonaws.com/0/17021/e62faaf7-cf54-bd0e-c603-a548d9166f19.png)

* [ソース](https://github.com/ktty1220/jquery.popn-socialbutton)
* [ダウンロード](https://github.com/ktty1220/jquery.popn-socialbutton/archive/master.zip)
* [実際に設置した感じ(フッターの部分です)](http://bucome-watcher.herokuapp.com/)

こんな長文を最後まで読んでくれた方、ありがとうございます。

この情報が何らかの参考にでもなれば幸いです。