สำหรับนักพัฒนาที่ยังสนใจในบริการใหม่ของเจ้า และได้เคยทำหน้า Profile ของตนเองให้กลายเป็น Facebook Timeline ไปแล้วอีกทั้งยังต้่องการเล่นตัวชุดพัฒนา Open Graph อยู่นั้นทางเราก็มีลูกเล่นใหม่ที่เรียกว่าปุ่ม “Add To Timeline” มาแต่ไม่ได้เอามาจาก Social tools ของ Facebook นะครับ เราต้องเอามาพัฒนาต่อแบบให้ดูสมศักดิ์ศรีหน่อย
ก่อนอื่นเลยคุณต้องไปที่ Create New App ของ Facebook ก่อนที่ URL นี้ครับ https://developers.facebook.com/apps ไปที่มุมขวาบนจะเห็นปุ่มสร้าง Application ใหม่ครับ ให้ไปสร้างขึ้นมา ซึ่งในตัวอย่างนี้ผมสร้างชื่อ Application ว่า “Think Tank” ครับก็กรอกข้อมูลเข้าไปตามปรกติครับ
เช่นเดิมครับเมื่อสร้าง Application ของ Facebook เสร็จแล้วก็ให้เอาค่า App ID และ Secret ID มาใช้ครับ อย่าให้ใครรู้นา… กรอกข้อมูลที่จำเป็นลงไปครับ เช่น App Domain ก็กรอก daydev.com ครับ ของเว็บคุณก็ใช้ชื่อ Domain Name ของคุณนะครับ กรอกค่า URL ที่ Website ด้วยนะครับ
เมื่อกรอกเสร็จแล้วกด Save เลยครับ แล้วตามต่อด้วยขั้นตอนนี้ ผมสร้าง Folder ชื่อ thinktank ขึ้นมาครับ แล้วทำการสร้าง ไฟล์ HTML ขึ้นมาชื่อว่า index.html ครับ
แก้ไข 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=”https://www.daydev.com/thinktank/cover.png” width=”555″/></p>
<p>เว็บไซต์ที่รวบรวมบทความ แนวคิด ด้านนวัตกรรม การพัฒนา และแนวคิดในการ Integrated Service <br/>
ของ Online Marketing ให้เข้ากับ Social Media และ Technology ได้อย่างดีที่สุด</p>
</body>
</html>
ผมเลือกตกแต่งไฟล์ index.html ของผมด้วยไฟล์ภาพ นี้ครับ
ทำการ Upload File และ folder Thinktank ขึ้นไปบน Server ครับแล้วลองรันผลลัพธ์ออกมาดูกันว่าเป็นยังไง ในที่นี้ผมรันที่ URL นี้ครับ https://www.daydev.com/thinktank ก็จะปรากฏดังภาพด้านล่าง
ง่ายนิดเดียวเห็นไหมครับว่า ไม่ยากเลย ส่วนใครที่ขี้เกียจเขียน Code [ประจำ ตลอด…!!!] ก็ไปดาวน์โหลดไฟล์ทั้งหมดที่นี่ครับ https://www.daydev.com/thinktank/thinktank.zip ไว้โอกาสหน้ามา Update วิธีการใหม่ๆ ครับ 🙂
