Ad Code

Tambah FB Comment Box di Posting anda

Mahsul Sejahtera 7:14:00 PM
Nampak cool jugak kalau boleh tambah kotak komen FB di setiap posting anda. Selalu jugak nampak di posting-posting kotak komen FB dan dah lama jugak try tapi selalu failed. Tapi rezeki di bulan Ramadhan ni, saya terjumpa satu posting macam mana nak tambah kotak komen FB di setiap posting anda dan bila saya cuba terus berjaya. Alhamdulillah. So mungkin ada kawan-kawan yang nak cuba tambah kotak komen FB di setiap posting mereka jadi saya kongsikan caranya.

A. Langkah pertama: Anda perlu  create App di Facebook. Caranya:

1. Layari Facebook developers page untuk create app.baru.

2. Create app baru dengan detail blog anda seperti di tunjukkan di bawah.

create a new app in facebook


3. Jangan lupa tulis Facebook app id seperti ditunjukkan di bawah.

find your facebook app id

B. Menambah Comment Box Code di Blogger Template:

4. Sekarang pergi ke  blogger dashboard --> template --> Edit Html (jangan lupa tanda Tick expand widget template option).

5. Cari (Ctrl+F) <html  dan tukar dengan kod di bawah.
<html xmlns:fb='http://www.facebook.com/2008/fbml'

6. Cari  <body> tag dan tambah kod berikut betul-betul dibawahnya (selepasnya).
 
<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;YOUR_APP_ID&#39;,
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to
 access the session
      xfbml  : true  // parse XFBML
    });
  };
    (function() {
    var e = document.createElement(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect
.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).
appendChild(e);
    }());
</script>
 
Nota: Tukar YOUR_APP_ID dengan app id yang anda tulis tadi.

7. sekarang cari </head> dan tambah open graph meta tags ini betul-betul di atasnya.

<meta expr:content='data:blog.pageTitle' property='og:title'/> 
<meta expr:content='data:blog.url' property='og:url'/> 
<meta content='Homestay Kesidang Di Bandar Melaka' property='og:site_name'/> 
<meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/> 
<meta content='YOUR_APP_ID ' property='fb:app_id'/> 
<meta content='http://www.facebook.com/kesidanghomestay' property='fb:admins'/> 
<meta content='article' property='og:type'/>

Nota:
Tukar Homestay Kesidang Di Bandar Melaka dengan nama blog anda.
Tukar YOUR_BLOG_LOGO_IMAGE_LINK dengan url blog logo image anda (atau biarkan sahaja).
Tukar YOUR_APP_ID dengan app id.anda
Tukar http://www.facebook.com/kesidanghomestay dengan Facebook page url. anda.

8. Sekarang cari kod seperti di bawah.
<b:includable id='comment-form' var='post'>
Tambah kod berikut betul-betul di bawahnya.
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='500'/></div></div> </b:if>
Note:: 
  • Anda boleh tukar width 500 dengan width yang anda suka
  • Anda juga boleh tukar color scheme antara light atau dark.

9. Save Template anda.

Kalau nak tengok artikel originalnya di sini:

http://www.bloggertricks.biz/2012/05/add-facebook-comments-box-for-blogger.html


Post a Comment

0 Comments

Rakan pengunjung yang baik hati. Komen anda amat dihargai.