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

สอนทำบล็อก Facebook-Social-Plugins
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
สอนติดตั้ง facebook widget

ขั้นที่ 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

วิธีทำ blogger และ blogspot   

โค้ดที่สามารถนำไปใช้มี 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/

สอนทำ blogspot


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

 

สร้าง facebook like box 

จากรูปด้านบน 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 ของหน้าเสียก่อน

สอนแต่ง blogspot

จากนั้นไปที่ URL ด้านล่าง และตั้งค่า
http://developers.facebook.com/docs/reference/plugins/comments

สอนสร้างบล็อก และวิธีทำบล็อก


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

สร้าง blogger
เมื่อคัดลอกโค้ดแล้วนำไปรวมกับโค้ด 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 ลงไป และบันทึก

แต่ง blogspot


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





การติดตั้งในตำแหน่งอื่น ๆ ใน templates ก็สามารถทำได้ แต่จะต้องอาศัยความชำนาญในการปรับแก้โค้ด Template ด้วยผมจึงสงวนไว้ให้คนที่ต้องการติดตั้งแบบพิเศษจริง ๆ โดยให้ Comment สอบถามเพิ่มเติมมาอีกที และสุดท้ายหวังว่าบทความนี้คงเป็นประโยชน์กับ Blogger ทุกท่าน และถ้าชอบบทความนี้วานช่วยกัน Submit หรือบอกต่อด้วยนะครับ ขอบคุณครับ

ตอนนี้มีความคิดเห็น : 33 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. กรอกชื่อเว็บเพื่่อขอid บางเว็บใส่ไปแล้วมันขึ้น Invalid url เป็นเพราะอะไรหรอครับ

  1. @ คุณ KINGRPG :
    ผมยังไม่เคยพบกรณีนี้เหมือนกันครับ ลองสังเกตเว็บที่ เกิดกรณี Invalid url ดูครับว่ามีอะไรที่ไม่ตรงกับสิ่งที่กรอกหรือไม่ เช่นลองเปลี่ยน Site name และภาษาดูครับ

  1. เจอละครับ เข้าไปดูในหน้าMy Applications สร้างไว้ตั้งแต่ตอนไหนไม่รู้ ลืมไปเลย

  1. @ คุณ KINGRPG : ขอบคุณมาก ที่แจ้งกลับมาครับ เพราะว่าจะเป็นข้อมูลให้คนอื่น ๆ ทราบด้วย

  1. ทำแล้วมันขึ้นว่า Sorry, a temporary error has occurred. Please try again.

    รบกวนเข้าไปดูให้หน่อยนะคะ pythontip.blogspot.com

  1. @ Desigh : ลองเล่าให้ฟังนิดนึงครับว่าเอาไปติดตั้งตรงไหน โค้ดที่ติดตั้งเป็นยังไง เพื่อวินิจฉัยว่าผิดพลาดตรงไหนครับ
    ถ้าให้ผมตอบเลยก็ตอบได้ในเบื้องต้นว่าโค้ดไม่สมบูรณ์ครับ ลองเปลี่ยนโค้ดที่ติดตั้งใหม่ครับ

  1. ผมจะทำให้ Like Button แสดงทุกๆบทความโดยอัตโนมัติได้มั้ยคับ

    คือว่าผมลอง เปลี่ยน URL จากโค้ดที่ได้มา เป็น data:post.url
    แต่มันกลับเป็น URL เดียวกันไปหมดเลยคับ และก็ไม่รู้ว่า URL นั้นเป็นของที่ไหนอีกด้วยคับ

    สรุป : คือว่าผมอยากติด Like Button ให้กับบทความ แต่ขี้เกรียจไปนั่งทำโค้ด ให้ทุกๆบทความน่ะคับ

  1. @ Admin ลั่นล้า : ใช้โค้ดที่แนะนำในบทความนี้แล้วศึกษาวิธีติดตั้งเพิ่มเติมจากบทความ
    http://www.hackublog.com/2010/04/3-share-count-button-for-blogger.html

  1. ขอบคุณมากเลยนะคับ
    ตั้งแต่รู้จักเว็บพี่ ผมก็เข้ามาทุกวันเลย เหมือนกับติดเลยพี่ ไม่ได้เข้ามาเรียนรู้แล้วใจจะขาด
    ขอให้พี่ Hackublog เขียนบทความดีๆแบบนี้ไปตลอดเลยนะคับ

  1. "การรับโค้ด plugin Comments ทำได้โดยการคัดลอก id ของหน้าเสียก่อน"

    id นี้อยู่ในหน้า facebook เราหรอครับ ทำไมผมหาไม่เจอ ?

  1. ทำ Like Button แสดงทุกๆบทความโดยอัตโนมัติ โดยทำตามวิธี 4 Share Count button for Blogger พอมีคนกด like button มันกลับขึ้นจำนวนเดียวกันในทุกๆบทความที่มีอยู่ในบล๊อคเลยค่ะ ไม่ทราบว่ามันผิดพลาดตรงไหนหรือเปล่าค่ะ รบกวนช่วยแนะนำด้วยนะค่ะ

  1. ไม่ขึ้นครับ
    .....เปิดเข้าไปดูก็มีโค้ดอยู่ครับ

  1. @ user Blogger : สร้าง App id หรือยังครับ

    ถ้ายังลองใช้อันใดอันหนึ่งต่อไปนี้ดู
    123169744386296
    126670070692732
    121449264556469

  1. มีวิธี ลบ คอมเม้น ของ Facebook Social Plugins Comment หรือเปล่า ครับ พอดีอยากได้ ลบ Comment ที่ก่อกวน น่ะครับ

  1. @ รักเธอ : ให้ใส่ ID ของ Page ลงไปที่ plugins ด้วยครับ ถ้าไม่ใส่เราจะลบไม่ได้ครับ

  1. thank สำหรับข้อมูลดี

  1. ขอบคุณสำหรับความรู้ต่างๆครับ

  1. รบกวนด้วยครับผมอยากให้บล๊อกผมเอาคอมเม้นของบล็อกออกแล้วเอา คอมเม้นของ facebook เข้าใส่แทนอ่ะครับ ตอนนี้ผมงมหาตอนที่บล็อกเรียกใช้ คอมเม้นของเขาแก้ ไม่ได้ซักทีรบกวนด้วยนะครับ

    http://xn--12cc9fij3g2fb9ac1b.blogspot.com/ เวปผมครับ

  1. Facebook Social Plugins บน Blogger ต้องเอาไปใช้งานบ้างแล้ว ขอบคุณมากครับสำหรับสิ่งดี ๆ ที่นำมาเผื่อแผ่แก่สังคม

  1. ได้ความรู้มากเลยคับ

  1. ผมสงสัยตรงรายละเอียด Create application อะคับ เเบบว่า ผมกรอกกรายละเอียด เสร็จ จะ Create ปกติจะผ่านไปหน้าที่ เเสดงรายละเอียด ID ที่ว่า เเต่ผม เจอปัญหา มันไม่ไปหน้านั้น อะคับ

    คือว่า ผมใช้ FANPACE ทำการ Create ใช้เพจธรรมดาไม่ได้ เเต่พอกด Create มันฟ้องไห้ใช้ เพจธรรมดา ผมตอบ โอเค จากนั้นไม่มีอะรัย เกิด ขึ้น งง มาก ผมผิดตรงไหน

  1. ของผมขึ้นแบบนี้อะครับตรงXFBML เลยไม่แน่ใจว่าต้องใส่เลขไอดีเราตรงไหน ขอบคุณครับ


    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

  1. มีธีมเว็บหนังบ้างไหมแบบwww.ชนโรง.com ช่วยตอบหน่อยนะ

  1. พี่ครับ ทำไมเฟซบุ๊กของผมมันมีหน้าซ้ำกัน 2 หน้าครับ


    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/th_TH/all.js#xfbml=1&appId=138921066249109";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <div class="fb-like-box" data-href="https://www.facebook.com/pages/%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B9%84%E0%B8%AD%E0%B9%80%E0%B8%94%E0%B8%B5%E0%B8%A2%E0%B8%94%E0%B8%B5%E0%B8%94%E0%B8%B5/309099669143287" data-width="182" data-height="380" data-show-faces="true" data-stream="false" data-header="false"></div>

  1. ขอบคุณ นะ

  1. ชอบมาก ดีจริงๆเลย

  1. ขอบคุณครับ

  1. สินค้าลดน้ำหนักได้คุณภาพ มีรีวิวกว่า1,000คน
    ผิวพรรณ และเรื่องสุขภาพ เห็นผลทันที
    "ให้คำแนะนำและคำปรึกษาก่อนตัดสินใจซื้อ"
    สินค้าทุกตัวมีเลขที่อย. สคบ. GMP.คุ้มครองผู้บริโภคและฮาลาน
    ไม่โยโย่ สะอาด ปลอดภัย และ เห็นผลทันตา คลิกเลยตามเว็บ

    http://www.prettyshape-skin.com/id.php?id=185
    (กรอกข้อมูลด้านซ้ายมือ และจะมีเจ้าหน้าที่ติดต่อกลับ)

  1. อยากได้แบบสไลด์กดไลต์ของเพจเฟสบุ๊ค มาใส่ในเว็บบล๊อกครับ

  1. สวัสดีครับ ผมใส่ facebook comment ลงไปใน blog www.kidsmehome.com
    แต่ว่า ติดปัญหาตรงที่ หากเราเปิด เว็บจาก PC จะไม่เห็น แล้ว เวลา มีคนคอมเมนต์จากมือถือจะมองไม่เห็นครับ คือเหมือนมันแยกกัน ไม่ทราบว่าพอจะมีข้อแนะนำใดบ้างครับ (ผมสังเกต url ของมือถือ ต่อท้ายด้วย ?m=1)
    ขอบคุณล่วงหน้าครับ

  1. คือทำเว็บจากดรีมคะแล้วลองก๊อปโค้ดไปใส่แต่ว่ายังไม่ได้อัพโหลดเว็บเป็น.comมันมีผลทำให้กล่องข้อความไม่แสดงรึป่าวคะ เพราะลองทำแล้วมันไม่โชว์อะไรเลย

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel