» » How to Install FB Box Comments Without Remove Blog Box Comments

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 :)
    Labels:

    21 comments:

    1. ~nazaku~8/14/2011 11:55 AM

      @Azeanthy Paiman

      huhuhuhu

      ReplyDelete
    2. Akue Achik8/14/2011 12:05 PM

      hehee..blurr..*wink*

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

      ReplyDelete
    3. Unknown8/14/2011 12:09 PM

      @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
    4. Bob Merley8/14/2011 12:47 PM

      nice lah tutorial dia.

      ReplyDelete
    5. Akue Achik8/14/2011 12:52 PM

      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
    6. Elih Japahar8/14/2011 2:33 PM

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

      ReplyDelete
    7. Yen8/14/2011 5:24 PM

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

      ReplyDelete
    8. SJB aka SUELYN J-B.8/15/2011 9:03 AM

      Nanti i cuba buat :).

      ReplyDelete
    9. Abe Goreng8/15/2011 10:15 AM

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

      Cara Pantas Setel Masalah!!!

      ReplyDelete
    10. Unknown8/15/2011 12:36 PM

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

      ReplyDelete
    11. Unknown8/15/2011 1:31 PM

      @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
    12. Unknown8/15/2011 1:38 PM

      @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
    13. Aki8/15/2011 2:27 PM

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

      ReplyDelete
    14. Unknown8/15/2011 3:15 PM

      @Aki

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

      ReplyDelete
    15. Echa8/15/2011 7:48 PM

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

      ReplyDelete
    16. aemynadira8/15/2011 7:49 PM

      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
    17. Jerul8/16/2011 8:26 AM

      x dapat buat punn

      ReplyDelete
    18. Unknown8/16/2011 9:44 AM

      @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
    19. Anonymous8/17/2011 1:40 PM

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

      ReplyDelete
    20. Unknown8/17/2011 3:04 PM

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

      Thanx for shared here your victory bro..:P

      ReplyDelete
    21. Anonymous5/31/2012 10:04 PM

      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.

     
    Precious Pinkest | Designed by Nheng| Author by Nheng :)