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=Shift_JIS">
<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>


基礎から学ぶ facebookアプリ開発
基礎から学ぶ facebookアプリ開発 をAmazon.co.jpでチェック


ホームへ



Copyright (C) 2008 KUNISAN.JP. All Rights Reserved.