การใช้ Facebook Comment กับ Blogger

วันนี้ผมจะมาสอนการใช้ facebook comment กับบล็อกเกอร์กันนะครับ ซึ่งสะดวกกว่าระบบแสดงความคิดเห็นแบบเก่ามากมายครับ

1. ขั้นตอนแรกให้เข้าไปที่ https://developers.facebook.com/apps 

2. ด้านขวาบนไปที่ "+ Create New App"

3. กรอก App name กับ App Name Space เป็นชื่ออะไรก็ได้ครับ ถ้าใช้ได้เป็นสีเขียว แต่ไม่ต้องติ้กช่อง web hosting นะครับ กด continue ได้เลย

4. กรอกรหัสตามที่เห็นนะครับ อาจจะมองยากนิดนึงนะ เว้นวรรคด้วยครับ

4.a) บางครั้งทางเฟสจะให้ยืนยันตนเองผ่านทางโทรศัพท์นะครับ คลิ้กที่โมบายโฟนเลยครับ

 

4.b)ก็เลือกประเทศไทย เลย รหัสประเทศไทยจะเป็น +66 ตรงชองหมายเลยก็ใส่หมายเลขโทรศัพท์เราเลย เช่น 084-8562314 ก็ใส่ไปเลยครับ

                

4.c) แล้วทางเฟสบุ้คจะส่งรหัสมาทาง SMS ก็ให้นำมากรอกให้ครับ อาจจะนานนิดนึง

4.d) ถ้ารหัสถูกต้องก็จะเรียบร้อย ขั้นตอนแรกครับ

5. เราจะเห็นตามด้านล่างเลยครับ

• App Id
• ตรงช่อง "App Domain" ใส่ "blogspot.com". (หากว่าจะใช้กับเว็บส่วนตัวก็ใส่ชื่อเว็บได้เลยครับ)
• ช่อง "Website" ใส่ชื่อบล็อกของตัวเองเลยครับ "http://webassists.blogspot.com"
• เซฟเลยครับ

6. หลังจากนั้นรอซักพักครับ รอให้ระบบอัพเดตก่อนซักครู่

7. หลังจากนั้นนำ APP-ID  you copied มาใส่ในโค๊ดนี้ครับ เตรียมไว้ก่อนครับ

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='fb-root'/>
  <script>
  window.fbAsyncInit = function() {
  FB.init({appId: 'APPIDใส่เลขช่องนี้เลย', 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';
  e.async = true;
  document.getElementById('fb-root').appendChild(e);
  }());
  </script>
  <fb:comments/>
  </b:if>

8. หลังจากนั้นไปที่แม่แบบแล้วเลือก Edit Html เลยครับ

 

9. กดตกลงไปต่อเลยต่อเลยครับ

10. ให้ติ้กช่อง ขยายเทมเพลตวิดเจ็ต

11. จากนั้นกดหาโค๊ด

      <b:if cond='data:post.allowComments'>

ซึ่งคุณอาจจะพบชุดโค้ด

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>

หรือ

<b:includable id='comments' var='post'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>

หรือ

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>

หรือ

<b:includable id='comments' var='post'>
<span id='comments'/>
<div id='comments'>
<b:if cond='data:post.allowComments'>

12. ให้นำโค๊ดที่ใส่เลข App ID ไว้แล้วข้างบนใส่ลงไปเลย ใส่ก่อนหน้า <b:if cond='data:post.allowComments'> นะครับ

ก็จะได้โค๊ดเป็นรูปแบบนี้เลยครับ

 

  <div class='comments' id='comments'>
    <a name='comments'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: &#39;406234959417673&#39;, status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement(&#39;script&#39;); e.async = true;
    e.src = document.location.protocol +
      &#39;//connect.facebook.net/en_US/all.js&#39;;
    document.getElementById(&#39;fb-root&#39;).appendChild(e);
  }());
</script>
<fb:comments numposts='10' width='500'/>
</b:if>
    <b:if cond='data:post.allowComments'>

 

เรียบร้อยแล้วครับ  อย่างไรก็ตามคอมเม้นของเฟสมันจะอยู่บนคอมเม้นของบล๊อกเกอร์ ถ้าใครไม่ชอบให้ไปปิดก่อนได้ครับ

1. ไปที่การตั้งค่า
2. ไปที่โพสและแสดงความคิดเห็น
3. ช่องตำแหน่งการแสดงความคิดเห็น เลือกซ่อนครับ
4. กดเซฟครับ เรียบร้อยแล้ว