Applications and Tools Developer Facebook Developer HTML5 Inbound Marketing Life Style Marketing Strategy Object Oriented Technology Programming Language Social Media Social Media Marketing Social Network

Facebook API แชร์พฤติกรรมของคุณผ่าน Open Graph บน Activity

Banyapon Poolsawasd March 15, 2013

0 8 Less than a minute

วิธีการพัฒนาเว็บแอพพลิเคชันให้คุณสามารถบอกเล่า หรือแชร์ Publish Action บน Facebook ในส่วนของ Activity Log ผ่าน Open Graph นั้นไม่ยากครับ

Open Graph นั้นมีการทำงานง่ายๆ คือการบอกเล่าว่า ขณะนี้คุณดูอะไร อ่านอะไร เล่นอะไร ให้เพื่อนๆ ของเราได้เห็น สังเกตง่ายๆ ก็ตรงส่วนของ Activity ด้านขวามือใต้ Friends ของคุณนั้นแหละครับ ซึ่งการกระทำทั้งหลายมันจะปรากฏบน News Feed ของคุณให้เพื่อนๆ ของคุณได้เห็นด้วย

การทำงานนั้นไม่จำเป็นต้องใช้ภาษา PHP มาช่วยครับ แค่ Javascript SDK ก็พอแล้ว โดยหลักการนั้นจะทำผ่านหน้าเว็บที่เป็น Action และ เนื้อหาที่เป็น Object ซึ่งต้องมี Open Graph Protocal ประกอบอยู่ที่ Tag Meta ของ HTML ตัวอย่างเช่น

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock"/>
    <meta property="og:type" content="movie"/>
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
    <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
    <meta property="og:site_name" content="IMDb"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description"
          content="ใส่ content ของคุณ"/>
    ...
  </head>
  ...
</html>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:og="http://ogp.me/ns#"

xmlns:fb="https://www.facebook.com/2008/fbml">

<head>

content="ใส่ content ของคุณ"/>

...

</head>

...

</html>

ดังนั้นเว็บไซต์ หรือ แอพพลิเคชันที่ต้องการให้เกิด Activity นั้นต้องมี Open Graph Protocol ใส่ไว้ก่อนครับ ซึ่งหากว่าใส่กันแล้วก็เริ่มได้เลย
ตัวอย่าง หน้าที่ผมใส่ Open Graph Protocol แล้วคือหน้านี้

http://www.daydev.com/2013/inbound-marketing.html

ลอง View Source ดูจะเห็นนะครับอยู่ที่ HTML <HEAD> Tag ครับ

ใน <BODY> ให้ใส่ คำสั่งนี้ไป

<div id="fb-root"></div>
<script type="text/javascript">

  var fbAppId = 'ใส่ APP ID';
  var objectToLike = 'http://www.daydev.com/2013/inbound-marketing.html';

  if (fbAppId === ''ใส่ APP ID') {
   // alert('เชือมต่อสำเร็จ.');
  }

  window.fbAsyncInit = function() {
    FB.init({
      appId      : fbAppId,        
      // App ID
      status     : true,           
      // check login status
      cookie     : true,           
      // enable cookies to allow the server to access the session
      xfbml      : true            
     // parse page for xfbml or html5 social plugins like login button below
    });

  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));


  function postLike() {
    FB.api(
       'https://graph.facebook.com/me/og.likes',
       'post',
       { object: objectToLike,
         privacy: {'value': 'SELF'} },
       function(response) {
         if (!response) {
           alert('Error occurred.');
         } else if (response.error) {
           document.getElementById('result').innerHTML = 'Error: ' + response.error.message;
         } else {
           document.getElementById('result').innerHTML =
             '<a href=\"https://www.facebook.com/me/activity/' + response.id + '\">' +
             'Story created.  ID is ' + response.id + '</a>';
         }
       }
    );
  }
</script>

var fbAppId = 'ใส่ APP ID';

var objectToLike = 'http://www.daydev.com/2013/inbound-marketing.html';

if (fbAppId === ''ใส่ APP ID') {

// alert('เชือมต่อสำเร็จ.');

}

window.fbAsyncInit = function() {

FB.init({

appId : fbAppId,

// App ID

status : true,

// check login status

cookie : true,

// enable cookies to allow the server to access the session

xfbml : true

// parse page for xfbml or html5 social plugins like login button below

});

};

// Load the SDK Asynchronously

(function(d){

var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];

if (d.getElementById(id)) {return;}

js = d.createElement('script'); js.id = id; js.async = true;

js.src = "//connect.facebook.net/en_US/all.js";

ref.parentNode.insertBefore(js, ref);

}(document));

function postLike() {

FB.api(

'https://graph.facebook.com/me/og.likes',

'post',

{ object: objectToLike,

privacy: {'value': 'SELF'} },

function(response) {

if (!response) {

alert('Error occurred.');

} else if (response.error) {

document.getElementById('result').innerHTML = 'Error: ' + response.error.message;

} else {

document.getElementById('result').innerHTML =

'<a href=\"https://www.facebook.com/me/activity/' + response.id + '\">' +

'Story created. ID is ' + response.id + '</a>';

}

);

}

</script>

ตามด้วย HTML ไฟล์ต่อท้ายก่อนปิด </BODY> ตามนี้ครับ

<div
  class="fb-login-button"
  data-show-faces="true"
  data-width="200"
  data-max-rows="1"
  data-scope="publish_actions">
</div>

<div>
ทดสอบการใช้งาน Open Graph APO ส่วนของ
<a href="https://developers.facebook.com/docs/reference/ogaction/og.likes"> 
og.likes
</a> API. เพื่อเป็นการบอกว่าคุณชอบ  Article ของ Link บทความ 
<a href="http://www.daydev.com/2013/inbound-marketing.html">
Inbound Marketing ปรับกลยุทธ์ดึงผู้บริโภคเข้าหาแบรนด์
</a> ครับ
</div>

<div>
<input type="button" value="ทดสอบ Open Graph Activity" onclick="postLike();">
</div>

<div id="result"></div>

<div

class="fb-login-button"

data-show-faces="true"

data-width="200"

data-max-rows="1"

data-scope="publish_actions">

</div>

<div>

ทดสอบการใช้งาน Open Graph APO ส่วนของ

og.likes

</a> API. เพื่อเป็นการบอกว่าคุณชอบ Article ของ Link บทความ

Inbound Marketing ปรับกลยุทธ์ดึงผู้บริโภคเข้าหาแบรนด์

</a> ครับ

</div>

<div>

</div>

ลองทดสอบนะครับไปที่ DEMO ที่ทำไว้

http://www.daydev.com/demo/og-action/publish_action.html

ลองคลิก ปุ่ม “ทดสอบ Open Graph Activity”

ถ้ากดแล้วจะมี Link ปรากฏขึ้นว่า Story created แล้ว สามารถคลิกไปดูได้จะเห็น เหมือนตัวอย่างดังนี้

หรือไปดูที่หน้า Profile เราจะเห็นดังนี้

เป็นไงบ้างครับไม่ยากเลยใช่ไหม วิธีการทำ Activity ให้เพื่อนของเราเห็นผ่าน Publish Action ด้วย Facebook Open Graph API
สามารถดาวน์โหลด Source Code ได้ทีนี่ครับ

Publish a Story from Facebook Javascript SDK