How to Install FB Box Comments Without Remove Blog Box Comments

Written by : Unknown | 10:02:00 AM | 21

♥ ASSALAMUALAIKUM ♥

I dedicate this tutorial to a friend in my Facebook,He has message me in inbox and asking for this code.So for that, I plan to do a tutorial so that others can make too, if they want..

This is how FB Comment will look like

And This is how Blog Comment will look like
For DEMO you can tried under this entry, or any of my blog entry..For those who want to try can follow the step by step as below:

pink01  Login to Blogspot > Click the Layout > Edit HTML > Expand Widget clicks > Click Download Full Template (For Back-up template) is important!

Click Image To Zoom

You May refer to this picture

pink01  Press CTRL + F to help you find the code. Enter the code into the box <div class='comments' id='comments'> Find and press Enter.,then paste code below after the code above just now.

<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='http://2.bp.blogspot.com/-uFjnblDYmQk/TgvzeRCM3QI/AAAAAAAAB7U/Zebl_cpQ4lk/s1600/facebook.png'/>
<fb:comments-count expr:href='data:post.url'/> People Sharing 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='http://1.bp.blogspot.com/-9FmbJGH15sM/Tgvzd04Q-VI/AAAAAAAAB7Q/Lme3FaDgAts/s1600/blogger.png'/> <data:post.numComments/> People Sharing Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='fb-root'/>
   <fb:comments expr:href='data:post.url' num_posts='2' width='500'/>
  </b:if>
 </div>
<div class='comments comments-page' id='blogger-comments-page'>


pink01  Then paste code below before the code </head> (change YOUR_FB_ID to you own ID, to create FB APP ID go here or here for a tutorial create APP ID).



 <script src='http://connect.facebook.net/en_US /all.js#xfbml=1'/>
 <script src='http://code.jquery.com/jquery-latest.js'/>
 <meta content='YOUR_FB_ID' property='fb:admins'/>
 <script type='text/javascript'>
 function commentToggle(selectTab) {
 $(".comments-tab").addClass("inactive-select-tab");
 $(selectTab).removeClass("inactive-select-tab");
 $(".comments-page").hide();
 $(selectTab + "-page").show();
  }
 </script>

pink01 Then find the words /* Comment or /* Comments (the css code) and place the code below.

P/S : For Those Using Old Template Find this code h3.post-title, .comments h4 { And put the CSS code below above it.

 

.comments-page {  background-color: #f2f2f2;}
#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;}



  • You can change the logo and the others according to tastes and your own creativity.


  • Preview .. If you are satisfied, Save And you're DONE..Goodluck!!!

    P/S : Updated 16/08/2011 - Image Add On

    If you have any questions,Don't be hesitate to leave comments and questions below, I will try to help you...
    Sharing The Love :)

    21 comments:

    1. hehee..blurr..*wink*

      saya mmg lemah sgt dan sgt dlm memanipulasi teknologi.. huhu

      ReplyDelete
    2. @Azeanthy Paiman My pleasure dear..dear ndak tanya me awal2..:P

      @~nazaku~ Kenapakah Labu?..hehehe

      @Akue Achik Dear,here I am if you need my help ..:)

      ReplyDelete
    3. ehehe..thanks sis.. :) tp skg rsany xda pa yg sy mahu bg tnjuk d fb lg..all my posts are just full with crap..ehehe

      ReplyDelete
    4. Bookmarked !!.../* comments tak dapat cari, dan tak faham..nak try guna juga,kalau ada masa please help me :) tq

      ReplyDelete
    5. wahhh..cool!! tp sa tida pandai buat ni..uhh. -_-

      ReplyDelete
    6. Nice share cik Pink DIva. Nk try la buat.thx for tutorial. :D

      Cara Pantas Setel Masalah!!!

      ReplyDelete
    7. ahh.. fail la dear... sama problem macam si elih...

      ReplyDelete
    8. @Elih Japahar And @nowriz ..kamu pakai template yang lama ..jadi letak kod di atas sebelum kod dibawah ini.

      h3.post-title, .comments h4 {

      Lau ada error,..send me the error message kat komen box ni..:P

      ReplyDelete
    9. @Bob Merley Thanx Bob..::P

      @Akue Achik ok dear..anytime jew if you want my help ok

      @Yen Its my pleasure to help you Yen..just say it

      @SJB AKA SUE J-B. Ok sue,any error just let me know ..

      @Abe Goreng Your welcome bro ..anyway bro,next time if you want to comment,kindly dont put your link on HTML,,just URL k..sure i'll visit your post...huhu I love my blog..

      ReplyDelete
    10. Oh,ada beza antara template lama dengan template baru ka kak??

      ReplyDelete
    11. @Aki

      iya iyalah dear Aki..susunan pada css ndak sama..:)

      ReplyDelete
    12. wahh..nt klw rs mau bwt sure rujuk tuto ni n bwt..hehe :)
      thanks sbb share..skrg popular ni kan ? :)

      ReplyDelete
    13. hmmmm...i think it's cool when people can comment straight away to my fan page right..because my fan page is so quiet, well, no fans :p ahhaha....thx for the tips! ^^

      ReplyDelete
    14. @Jerul

      Error ape yang keluar kat screen? i need to know that so that I can help you dear Jerul..

      As I can see,your're using new template..put the above code [ Comments CSS] above this /* Comments,just copy and paste this into find box...

      ReplyDelete
    15. tenkiu!! dah jadi dah dengan bimbingan ni...refers 2,3 blog gak nk faham ni...huhu..tp dah berjaya!! heheh....

      ReplyDelete
    16. @♕ Mr.IX ♂ Finally !! ada juga yang berjaya buat..huhuhu..tak sia2 my tutorial ..

      Thanx for shared here your victory bro..:P

      ReplyDelete
    17. Keep up the great work fellow blogger, your challenging work is definitly going to pay off.

      ReplyDelete

    Note : All comments are moderated manually by real humans, so you won't see them appearing immediately.

    For Non-Bloggers
    Please select profile & click "Name/URL" If you do not have any profiles on any those listed. (Leave the URL empty).

    It's harsh to call you Anonymous , So please Leave at least a Name.