Facebook API แชร์พฤติกรรมของคุณผ่าน Open Graph บน Activity
วิธีการพัฒนาเว็บแอพพลิเคชันให้คุณสามารถบอกเล่า หรือแชร์ Publish Action บน Facebook ในส่วนของ Activity Log ผ่าน Open Graph นั้นไม่ยากครับ
Getting Started With Open Graph
Open Graph นั้นมีการทำงานง่ายๆ คือการบอกเล่าว่า ขณะนี้คุณดูอะไร อ่านอะไร เล่นอะไร ให้เพื่อนๆ ของเราได้เห็น สังเกตง่ายๆ ก็ตรงส่วนของ Activity ด้านขวามือใต้ Friends ของคุณนั้นแหละครับ ซึ่งการกระทำทั้งหลายมันจะปรากฏบน News Feed ของคุณให้เพื่อนๆ ของคุณได้เห็นด้วย
การทำงานนั้นไม่จำเป็นต้องใช้ภาษา PHP มาช่วยครับ แค่ Javascript SDK ก็พอแล้ว โดยหลักการนั้นจะทำผ่านหน้าเว็บที่เป็น Action และ เนื้อหาที่เป็น Object ซึ่งต้องมี Open Graph Protocal ประกอบอยู่ที่ Tag Meta ของ HTML ตัวอย่างเช่น
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
ดังนั้นเว็บไซต์ หรือ แอพพลิเคชันที่ต้องการให้เกิด Activity นั้นต้องมี Open Graph Protocol ใส่ไว้ก่อนครับ ซึ่งหากว่าใส่กันแล้วก็เริ่มได้เลย
ตัวอย่าง หน้าที่ผมใส่ Open Graph Protocol แล้วคือหน้านี้
http://www.daydev.com/2013/inbound-marketing.html
ลอง View Source ดูจะเห็นนะครับอยู่ที่ HTML <HEAD> Tag ครับ
ใน <BODY> ให้ใส่ คำสั่งนี้ไป
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<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> |
ตามด้วย HTML ไฟล์ต่อท้ายก่อนปิด </BODY> ตามนี้ครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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> |
ลองทดสอบนะครับไปที่ DEMO ที่ทำไว้
http://www.daydev.com/demo/og-action/publish_action.html
ลองคลิก ปุ่ม “ทดสอบ Open Graph Activity”
คลิก ปุ่ม “ทดสอบ Open Graph Activity”
ถ้ากดแล้วจะมี Link ปรากฏขึ้นว่า Story created แล้ว สามารถคลิกไปดูได้จะเห็น เหมือนตัวอย่างดังนี้
Activity ได้เกิดขึ้นแล้ว
หรือไปดูที่หน้า Profile เราจะเห็นดังนี้
Facebook Activity ปรากฏที่หน้า Pr
เป็นไงบ้างครับไม่ยากเลยใช่ไหม วิธีการทำ Activity ให้เพื่อนของเราเห็นผ่าน Publish Action ด้วย Facebook Open Graph API
สามารถดาวน์โหลด Source Code ได้ทีนี่ครับ
NO COMMENTS