PHP

สร้างปุ่ม Add to Timeline บน Facebook ด้วย OpenGraph

สำหรับนักพัฒนาที่ยังสนใจในบริการใหม่ของเจ้า และได้เคยทำหน้า Profile ของตนเองให้กลายเป็น Facebook Timeline ไปแล้วอีกทั้งยังต้่องการเล่นตัวชุดพัฒนา Open Graph อยู่นั้นทางเราก็มีลูกเล่นใหม่ที่เรียกว่าปุ่ม “Add To Timeline” มาแต่ไม่ได้เอามาจาก Social tools ของ Facebook นะครับ เราต้องเอามาพัฒนาต่อแบบให้ดูสมศักดิ์ศรีหน่อย

Facebook OpenGraph

ก่อนอื่นเลยคุณต้องไปที่ Create New App ของ Facebook ก่อนที่ URL นี้ครับ https://developers.facebook.com/apps ไปที่มุมขวาบนจะเห็นปุ่มสร้าง Application ใหม่ครับ ให้ไปสร้างขึ้นมา ซึ่งในตัวอย่างนี้ผมสร้างชื่อ Application ว่า “Think Tank” ครับก็กรอกข้อมูลเข้าไปตามปรกติครับ

ตั้งชื่อ Application Name

เช่นเดิมครับเมื่อสร้าง Application ของ Facebook เสร็จแล้วก็ให้เอาค่า App ID และ Secret ID มาใช้ครับ อย่าให้ใครรู้นา… กรอกข้อมูลที่จำเป็นลงไปครับ เช่น App Domain ก็กรอก daydev.com ครับ ของเว็บคุณก็ใช้ชื่อ Domain Name ของคุณนะครับ กรอกค่า URL ที่ Website ด้วยนะครับ

เอาค่า App ID มาเก็บไว้ใน note pad

เมื่อกรอกเสร็จแล้วกด Save เลยครับ แล้วตามต่อด้วยขั้นตอนนี้ ผมสร้าง Folder ชื่อ thinktank ขึ้นมาครับ แล้วทำการสร้าง ไฟล์ HTML ขึ้นมาชื่อว่า index.html ครับ

สร้างไฟล์ Index.html ขึ้นมาใน Folder ชื่อ Thinktank

แก้ไข Edit ไฟล์ index.html ด้วย Code ด้านล่างครับ

[Code]

<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr” lang=”en-US” xmlns:fb=”https://www.facebook.com/2008/fbml”>

<head><head/>

<body>

<div id=”fb-root”></div>

<script src=”http://connect.facebook.net/en_US/all.js”></script>

<script>

FB.init({appId:’ใส่ค่า App ID ของคุณลงไป’, cookie:true,status:true, xfbml:true, oauth:true});

</script>

<fb:add-to-timeline></fb:add-to-timeline>

<h3><font size=”30″ face=”verdana” color=”grey”> Think Tank</font> </h3>

<p><img title=”Facebook API” src=”http://www.daydev.com/thinktank/cover.png” width=”555″/></p>

<p>เว็บไซต์ที่รวบรวมบทความ แนวคิด ด้านนวัตกรรม การพัฒนา และแนวคิดในการ Integrated Service <br/>

ของ Online Marketing ให้เข้ากับ Social Media และ Technology ได้อย่างดีที่สุด</p>

</body>

</html>

ผมเลือกตกแต่งไฟล์ index.html ของผมด้วยไฟล์ภาพ นี้ครับ

ภาพตกแต่งหน้า index.html ใน folder ชื่อ thinktank

ทำการ Upload File และ folder Thinktank ขึ้นไปบน Server ครับแล้วลองรันผลลัพธ์ออกมาดูกันว่าเป็นยังไง ในที่นี้ผมรันที่ URL นี้ครับ http://www.daydev.com/thinktank ก็จะปรากฏดังภาพด้านล่าง

มีปุ่ม Add to Timeline ที่นี่ครับ

ง่ายนิดเดียวเห็นไหมครับว่า ไม่ยากเลย ส่วนใครที่ขี้เกียจเขียน Code [ประจำ ตลอด…!!!] ก็ไปดาวน์โหลดไฟล์ทั้งหมดที่นี่ครับ http://www.daydev.com/thinktank/thinktank.zip ไว้โอกาสหน้ามา Update วิธีการใหม่ๆ ครับ 🙂

Tags

Banyapon Poolsawasd

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Leave a Reply

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน