Facebookのユーザーデータを取り出す方法(JavaScript SDKでAPIデータ取得)Facebookのユーザーデータを取り出す方法(JavaScript SDKでAPIデータ取得)について説明、及びサンプルプログラムを掲載します。※動作保証、プログラムに関する質問への回答等については、一切行ないません。 ■ プログラムの実行前に まずは、Facebook Developersからアプリケーションの登録を行う必要があります。 URL: http://developers.facebook.com/ ■ データ取得のための参考ページ 以下のページを参考にしましょう。 Graph API: http://developers.facebook.com/docs/reference/api/ パーミッション設定: http://developers.facebook.com/docs/reference/api/permissions/ ■ JavaScript SDKを利用したサンプルプログラム 以下のプログラムでユーザーデータを取得することができます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Facebook接続</title>
<script type="text/javascript">
//グローバル変数の初期化
username = '';
userdata = '';
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
// ユーザーの友達リスト
window.fbAsyncInit = function () {
// アプリケーション初期化
FB.init({
appId: '312275792142607',
cookie: true,
oauth: true
});
// ログイン状態チェック
FB.getLoginStatus(function (resp) {
if (resp.authResponse) {
getdata();
} else {
$("#result").text("ボタンをクリックしてログインしてください。");
}
});
// ログイン処理
$("#login").click(function () {
FB.login(function (resp) {
if (resp.authResponse) {
getdata();
}
},{scope: 'user_about_me,user_birthday,user_hometown,user_location,user_likes,user_work_history'}
);
});
// APIからデータ取得
var getdata = function () {
//ログインボタン非表示
$("#login").remove();
// 自分の基本情報を取得
FB.api('/me/', function (resp) {
// 取得データをパース
var htm2 = "<img src=\"https://graph.facebook.com/" + resp.id + "/picture\">";
htm2 += '<br>名前：' + resp.name + '<br>誕生日：' + resp.birthday;
$("#result2").html(htm2);
var htm4 = '<br>出身地：' + resp.hometown.name;
$("#result4").html(htm4);
var htm41 = '<br>居住地：' + resp.location.name;
$("#result41").html(htm41);
var htm42 = '<br>自己紹介：' + resp.bio;
$("#result42").html(htm42);
userdata += resp.hometown.name + ' '; //登録用データに追加
userdata += resp.location.name + ' '; //登録用データに追加
var htm5 = '<br><br>勤務先：<ul>';
// 取得データをパース
for (var i = 0; i < resp.work.length; i++) {
htm5 += '<li>' + resp.work[i].employer.name + '(' + resp.work[i].start_date + '～' + resp.work[i].end_date + ')' + resp.work[i].description + '</li>';
}
htm5 += '</ul>';
$("#result5").html(htm5);
username += resp.name; //登録用データに追加
btn(); //処理の前後があるため、基本情報取得1、基本情報取得2の両方に置いている。
});
// 自分の基本情報を取得2
FB.api('/me/likes', function (resp) {
// 取得データをパース
var htm3 = '<br>好きなもの：<ul>';
var userdata_local = '';
// 取得データをパース
for (var i = 0; i < resp.data.length; i++) {
htm3 += '<li>' + resp.data[i].name + '</li>';
userdata_local += resp.data[i].name + ' ';
}
htm3 += '</ul>';
userdata += userdata_local; //登録用データに追加
$("#result3").html(htm3);
btn(); //処理の前後があるため、基本情報取得1、基本情報取得2の両方に置いている。
});
// 友達リストを取得
FB.api('/me/friends', function (resp) {
var htm = '<br>友達リスト：<ul>';
// 取得データをパース
for (var i = 0; i < resp.data.length; i++) {
htm += '<li>' + resp.data[i].name + '</li>';
}
htm += '</ul>';
$("#result").html(htm);
});
}
};
// JavaScript SDKロード
$(function () {
// 「Script」要素生成
(function () {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
});
//ボタンの処理
function btn() {
var htm6 = '<form method="post" action="user_reg1.php"><input type="hidden" name="MYID" VALUE="' + username + '"><input type="hidden" name="MYDATA" VALUE="' + userdata + '"><button id="register">ユーザー登録</button></form><br><br>';
$("#result6").html(htm6);
}
</script>
</head>
<body>
<h1>Facebook接続</h1>
※データの登録は、Facebookにログイン後、このページの一番下にある「ユーザー登録」ボタンから行ないます。<br>
<div id="fb-root"></div>
<p><button id="login">Facebookログイン</button></p>
<div id="result2"></div>
<div id="result4"></div>
<div id="result41"></div>
<div id="result42"></div>
<div id="result5"></div>
<div id="result3"></div>
<div id="result"></div>
<div id="result6"></div>
</body>
</html>
|
