FBが提供しているGraph APIを利用すれば、いろんな情報がJSON形式で取得できるんですね。これを、jQueryでゴネゴネすれば・・・ふふふっ。

先日、wordpressプラグインで有名の、Jetpackの共有機能(いいねボタンやツイートボタン)にて、いいね数が旨く取得できない状況が置きました。その場は、オリジナルアイコンに設定することでとりあえずの対応を行ったのですが・・・。いかせん、プラグインの中身を弄って修正するのは気持ち悪い。
であれば自作しようということでgoogle先生にお世話になっていると、FBが提供しているGraph API(http://graph.facebook.com/〜〜〜)を利用すると簡単に取得できるyo!ということで、早速試してみました。


まずは、http://graph.facebook.com/の後に、調べたいページ(https://amiten.net/archives/421)のURLを付けてみる。

実験:下記URLをブラウザでタタク

[html]
http://graph.facebook.com/https://amiten.net/archives/421
[/html]

出力

[javascript]
{
“id”: “https://amiten.net/archives/421”,
“shares”: 32
}
[/javascript]

すると見慣れたJSON形式で何かが出力・・・・っと、sharesって=いいね数じゃないですか!これだけで取得できるのか。


次は、取得できたJSONをjQueryで出力。

html側

[html]
ここにいいね数を表示するよ!
[/html]

jQuery側

[javascript]
$.getJSON(“http://graph.facebook.com/https://amiten.net/archives/421”, function(data){
$(“.fblike”).text(data.shares);
});
[/javascript]

なんと、たった3行で表示!


最後に、JSON形式はIE9さん以下では取得できないので・・・取得するURLのお尻に[?callback=?]を追加(jQueryが用意しているおまじない)をする。

html側

[html]
ここにいいね数を表示するよ!
[/html]

jQuery側

[javascript]
$.getJSON(“http://graph.facebook.com/https://amiten.net/archives/421?callback=?”, function(data){
$(“.fblike”).text(data.shares);
});
[/javascript]

できました!

  • 2013/10/08
  • 647
  • 1

関連記事

一つだけコメントあり

中の人

このページもスパムで一部、サンプルコードがやられてました。あらかた直したと思ったけど・・・直し漏れです。

Reply

コメントを残す