หลังจากที่เล่น Facebook มานาน เราคงเห็นการเปลี่ยนแปลงของ Facebook กันเรื่อยๆ แต่สิ่งที่น่าสนใจอย่างหนึ่งของ Facebook คือ การที่ Facebook ทำตัวเองให้เป็น Platform ไม่ใช่แค่ Social Network อย่างเดียว วันนี้เราจะมาศึกษา Facebook Graph API กันครับ Facebook มองว่า สิ่งต่างๆใน Facebook ตั้งแต่ User, รูปภาพ, กิจกรรม, Wall Post ฯลฯ เป็น จุดจุดหนึ่งในกราฟ ของ Facebook แล้ว Facebook Graph API ก็คือ API ที่นักพัฒนา สามารถนำมาใช้ เพื่อเชื่อมโยง กราฟเข้าหากัน หรือดึงข้อมูลในกราฟมาใช้ ทั้งภายใน และนอก Facebook ได้
The Graph API
อย่างที่เล่าไปว่า Facebook มองว่าทุกสิ่งทุกอย่างใน Facebook เป็นจุดจุดหนึ่งบนกราฟ ทุกจุดจะมีรหัสประจำตัวที่ไม่ซ้ำกัน ยกตัวอย่างเช่น User ผม มีรหัสประจำตัว 516153452 ทีนี้หากเราต้องการดึงข้อมูลจาก Facebook เราก็สามารถ เรียก Facebook Graph API โดยใช้รหัสนี้ เช่น ถ้าเราเรียก
http://graph.facebook.com/516153452
ตัว API จะ return ข้อมูลใน JSON format ซึ่งเราสามารถ เอาไปใช้ต่อตามที่เราต้องการได้
{
"id": "516153452",
"name": "Jirach Gag Suthammanas",
"first_name": "Jirach",
"middle_name": "Gag",
"last_name": "Suthammanas",
"link": "http://www.facebook.com/jirach",
"gender": "male",
"locale": "en_US"
}
หรือยกตัวอย่างง่ายๆ หากเราต้องการเอารูป Profile Picture ไปใส่ไว้ในเว็ปของเรา แล้วให้รูปนั้นเปลี่ยนตาม เมื่อเราเปลี่ยน Profile Picture ใน Facebook ก็อาจจะใช้ URL แบบนี้
<img src="https://graph.facebook.com/516153452/picture" />
Authentication
ก่อนอื่นเลย ก่อนที่เราจะสามารถทำอะไรกับ Facebook Graph API ได้ เราต้อง Authenticate User ซะก่อน เหมือนกับว่าเราต้องขอ อนุญาติ User ที่จะเอาข้อมูลของเค้ามาใช้ โดยเราสามารถทำได้โดยการให้ User Login เพื่อที่จะใช้ Application ของเรา โดยใช้ Username กับ Password ของ Facebook หลังจากที่ User Login เรียบร้อยแล้ว เราจะได้ Access Token มาเพื่อใช้ในการดึงข้อมูลต่าง
สำหรับการ Authenticate User หรือเรียกใช้ Facebook Graph API ต่างๆ ทาง Facebook ก็มี JavaScript SDK เอาไว้ช่วยเราโดยเหมือนเป็นตัวกลาง ระหว่าง php กับ Facebook Graph API
ผมได้เขียนหน้า php อย่างง่ายๆ ตามตัวอย่างใน Document ของ Facebook สามารถเข้าไปดูกันได้ ตาม URL นี้ครับ http://fb.jirach.com/learning/authentication/
ส่วนข้างล่างนี้เป็น Code ของหน้าที่ว่าครับ
< php
/* Setup Facebook Application Constant */
define('FACEBOOK_APP_ID', '145645575450640');
define('FACEBOOK_SECRET', 'af9caaa469d56aa024ed23ac86339c78');
function get_facebook_cookie($app_id, $application_secret) {
$args = array();
parse_str(trim($_COOKIE['fbs_' . $app_id], '"'), $args);
ksort($args);
$payload = '';
foreach ($args as $key => $value) {
if ($key != 'sig') {
$payload .= $key . '=' . $value;
}
}
if (md5($payload . $application_secret) != $args['sig']) {
return null;
}
return $args;
}
$cookie = get_facebook_cookie(FACEBOOK_APP_ID, FACEBOOK_SECRET);
>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jirach's Facebook Programming Practice : Authentication</title>
<style type="text/css">
body {
font-family: "lucida grande" ,tahoma,verdana,arial,sans-serif;
font-size: 13px;
color: #333333;
padding-top: 20px;
}
.wrapper {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #000000;
width: 800px;
padding: 10px;
margin: auto;
}
</style>
</head>
<body>
<div>
< php
if ($cookie) {
/* User Loggedin using Facebook */
/* Useful Varialbe*/
$FB_Graph_URL = "https://graph.facebook.com/me access_token=".$cookie['access_token'];
echo "Logged in with user ID ".$cookie['uid']."<br /><br />";
/* Fetch User ID using Graph Access Token */
$user_id = json_decode(file_get_contents($FB_Graph_URL))->id;
echo "User ID with FB Graph protocol ".$user_id."<br /><br />";
/* Display Profile Picture */
$user_pic = "http://graph.facebook.com/".$user_id."/picture";
echo "<img src='$user_pic' /> <br /><br />";
echo "The dump of all public data available<br /><br />";
$test = json_decode(file_get_contents($FB_Graph_URL));
echo "<pre>";
var_dump($test);
echo "</pre>";
echo "<br /><br />";
}
else {
/* Not Login -> Display Login Button */
echo "<fb:login-button perms="email,user_birthday,user_photos,user_photo_video_tags,read_stream"></fb:login-button>";
}
>
</div>
<!-------------- Facebook Hook -------------->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: '< = FACEBOOK_APP_ID >', status: true,
cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
</script>
<!-------------- Facebook Hook -------------->
</body>
</html>
Leave a Reply