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>
|