Facebookアプリ開発チュートリアル第1回 -自分の情報を取得する
on 2011年3月21日
Facebookアプリケーション開発 > JavaScriptによる開発チュートリアル第1回
Facebookが提供するJava Script SDKを利用すれば簡単にFacebookデータを取得できます。
ここでは、JavaScriptによるFacebookアプリケーション開発チュートリアルを提供しています。
第1回はFacebook JavaScript SDKを利用して自分の情報を取得方法です。
(参考:Facebook JavaScript SDK)
1. JavaScript SDKを読み込みます。
以下のコードをBody内に記述ください。赤字の値をあなたのアプリケーションIDに変更ください。
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
2. ログインしているかを確認します。
response.sessionがTrueであればログインしているので、ユーザー情報取得関数を呼び出します。
FB.getLoginStatus(function(response) {
if (response.session) {
document.getElementById('login').innerHTML
='<a href="#" onclick="FB.logout();">Logout</a><br/>';
get_user_information();
} else {
document.getElementById('login').innerHTML
='<fb:login-button show-faces="true" width="200"'
+ ' max-rows="1" perms="user_likes, friends_likes">'
+ '</fb:login-button>';
FB.XFBML.parse();
}
});
3. Facebookに登録された自分の情報を表示します。
FB.apiでAPIを呼び出します。(参考:Facebook Developers FB.api)。FB.apiを使って、ほぼ全ての機能を利用できます。ただし、実際に利用できるかどうかはユーザーから許可を得る必要のあるケースが多々あります。
function get_me_information() {
document.getElementById('information_me').innerHTML = "Requesting data from Facebook ... ";
FB.api('/me', function(response) {
document.getElementById('information_me').innerHTML = response.name;
});
}
4. 友達の名前を取得します。
さらに、Facebook上の友達の名前を取得します。以下のコードは友達の数だけループして名前を表示しています。
function get_friends_information() {
document.getElementById('information_friends').innerHTML = "Requesting data from Facebook ... ";
FB.api('/me/friends', function(response) {
for ( i=0; i < response.data.length; i++){
document.getElementById('information_friends').innerHTML += response.data[i].name+"";
}
});
}
さあ、次はFacebookページ情報を取得しましょう。
第2回Facebookページ情報を取得する
関連記事
- New Developer Alert for [Facebookアプリケーション名]というメールが一斉に送信
- Graph APIで取得したFacebookページ情報からpictureが消えている
- Facebook アプリセンター使い方
- Facebook、独自のアプリストア(the App Center)を開設
- Wordpress サムネイル画像と抜粋(Description)取得方法
関連記事
Tagged with: facebookアプリ開発