jQueryによるJSONの利用方法 – FacebookでLIKEした情報を取得してみる

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。今回は【jQueryを使ったJSONの活用方法 FacebookでLIKEした情報を取得してみる】に関する記事です。JSONの記事を書きたかったので取得内容は何でも良かったのですが、身近なFBから触ってみようかと思います。LIKE以外にも色々な情報が取得可能ですので、機会があればお試しください。

facebook dev

まずは取得したい情報を選択します。これに関してはFacebook developersのこちらのページにアクセスし、任意の情報を選択すればOKです。今回はテストでLIKEを扱いますので【https://graph.facebook.com/me/likes?access_token=…】を選択します。ちなみにアクセストークンの有効期間は1時間に設定されています。app化は手間ですので、デモではアクセスした時点のJSONを保存して使用しています。

さらに任意の情報を複合し、複雑な情報を取得するには【Graph APIエクスプローラ】より、自分でNodeを設定することも可能です。

コード

HTML
<ul id="jsonBd"></ul>
JS

$(function(){

var uri = ‘ここにURL’;
$.getJSON(uri,
function(json){
$.each(json.data, function(key,value){
if(value.category == "Movie" || value.category == "Tv show" || value.category == "Movie general"){
$(‘#jsonBd’).append(‘<li class="fb"><ul><li><a href="https://www.facebook.com/’+ value.id + ‘" target="_blank">’ + value.name + ‘</a></li><li>CATEGORY : ‘+ value.category +'</li></ul><li>’);
//if ( key == 5 ) return false;
}
});
});

});

JSON

{
"data": [
{
"name": "いいね先ページの名称",
"category": "カテゴリー名",
"id": "1234567789(ID名)",
"created_time": "2012-09-03T03:30:11+0000"
},
{
"name": "いいね先ページの名称",
"category": "カテゴリー名",
"id": "1234567789(ID名)",
"created_time": "2012-08-29T06:22:10+0000"
},
{
"name": "いいね先ページの名称",
"category": "カテゴリー名",
"id": "1234567789(ID名)",
"created_time": "2012-08-27T06:21:19+0000"
},
{
"name": "いいね先ページの名称",
"category": "カテゴリー名",
"id": "1234567789(ID名)",
"created_time": "2012-08-23T21:59:23+0000"
},

本例ではjQuery each関数によるオブジェクトの繰り返し処理を行い、いいねした情報の中から映画関連に絞ってリスト化しています。
 
以上になります。