วิธีนำ Facebook Social Plugins มาติดตั้งบน Blogger

Facebook Social Plugins เป็น Plugins ของ Facebook ที่สามารถเชื่อมโยงกิจกรรมต่าง ๆ ระหว่าง blog ของคุณกับ กิจกรรมบน Facebook ได้ ที่น่าสนใจก็คือ facebook สามารถทำให้เครือข่ายของคุณโตได้เร็วกว่าใช้ช่องทางการทำ blog อย่างเดียว

จะว่าไปแล้ว Facebook Social Plugins ก็คล้ายคลึงกับ Google friend connect เพราะ Plugins หลาย ๆ อย่างก็ทำงานเหมือนกัน เช่นกิจกรรมบน Site หรือ Live Comment เป็นต้น แต่ก็มีบางอย่างก็มีลักษณะโดดเด่นกว่ามาก เช่น Like box plugins เป็นต้น
 
บทความนี้ผมจึงจะเล่าถึงการนำ Facebook Social Plugins รูปแบบต่าง ๆ มาติดตั้งบน Blogger เพื่อเชื่อมโยงกิจกรรมต่าง ๆ  บน Blogger และ Facebook เข้าด้วยกัน

วิธีติดตั้ง Facebook Social Plugins บน Blogger

เริ่มต้นให้คุณ Log in ที่ Facebook.com เสียก่อน  >> จากนั้นให้เข้าไปที่

 http://developers.facebook.com/plugins

ขั้นที่ 1 เลือก Social Plugins ที่ต้องการ
ผมขอกล่าวถึง Social plugins แต่ละอย่างคร่าว ๆ ดังนี้

1.1 Like Button
plugins นี้เหมาะสำหรับติดตั้งในบทความ หรือ gadget ในหน้าแรกของบล็อก หรือจะติดตั้งที่หัวข้อของบทความก็ได้ โดยมีจุดประสงค์เพื่อให้ผู้อ่านบทความหรือบล็อกของคุณแสดงออกว่าชอบบทความของคุณได้ง่ายขึ้น เพียงแค่ click ปุ่มนี้เท่านั้น
วิธีติดตั้ง ทำได้คล้ายกับวิธีในบทความ 4-share-count-button-for-blogger หรือ Digg Button หลัง Title ของบทความ
1.2 Activity Feed
เป็น plugins ที่แสดงว่าเพื่อนบน facebook ของคุณมีกิจกรรมใดบนบล็อกของคุณบ้าง เช่นชอบบทความใด หรือได้แนะนำบทความใด เป็นต้น
วิธีติดตั้ง จะกล่าวถึงในขั้นที่ 2 และ 3
1.3 Recommendations
เป็น plugins ที่บอกถึงบทความใด บนบล็อกของคุณที่ได้ถูกแนะนำไปยัง Facebook แล้ว
วิธีติดตั้ง จะกล่าวถึงในขั้นที่ 2 และ 3
1.4 Like Box
ก่อนหน้านี้ plugins ตัวนี้มีชื่อว่า Fan box แต่ตอนนี้ได้เปลี่ยนมาเป็น Like Box ซึ่งมีลักษณะคล้ายคลึงกับของเก่าแต่ พิเศษกว่าเดิมตรงที่มี ส่วน Show stream ที่แสดงการ Update ต่าง ๆ บนหน้านั้นๆ ด้วย 
วิธีติดตั้ง อ่านได้จากบทความ วิธี สร้าง Facebook Fan box (Like Box) บน blogger
1.5 Login with Faces
plugins นี้ติดตั้งไว้บน Blogger หรือบล็อกของคุณเพื่อให้ผู้เยี่ยมชมสามารถ Log in เข้า Facebook ผ่านบล็อกของคุณได้ และจะแสดงหน้าของผู้เยี่ยมชมที่ Log in ผ่านบล็อกของคุณด้วย
วิธีติดตั้ง จะกล่าวถึงในขั้นที่ 2 และ 3
1.6 Facepile
plugins นี้เหมือนสมุดเยี่ยม คือจะแสดงรูป ภาพโปรไฟล์ของเพื่อนของผู้ใช้ที่ได้ลงนามแล้วสำหรับเว็บไซต์ของคุณ
วิธีติดตั้ง จะกล่าวถึงในขั้นที่ 2 และ 3
1.7 Comments
plugins นี้ สามารถให้ผู้ใช้ facebook แสดง Comment สดๆ บน Blog ของคุณได้ เทียบได้กับกล่อง Chat box ซึ่งเป็นช่องทางการสื่อสารที่ดีบนระหว่างคุณกับผู้เยี่ยมชมหรือสมาชิกของบล็อก เลยทีเดียว
วิธีติดตั้ง จะกล่าวถึงในขั้นที่ 2 และ 3
1.8 Live Stream
plugins นี้อธิบายง่าย ๆ ก็เหมือนการใช้งาน Twitter นั่นเองครับ
วิธีติดตั้ง จะกล่าวถึงในขั้นที่ 2 และ 3

 

ขั้นที่ 2 การรับโค้ดของ Social Plugins จาก Facebook

ที่จริงแล้วการรับโค้ดของ Social Plugins ที่ต้องการ นั้นทำได้ง่ายมากเพียงแค่ ตั้งค่าและ Click ปุ่ม Get code เท่านั้น
อย่างเช่นรูปที่เห็นอยู่ด้านล่างนี้ผมทดลองรับโค้ดของ Activity Feed

 

โค้ดที่สามารถนำไปใช้มี 2 รูปแบบคือแบบ iframe กับแบบ XFBML

กรณีที่ 1 ถ้าหาก plugin ใด มีโค้ด แบบ iframe คุณสามารถนำโค้ดในรูปแบบ iframe ไปติดตั้งบน Blogger ได้เลย

ตัวอย่างโค้ด iframe

<iframe src=”http://www.facebook.com/plugins/activity.php?site=www.example.com&amp;width=300&amp;height

=300&amp;header=true&amp;colorscheme=light&amp

;font&amp;border_color” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:300px; height:300px;” allowTransparency=”true”></iframe>

 

กรณีที่ 2 ถ้า plugin นั้นมีเพียงโค้ดชนิด XFBML เท่านั้น

คุณจะต้องนำโค้ดที่ได้จากการสร้างโค้ดมาใช่ร่วมกับโค้ด JavaScript SDK ด้านล่างนี้ด้วย

<div id=”fb-root”></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: ‘your app id’, status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement(‘script’); e.async = true;
    e.src = document.location.protocol +
      ‘//connect.facebook.net/en_US/all.js’;
    document.getElementById(‘fb-root’).appendChild(e);
  }());
</script>
จะเห็นว่า JavaScript SDK ยังขาดส่วนของ your app id ดังนั้นในขั้นถัดมาให้เข้าไปสร้าง App ใน Facebook เพื่อนำมาทำให้ JavaScript SDK ทำงานได้สมบูรณ์ โดยทำตามขั้นตอนดังนี้

2.2.1 เข้าไปที่ลิงค์ด้านล่าง และกรอกผู้ใช้ URL ของ Blog ของคุณ 
http://developers.facebook.com/setup/


 2.2.2  Click ที่ปุ่ม Create application เพื่อรับ app id แล้วคัดลอก app id มาใช้กับ JavaScript SDK 

จากรูปด้านบน app id ที่ผมได้คือ 128666947144392 ดังนั้น JavaScript SDK จะถูกเปลี่ยนเป็น

 

<div id=”fb-root”></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: ‘128666947144392‘, status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement(‘script’); e.async = true;
    e.src = document.location.protocol +
      ‘//connect.facebook.net/en_US/all.js’;
    document.getElementById(‘fb-root’).appendChild(e);
  }());
</script>

 

 
2.2.3 ในที่นี้ผมขอยกตัวอย่างการสร้างโค้ด Plugin  Comments ส่วนการสร้างโค้ด Plugin อื่น ๆ ก็ทำในทำนองเดียวกัน
 
การรับโค้ด plugin  Comments ทำได้โดยการคัดลอก id ของหน้าเสียก่อน

จากนั้นไปที่ URL ด้านล่าง และตั้งค่า

http://developers.facebook.com/docs/reference/plugins/comments

ขั้นสุดท้ายคือการรับโค้ดทำโดย Click ที่ปุ่ม Get Code และคัดลอก

 

เมื่อคัดลอกโค้ดแล้วนำไปรวมกับโค้ด JavaScript SDK ที่ได้กล่าวมาแล้ว
ดังนั้นโดยสรุปโค้ดสำหรับ Comments Plugin ที่ได้ในตัวอย่างนี้และนำไปใช้ติดตั้งคือ

 

<div id=”fb-root”></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: ‘128666947144392‘, status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement(‘script’); e.async = true;
    e.src = document.location.protocol +
      ‘//connect.facebook.net/en_US/all.js’;
    document.getElementById(‘fb-root’).appendChild(e);
  }());
</script>
<fb:comments xid=”266000104594″ numposts=”2″ width=”280″></fb:comments>

 

ขั้นที่ 3 การนำโค้ดของ Social Plugins มาติดตั้งบน Blogger

การติดตั้งในกรณีที่เป็น Plugin ทุกชนิดลงใน Blogger สามารถทำได้โดย เพิ่ม Gadget ชนิด HTML/จาวาสคริปต์ แล้ววางโค้ดที่ได้จากขั้นที่ 2 ลงไป และบันทึก

 

ตัวอย่างผลลัพธ์ที่ได้

 

 ขอบคุณ : http://www.hackublog.com

Related posts:

บทความที่เกี่ยวข้อง

  • No Related Post
This entry was posted in ความรู้ทั่วไปในเรื่อง IT and tagged , , , . Bookmark the permalink.