Menampilkan Komen facebook dalam tab di blogger

tab facebook commentsPlugin komentar Facebook diblogger, widget ini cukup populer yang digunakan sebagian blogger, sistem komentar dengan facebook ini cukup memberi kemudahan bagi pengunjung blog dalam berkomentar jadi widget ini memungkinkan semua orang untuk berkomentar diblog yang kita miliki sekalipun pengunjung blog bukan seorang blogger.

Live Demo

Pada tutorial ini akan dibahas cara membuat sistem komentar facebook pada blog, sistem komentar facebook ini akan dibuat berdampingan dengan sistem komentar asli bawaan blogger, berikut tutorial membuat sistem komentar facebook di blog.
Sistem komentar facebook
1: Menampilkan komentar facebook diblog
2: Menampilkan komentar blogger + facebook
3: Memaksimalkan sistem komentar facebook untuk meningkatkan lalu lintas blog

Membuat facebook app (Create a Facebook App)

  1. Pergi ke Facebook Developers Page
  2. Masukan judul blog dan URL blog anda
     3.   Klik tombol create app
     4.  Setelah mengetikan kode pemeriksaan anda akn melihat halaman seperti gambar dibawah ini.
       5.   Simpanlah FACEBOOK APP ID dinotepad atau dimanapun yang anda suka karna kode itu akan dibutuhkan nantinya. klik link yang ada disudut kanan atas "Developer Dashboard"
      6.  dan akan muncul jendela baru.
        7.  pilih opsi website dan buat
       8. simpan.

Membuat tab facebook diblogger

Settingan pada komentar blog.
  1. Login ke Blogger > Settings > Comments
  2. Set "Comment Form Placement" pilih tersemat  (Embedded below post)
Langkah selanjutnya:
  1. Go To Blogger > Design > Edit HTML
  2. jangan lupa backup template
  3. Click the "Expand widget templates" box
  4. Cari kode berikut <head>
  5. Copi kode dibawah ini tepat setelahkode diatas.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='Blog LOGO Image Link' property='og:image'/> <meta content='FACEBOOK APP ID' property='fb:app_id'/>

<script src=''/>
    <script src=''/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
      $(selectTab + &quot;-page&quot;).show();
  • Pada kode yang berwarna kuning untuk logo blog, Ganti logo blog dengan link logo blog anda
  • Ganti FACEBOOK APP ID  dengan no yang sudah disimpan pada notepad tadi.
      6.   cari <html and replace it with the following code,
<html xmlns:fb=''
Note: Give a space at the end of the above code.
   7.  Now Search for ]]></b:skin>    and just above it paste the following CSS code,
/*--- Tabbed Facebook Comments By MBT ----*/
.comments-page {  background-color: #f2f2f2; width:450px;}
    #blogger-comments-page {  padding: 0px 5px;  display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}
  • To change the background colour of tabs content area simply edit #f2f2f2
  • To change the width of the comment box container change width:450px;
  8.  Next search for this
<div class='comments' id='comments'>
After the first occurrence of the above available code paste this code:
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src=''/>
<fb:comments-count expr:href='data:post.url'/> Comments </div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src=''/> <data:post.numComments/> Comments </div><div class='clear'/>

    <div class='comments-page' id='fb-comments-page'>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <div id='fb-root'/>
       <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by 
<b><a href='' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>


Note: If the above code gave errors then delete the red highlighted lines from the code above.
  • To change the width of the comment box size change the numeric value width='450' . Keep it equal to the width of the comment box container we set earlier in step#7.
  • To change the footer credits size (i.e. Facebook Comments by blogger Widgets), change this value width:440px
  • Keep a difference of 10 pixels between the comment box size and footer size. For example if you set comment box-size to width='450' then set footer-size to width:440px
  • To change the text inside tabs edit Comments for Facebook Tab   and  Comments for Blogger Tab
      9.   Save your template and you are All Done!
Visit your blog to see it working just fine. :)
Note: If you have activated blogger threaded comments then the Tabs will display only when at least one comment is posted in blogger

Moderate Comments

In order to mark any comment as spam or remove/hide any comment you need to log into your facebook account and then visit this page:
You can moderate all comments at once without visiting every post in your blog and moderating comments individually for every post.

How To allow Other Login Providers

With Facebook Plugin you can choose to accept comments even with Yahoo, Hotmail or AOL. To accept comment from third part providers simply click the Settings link on Facebook comment box inside any of your post and click the checkbox that says "Other login providers"
other login providers
Note: The Settings link or Moderator view will only appear on your new new posts or on posts with less than 2 Facebook comments posted. There fore in order to make a one time settings, simply visit your fresh post and edit it from the facebook tab.


This tabbed commenting system has been enhanced and publicized by MBT blog by using scripts of James. If you wish to share this post with your readers then kindly link back to this post as the only favor for our efforts.

Need Help?

I am sure this post looks a little too techy but its made as easy as possible. If you ran into a trouble then just let me know by posting your query. The next part of this series will teach you how to display facebook and blogger comments count on homepage in a presentable way. Peace and blessings pals! :)

You may like these posts