ใช้ Facebook Comment กับ Exteen

posted on 04 Mar 2011 06:27 by korstudio in ExteenScript
เมื่อคืนนี้ผมเพิ่งได้ลองเล่น Facebook Comment ตัวใหม่
(อ่านรายละเอียดได้ที่ [Social Plugins] เชื่อมเว็บเรากับ Facebook ด้วยระบบ Comments ใหม่สุดเมพ! ครับ)
แล้วก็พบว่ามันดีมากๆ จนอยากจะเอามาติดใน Exteen ด้วย *30*
 
หน้าตาที่ใส่เสร็จแล้ว
 
 
(หรือจะเลื่อนลงไปดูด้านล่างก็ได้ครับ)
 
 
แต่ทว่า ตัวเว็บ exteen ไม่ได้เปิดให้แก้ HTML ของหน้าบล็อก ดังนั้นเราจะใส่โดยวิธีทั่วไปไม่ได้ครับ
ต้องใช้วิธีแอบอ้อมโลกกัน ไม่ต้องเอาอะไรมาแลกเปลี่ยน เดี๋ยวผมจะนำทางสู่ห้องพิศวงเอง (เอ๊ะ คุ้นๆ)
 
ขั้นตอนแรก - สมัคร Facebook Application
1. ไปที่ หน้าแรก Facebook Comments ก่อน 
2. กดปุ่ม Get Code ไปเลย
 
 
3. กดลิงค์ registering your site
 
 
4. พิมพ์เว็บ exteen ของตัวเองลงไปในช่อง Site URL เช่น http://korstudio.exteen.com/
ต้องมี / ลงท้ายด้วยนะครับ
ช่อง Site Name ก็พิมพ์ชื่อเว็บลงไป เช่น korstudio's Notepad
ช่อง Locale เลือกภาษาตามชอบครับ
 
5. กด Create App ได้เลย
 
6. พิมพ์ตัวอักษรตามที่เห็น แล้วกด Submit
 
7. เสร็จแล้วเราจะได้หน้า Create an App มาครับ
ให้ดูตรงช่อง App ID ให้เราก๊อปรหัส App ID ไว้
 
 
8. ขั้นตอนสร้าง Application ถือว่าเสร็จแล้วครับ
 
 
ขั้นตอนที่ 2 - ใส่โค้ดใน Widget
 
1. เข้าไปที่หน้า Theme > Widgets ใน exteen ครับ
 
 
2. ลาก Custom Code ที่เหลือมาใช้ ถ้าไม่เหลือแล้วให้เลือกซักกล่องนึงครับ แล้วกดปุ่มดินสอ
 
 
3. ขยายให้กว้างๆ แล้วใส่โค้ดนี้ลงไปครับ
 
<script type="text/javascript">
var d = document.getElementById("commentform");
var loc = document.location.href;
d.innerHTML = unescape('%3Cdiv%20id%3D%22fb-root%22%3E%3C/div%3E%3Cfb%3Acomments%20href%3D%22'
+loc+'%22%20num_posts%3D%223%22%20width%3D%22500%22%20migrate%3D%221%22%3E%20%3C/fb%3Acomments%3E')
+d.innerHTML;
</script>
<script>
(function() {
    var e = document.createElement('script');
    e.src = document.location.protocol
             + '//connect.facebook.net/en_US/all.js#appId={YOUR_APP_ID}&xfbml=1';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
 
4. สังเกตตรง 
#appId={YOUR_APP_ID}
ให้แทน {YOUR_APP_ID} ด้วย App ID ที่เราก๊อปไว้
 
5. กด OK แล้วก็ Save เป็นอันเสร็จ
 
 
ลองรีเฟรชหน้าบล็อกดู
จะพบว่ามี Facebook Comment โผล่มาเหนือกล่อง Comment ของ exteen แล้วจ้า *25*
 
เสร็จเรียบร้อยแล้วคร้าบ ^^