maeharin/show_fb_picture.html

## show_fb_picture.html
<html lang="ja">
<head>
  <script src="http://connect.facebook.net/ja_JP/all.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
  <div id="start_section"></div>
  <div id="friend_section"></div>
  <div id="fb-root"></div>
  <script type="text/javascript">
    /**
     * facebookの認証制御
     */
    function authFacebookAccount(){
      FB.getLoginStatus(function (response) {
        if (response.status === 'connected') {
          getMyGender();
        } else if (response.status === 'not_authorized') {
          FB.login(function (response) {
            getMyGender();
          });
        } else {
          FB.login(function (response) {
            alert('ログインしました。STARTボタンを押してください');
          });
        }
      });
    }

    /**
     * ユーザー自身の性別を取得
     */
    function getMyGender() {
      FB.api('/me', function (response) {
        getFriendsList(response.gender);
      });
    }

    /**
     * 友達一覧を取得
     */
    function getFriendsList(mygender) {
      FB.api('/me/friends', function (response) {
        var count = response.data.length;
        for (var i = 0; i < count; i++) {
          showAnotherGenFriends(mygender, response.data[i]);
        }
      });
    }

    /**
     * 異性の友達のプロフィール写真を表示
     */
    function showAnotherGenFriends(mygender, fInfo){
      var fid = fInfo.id;
      var fpicUrl = 'https://graph.facebook.com/'+fid+'/picture?type=large';
      FB.api(fid, function (response) {
        if (response.gender != mygender) {
          var img = $('<img src="' + fpicUrl + '"><br>');
          $('#friend_section').append(img);
        }
      });
    }

    $(function(){
      var APP_ID = 'xxx'; //your app id
      FB.init({
        appId: APP_ID,
        status: true,
        cookie: true,
        xfbml: true,
        oauth: true
      });
      FB.getLoginStatus(function(response) {
        $("#start_section").html('<button id="start">スタート</button>');
        $("#start").click(function(){
            authFacebookAccount();
         });
      });
    });
  </script>
</body>
</html>
	<html lang="ja">
	<head>
	<script src="http://connect.facebook.net/ja_JP/all.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	</head>
	<body>
	<div id="start_section"></div>
	<div id="friend_section"></div>
	<div id="fb-root"></div>
	<script type="text/javascript">
	/**
	* facebookの認証制御
	*/
	function authFacebookAccount(){
	FB.getLoginStatus(function (response) {
	if (response.status === 'connected') {
	getMyGender();
	} else if (response.status === 'not_authorized') {
	FB.login(function (response) {
	getMyGender();
	});
	} else {
	FB.login(function (response) {
	alert('ログインしました。STARTボタンを押してください');
	});
	}
	});
	}

	/**
	* ユーザー自身の性別を取得
	*/
	function getMyGender() {
	FB.api('/me', function (response) {
	getFriendsList(response.gender);
	});
	}

	/**
	* 友達一覧を取得
	*/
	function getFriendsList(mygender) {
	FB.api('/me/friends', function (response) {
	var count = response.data.length;
	for (var i = 0; i < count; i++) {
	showAnotherGenFriends(mygender, response.data[i]);
	}
	});
	}

	/**
	* 異性の友達のプロフィール写真を表示
	*/
	function showAnotherGenFriends(mygender, fInfo){
	var fid = fInfo.id;
	var fpicUrl = 'https://graph.facebook.com/'+fid+'/picture?type=large';
	FB.api(fid, function (response) {
	if (response.gender != mygender) {
	var img = $('<img src="' + fpicUrl + '"><br>');
	$('#friend_section').append(img);
	}
	});
	}

	$(function(){
	var APP_ID = 'xxx'; //your app id
	FB.init({
	appId: APP_ID,
	status: true,
	cookie: true,
	xfbml: true,
	oauth: true
	});
	FB.getLoginStatus(function(response) {
	$("#start_section").html('<button id="start">スタート</button>');
	$("#start").click(function(){
	authFacebookAccount();
	});
	});
	});
	</script>
	</body>
	</html>