Facebook API [Day1]: Facebook for Websites

Posted by in Coding

ช่วงนี้ศึกษาหลายๆอย่าง พอดีได้โจทย์มาจากเพื่อนในออฟฟิสว่าให้ช่วยอ่าน facebook API ให้หน่อย เลยได้โอกาสหาแรงจูงใจในการมาศึกษามัน กะว่าจะบันทึกสิ่งที่อ่านไปเรื่อยๆ คงเป็นในลักษณะของการแปล+สรุป เพราะจะให้เพื่อนอ่านด้วย ไม่รู้ว่าจะออกมาดีแค่ไหนเหมือนกัน

เราอ้างอิงทั้งหมดมาจาก Facebook Developers ใครสนใจสามารถไปศึกษาเองได้นะ เราเลือกเริ่มศึกษาจาก ส่วนของ Facebook for websites ก่อน เพราะเป็นส่วนที่เราต้องใช้ ซึ่งจริงๆ ตรง Getting Start แล้วมันจะมีอยู่ 3 ส่วนด้วยกัน ก็คือ

แต่ละแบบก็มีจุดประสงค์ต่างกัน Websites (อันที่เลือก) เป็นส่วนของการนำ facebook ไปใช้ในเว็บอื่นๆ เช่นปุ่ม like ต่างๆที่นิยมกันมากๆตาม blog หรือตามแคมเปญเว็บต่างๆ หรือส่วนของ login with facebook account ที่มีหลายๆเว็บใช้กัน เป็นต้น ส่วน mobile applications ก็คงไม่ต้องอธิบาย ชื่อก็บอกอยู่แล้ว ส่วนสุดท้าย Applications on facebook.com ก็คือ การทำ apps บน facebook นั่นเอง

เข้าเรื่องกันเลยดีกว่า เราจะเริ่มที่ facebook for websites ก่อน

Facebook for Websites Introduction

เราสามารถเอาข้อมูลหรือ feature บางอย่างใน facebook ไปใช้บนหน้าเว็บเพื่อเชื่อมต่อกับ facebook ได้ โดยมีอยู่ 3 แนวทางด้วยกันคือ

  • Registration + Login – เราสามารถใช้ปุ่ม login ของ facebook ได้ ซึ่งเราสามารถดึงข้อมูล profile ต่างๆของ user มาใช้แทน ข้อมูล account นั้นๆในเว็บของเรา แน่นอนว่าสะดวกสำหรับ user ที่มี facebook account อยู่แล้ว
  • Engagement – เราสามารถสร้างเครือข่ายของสินค้าได้ ด้วย facebook users ที่มีอยู่เยอะมาก ผ่าน social plug-ins ต่างๆเช่น การใส่ ปุ่ม like หรือ แสดง activity feed ที่จะติดตามการกระทำต่างๆของเครือข่าย โดยการเพิ่มโค้ดบนหน้าเว็บเพียงบรรทัดเดียว และตัว Graph API ที่เป็นตัวช่วยดึงความสัมพันธ์ของ user กับสิ่งต่างๆออกมา (social graph) เช่น เพื่อน, รูปภาพ, tag, event เป็นต้น (สรุป social graph คือข้อมูลความสัมพันธ์ของคนกับคน คนกับภาพ คนกับevent บลา บลา บลา.. เป็นในลักษณะของเครือข่ายที่ซับซ้อน) และนำมาประยุกต์กับเว็บไซต์ของเราได้
  • Growth – เราสามารถโพสข้อความ จากเว็บของเราขึ้น social graph ได้ เพื่อให้เข้าถึงเพื่อนๆของ user นั้นๆได้ง่ายขึ้น เช่น ปุ่ม like ทำให้คนสามารถแบ่งปันข้อมูลของเว็บไปยังเพื่อนๆ ด้วยกันกดแค่คลิ้กเดียว ตรงจุดนี้เราสามารถพัฒนาได้ผ่าน Open Graph protocol

Social Plugin

social plugin ถ้าให้เข้าใจง่ายๆก็คือ widget ตัวหนึ่งที่เราสามารถเอาไปแปะบน blog หรือเว็บของเราได้ง่ายๆ ด้วยการใส่โค้ด html เข้าไปแค่บรรทัดหรือ สองบรรทัด โดยทุกคนที่อยู่ในระบบของ facebook สามารถใช้งานได้ แม้ว่าเค้าจะไม่ได้เป็นสมาชิกของเว็บของเว็บที่เอา social plugin ไปแปะก็ตาม

ปุ่ม like น่าจะเป็น social plugin ที่ได้รับความนิยมมากที่สุดอันหนึ่ง มันแสดงรูปของเพื่อนของเรา ที่กด like หน้าเดียวกันนี้ด้วย ยังมี social plugin อื่นๆอีก เช่น activity feed ที่จะแสดง feed ของ comments หรือ like ของเพื่อนๆของเราต่อหน้าเว็บของเรา หรือ recommendations plugin ที่สามารถใส่หน้า page ที่เราแนะนำแสดงบนหน้าเว็บได้

Code ของ Social Plugin จะมี 2 แบบ แบบแรกคือเป็น iframe แบบนี้ข้อดีคือสามารถใช้ได้ในทุกๆเว็บ แต่จะถูก fixed ขนาด แบบที่ 2 คือ XFBML ก็คือ XML ที่ทาง facebook พัฒนาขึ้น โดยใช้ JavaScript SDK แบบนี้เราต้อง support JavaScript SDK ด้วย ซึ่งข้อดีของมันคือ มันปรับแต่งได้ง่ายกว่า iframe การอัพเดทข้อมูล ก็จะ real-time มากกว่า

ตัวอย่างโค้ด iframe

<iframe src="http://www.facebook.com/widgets/activity.php?site=example.com"/>

ตัวอย่างโค้ด XFBML

<fb:activity-feed site="example.com"/>

Single Sign-on

เราสามารถให้ user เข้าระบบโดยเชื่อมกับ facebook ได้ ซึ่งเราสามารถเข้าถึง profile ของ user บน facebook ได้ นานจนกว่า user คนนั้นจะ logout ออกจาก facebook  ซึ่งในส่วนของการ authenticate นั่น facebook ใช้ OAuth 2.0 protocol ในการตรวจเช็ค อ่านรายละเอียดเพิ่มได้ที่นี่ >> authentication guide

ระบบ single sign-on ตัว JavaScript SDK จะช่วยตรวจเช็คสถานการล็อคอินของ user ไว้ ทำให้ user นั้นไม่จำเป็นต้องคลิ้กปุ่ม login กับ facebook หลายๆรอบ เช่น นาย A เคย login กับเว็บเรามาก่อน แต่ browser ที่ นาย A เปิดตอนนี้ ไม่ได้เก็บ cookies ไว้ ตัว JavaScript SDK จะเข้าไปตรวจสอบสถานะ และ login account ของนาย A ให้อัตโนมัติ ทำให้นาย A ไม่จำเป็นต้องคลิ้กปุ่ม login หลายๆรอบ

การจะใช้ JavaScript SDK ให้เราไปลงทะเบียน apps ที่นี่ >> http://developers.facebook.com/setup แล้วจะได้ App ID มาใช้ เราสามารถใช้ 1 ID สำหรับทุกๆ apps ในเว็บโดเมนนั้นๆ และเมื่อเราลงทะเบียนเรียบร้อย ที่ footer ของเว็บ เราต้องเพิ่มโค้ดข้างล่างนี้ลงไปด้วย

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
  FB.Event.subscribe('auth.sessionChange', function(response) {
    if (response.session) {
      // A user has logged in, and a new cookie has been saved
    } else {
      // The user has logged out, and the cookie has been cleared
    }
  });
</script>

ตัวฟังก์ชั่น auth.sessionChange จะ callback อัตโนมัติ เมื่อ user login หรือ logout จากเว็บไซต์เรา ซึ่งเราสามารถใส่ปุ่ม login ได้ด้วยการเรียก FB.login JavaScript method หรือใช้ปุ่มแบบที่ facebook ให้มา โดยใช้ <fb:login-button> tag ตามตัวอย่าง

<fb:login-button></fb:login-button>

ตัวอย่างปุ่ม

แล้วหลังจากที่ login แล้ว เราจะดึงค่า profile ของ user ได้อย่างไร? facebook มี FB.api method ซึ่งเป็น JavaScript มาให้ใช้ เพื่อ fecth ข้อมูลของ user มาใช้ได้ แต่ยังจำเป็นต้อง coding ในฝั่ง server side ด้วย ซึ่งก็คือ php ทาง facebook ก็มีโค้ดตัวอย่าง มาให้ก๊อปปี้ใช้กันง่ายๆ ซึ่งจะดึงค่าออกมาจาก cookie ชื่อ fbs_APP_ID ซึ่งจะเก็บข้อมูลของ user ทั้งหมด ที่ได้จากการ fetch data ด้วย JavaScript มาลองดูโค้ดตัวอย่างทั้งหมดกัน ซึ่งปุ่ม login จะแสดงให้เห็นเฉพาะ user ที่ยังไม่ได้ login facebook เท่านั้น

<?php
define('FACEBOOK_APP_ID', 'your application id');
define('FACEBOOK_SECRET', 'your application secret');

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">
  <body>
    <?php if ($cookie) { ?>
      Your user ID is <?= $cookie['uid'] ?>
    <?php } else { ?>
      <fb:login-button></fb:login-button>
    <?php } ?>

    <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>
  </body>
</html>

Cookie ที่ได้จาก API จะมี access_token ติดมาด้วย นอกเหนือจาก uid ตัว access_token นี้เสมือนกุญแจในการเรียกใช้ Graph API เพื่อที่จะดึง content มาใช้งาน ตัวอย่างโค้ดด้านล่างคือ การที่ PHP fetches ข้อมูลของ user ออกมา

$user = json_decode(file_get_contents(
    'https://graph.facebook.com/me?access_token=' .
    $cookie['access_token']))->id;

Account Registering Data

จากที่รู้แล้วว่าเราสามารถเข้าถึงข้อมูลของ User ได้ผ่าน Graph API การสมัครสมาชิกเว็บไซต์ผ่าน facebook account จะช่วยให้ user สมัครสมาชิกได้ง่ายขึ้น เพราะไม่จำเป็นต้องกรอกข้อมูลเพิ่มเติม email ที่ได้จาก facebook ก็เป็น email ที่ถูกตรวจสอบมาแล้ว ว่ามีอยู่จริงๆ ซึ่งไม่จำเป็นต้องมา verify กันอีก (สะดวกขึ้นนั่นเอง)

มีข้อมูลบางส่วนที่ไม่เปิดเผย ทีจำเป็นต้องใช้ในการสมัครสมาชิก เราจำเป็นต้องขออนุญาติเพื่อเข้าถึงข้อมูลนั้นๆก่อน (extended permissions) ในการ login ครั้งแรก สำหรับรายละเอียดอื่นๆสามารถหาได้ใน authentication guide

ตัวอย่าง การขอข้อมูล email address และ วันเกิด ในการ login ให้เราใช้ perms argument ใน fb:login-button tag เพื่อขออนุญาติ

<fb:login-button perms="email,user_birthday"></fb:login-button>

โค้ดนี้จะเรียกหน้าต่าง Request for Permission ขึนมา และเมื่อ User กดอนุญาติแล้ว เราจะสามารถดึงข้อมูลอื่นๆออกมาได้อีก เช่น

$user = json_decode(file_get_contents(
    'https://graph.facebook.com/me?access_token=' .
    $cookie['access_token']))->me;
register_user($user->id, $user->email, $user->name, $user->username,
              $user->birthday_date);

เราสามารถดึงรูป Profile’s picture มาได้จาก URL

http://graph.facebook.com/UID/picture

ตัวอย่างเช่น url รูปของ Mark Zuckerberg >>  http://graph.facebook.com/4/picture URL นี้จะแสดงภาพ Profile ล่าสุดของ User นั้นเสมอ

Server-side Personalization

เราสามารถดึงข้อมูลใน social graph เช่น คอมเม้นต่างๆ มาใส่เว็บของเราได้มากมายหลายแบบ ซึ่งหลักๆจะมีโครงประมาณนี้

// Fetch the user's friends
$friends = json_decode(file_get_contents(
    'https://graph.facebook.com/me/friends?access_token=' .
    $cookie['access_token']), true);
$friend_ids = array_keys($friends);

// Fetch all the content posted by this user's friends
$result = mysql_query('SELECT * FROM content WHERE uid IN (' .
                      implode($friend_ids, ',') . ')');
$friend_content = array();
while ($row = mysql_fetch_assoc($result)) {
  $friend_content[] = $row;
}

รายละเอียดอื่นๆอ่านเพิ่มใน Graph API หรือเข้าหน้า Platform showcase เพื่อดูตัวอย่างเว็บที่ใช้ facebook API ในแบบต่างๆ

Analytics

เราสามารถดูสถิติของ apps ที่เราพัฒนาขึ้นได้ผ่าน Insights.

Insights รองรับการเก็บสถิติ by application และ by domain และสามารถเก็บข้อมูลการแชร์ content ของเว็บเราที่แชร์บน facebook ทั้งหมด เช่น มีคนก๊อปปี้ลิ้งหน้าเว็บเราไปแชร์ใน wall ตัว insights ก็จะเก็บสถิติตรงนี้ไว้ด้วย

เราสามารถเข้าถึงข้อมูลใน Insights ผ่าน Graph API ได้ เราจึงสามารถปรับแต่งระบบให้เข้ากับความต้องการได้

วันนี้ของจบแค่นี้ก่อนล่ะ