• Sci Fi & Fantasy
  • Mystery & Thrillers
  • Teens & YA
  • Horror
  • Humor
  • Romance
  • Erotica
  • Comics & Graphic Novels

How to Add Facebook and Disqus Comment Systems to Blogger in Tabs Using JQuery

48
Ever since I've learned to blog, I've been customizing my blogger comment section a lot of times to get that certain desired look. The look is one thing, choosing what comment system for my blog is quite another. There's facebook comment box and there's the famous disqus commenting system.  So then I thought, why not mash them altogether?
  • For November 2015, I've made a fresher and better tutorial through this link. It showcases step-by-step instructions on the things needed to add for Blogger coding. If you want to understand what are added and how they are added, I suggest for you to head over that tutorial instead.
I've learned a few tricks scouring some tutorials. Trust me, it wasn't that easy like what most would claim especially if you get "little codes" from Github or look up your problem at StackOverflow. You'd come across some problems which are hard to address especially for dummies. Like myself. And now I've finally come up with a sleek design for my blog in a much convenient way to deliver which I'm going to share.

Some tutorials out there will teach you to REPLACE blogger comment section with facebook social plugin or with disqus commenting system. As to integrate the three? Good luck. What makes this tutorial different from other tutorials? Aside from the idea that we won't be replacing our blogger comment section with another, we'll employ a tiny jquery script that will make the tab selection work not just properly but with animation.

I could ask you to just search tutorials that will help you put facebook or disqus comment section to blogger. But then, why don't I just do that part myself?

This post is practically my future reference shall I make any changes (again!) to my comment section.

This tutorial is intended for dummies who don't have much knowledge in coding (or blogger for that matter). So pardon me if I'm going to treat you like a fool.

Here's how it looks when blogger comment tab is activated:


When facebook comment tab is activated (I made 3 test comments to make sure that the comment counter of facebook works.):


When disqus is activated:


Note: You can always change the color of each tab. I also expect you already know how to tweak your blogger template and that you have activated threaded commenting in blogger. Wait, didn't I say this tutorial is for dummies? Ok, scrap that. I'll get to that later.

So here's what you are going to do:

  1. Create a Facebook Application
  2. Register at Disqus for your website
  3. Enable Threaded Comments in blogger (Optional)
  4. Add meta tags in your blogger template (Facebook, Font-Awesome Library from BootStrap and JQuery Source)
  5. Change codes in comments includable section
  6. Apply changes
  7. OPTIONAL: Add Google+ System (so there are now 4 comment systems)


For Facebook Comment System

1. Login to Facebook Developers

2. Click on Apps then click Create New App


3. Fill out the Form then click on Create App



The Display Name could be a few words. The namespace is one word.

4. After submitting, you'll be directed to your App Dashboard. Copy your App ID and save it somewhere. If you have a photographic memory, I mean good memory, you might as well just memorize it.


5. Click on Add Platform then Choose Website.



6. Fill in the details. Basically, you just have to put your website URL in both the Site URL and Mobile Site URL. (I only had mine on Site URL)


Input your own details on the boxes I highlighted. Notice how I added /* to the url? That's to ensure all pages on the website are accounted for. But it wouldn't hurt if you don't add that, just your URL as is. For new bloggers, your URL is something like this: http://DOMAINNAME.blogspot.com *rolls eyes* whatever your domain name is. I know, I know. I expect you have gone like this now:


7. Hit Save Changes.

8. You can moderate your FB APP comments here.

For Disqus Comment System

1. Signup for Disqus (for website) here: Disqus Signup


2. Choose platform: Universal Code


3. You don't have to do anything from hereon. You will be directed to this page: Disqus Universal Code and you'll see the instruction for installing disqus to your site. I got that covered in the next Steps. Basically, you're done! (Just for this part)



4. At this point, make sure you are signed in to your Disqus Account. Disqus Comment count link text can be customized at your
Disqus admin's Settings > General page.

Change everything to this image:


In short, just delete the word Comments in all the Count links.

5. Moderate Disqus Comments here.

Adding Meta Tags

1. Find <head> and add these things below it:
(Note: click on the text area then Ctrl + C)



2. Replace YOUR_FB_ID with your facebook ID and YOUR_FB_APP_ID with the APP ID I told you to memorize earlier. You can choose 2 facebook ID (fbid): your personal fbid and your apps' fbid.

If you have already added a different Jquery pack in your template, then go to this tutorial, How to Use Multiple JQuery on the Same Page to Avoid Conflict. Updated!

Enable Threaded Comments in Blogger

This part is optional, your choice.

1. Go to your blogger home

2. Go to Settings:



3. Click on Post and Comments under Settings. Then toggle Comment Location and choose Embedded:



That's it!

Changes in the blogger template

I already said this tutorial is for dummies, right?

That's because I'm lazy going over the details from hereon. So just bear with me. And by lazy, I don't want to discuss which part inside a section needs to be eliminated and how to replace with another html code. Rather than going through the hassle of changing each of the tiniest detail inside the includable section, I'd rather have you replace the entire includable section with something akin to a single click.

Step 0:
Go to Blogger Home TemplateBackup/RestoreDownload full templateCloseEdit HTML.

Step 1:
Add this CSS BEFORE ]]></b:skin>



Edits:

1. In .blog-comment, change font-family: 'Open Sans Condensed'; to whatever font you like or whatever is available in your blogger site.
2. If the Comment Tabs collapse, in .blog-comment, either you change the font-family or the font-size.
3. The margin under .blogger-comment.selected (margin: 0 0 0 -8px;) is for the sliding effect in JQuery as you select tabs. Change the value of -8px if you don't want the sliding effect (or emphasize the effect) and in effect, change the width under .blog-comment.
4. If you want to change the color of the tabs as you hover, then add this:

Change #EECCE to whatever color.
5. Update! Someone told me that his blog comment section shows an inappropriate blank space that wasn't there before. Do this: In .blog-comment-tabs, you either delete the margin ( margin: 15px 0;) or change the value to 0 auto or 0.

Step 2:
Search for this code: <b:includable id='comments' var='post'>

Because I'm really lazy...


Step 3:
Click on the space beside the number assigned to that line of code to minimize the whole "includable" section.

Note: The numbering on my template differs from yours.


Step 4:
Highlight the whole "includable" section. We are going to replace all of that: from <b:includable id='comments' var='post'> to </b:includable>. Be careful not to exceed other includable sections. In any event shall that includable section collapse, just keep trying from Step 1.


Step 5:
(Be careful!) Delete that includable section and replace with this After highlighting, paste over this code:



If you really want to know what happened, just compare the new includable section from your old template. Besides, instructions are commented in the provided javascript code. More than anything else, that tiny jquery code is the most important part of the tutorial. Without it, you might just as well stick to your old template.

EDIT!

Change the width of facebook-comment-body by changing the value of width='720' to whatever width that is suitable for your blogger site. This occurs in both Steps 5 and 9 so be sure to edit the other one too.

Step 6:
Replace YOUR_DISQUS_SHORTNAME with your disqus shortname. This appeared twice! If you remember from the Install Instruction for the Universal Code of Disqus, I kept the whole codes as pure as possible.

Edits:

1. In fb-comment-box, change width to suit your site.

2. Change this comments h4 'Leave your comment' to whatever heading you want when the comment count is 0.

Step 7:

For those who enabled Threaded Comments, proceed! Otherwise, Click HERE.

Step 8:
Search for this code: <b:includable id='threaded_comments' var='post'>


Step 9:
Highlight the whole includable section as usual and replace with this:



Again, replace 'YOUR_DISQUS_SHORTNAME' with your disqus shortname.

Step 10:

Go back to Step 6 then jump to Step 11.


Hit Save Template.

Step 12:

Complain when something is wrong.

Step 13:

Check out the Comment Section below for reaction.

Done!

OPTIONAL: Add Google+ Comment System
1 From Step 1 from above, edit in CSS the width for .blog-comment from 27.5% to a value of at least 20%. The value is your call. Just play around.
2 Still from Step 1, in the CSS after .disqus-comment.selected, add .gplus-comment.selected {background: #D34836;}
3 From Step 5 from above, use this instead of that:



4 Just like from above, use this in place of Step 9:

48 comments:

  1. Muchas gracias por el post, esto es realmente lo que estaba buscando desde hace semanas que tuve problemas con la caja de comentarios.

    Muchos saludos Liezl Ruiz :D y un fuerte abrazo.

    ReplyDelete
  2. I think I am a little bit stupid.. I can't do this.. :(

    ReplyDelete
  3. Hi there.. How to display Blogger and Facebook comment only? I want to remove Disqus comment tab. Thanks

    ReplyDelete
    Replies
    1. Sorry for the late reply. I've been on vacation for the Halloween.

      First, change the width of .blog-comment from 27.5% to a measure of about 40% or whatever suits your site, just play around this percentage.

      Second, just delete anything that has something to do with disqus. For example these lines that appear in steps 5 & 9:
      Delete the whole element of [can't write the whole thing here since tags aren't allowed in the comment section]:
      1) li class='blog-comment disqus-comment'
      2) div class='commtab' id='blog-comment3'

      Delete
  4. First of all thanks for your excellent job.It works almost perfect.But it doesn't show the number of comment at Disqus Comment. Here is the blog.http://sokrati21.blogspot.ch/2014/02/blog-post_2672.html.
    If you have any idea why , I would be hgappy to hear it. :)

    ReplyDelete
    Replies
    1. Problem solved. I wasn't resister at disqus from the beggining, and when I restirered it took some time for the counter to begun to count. Thanks again

      Delete
    2. You're welcome!

      I'm glad it worked for you. :)

      Delete
  5. Applied to my blog but the facebook comment are blank, is that normal? Also when the tab is clicked the position of the screen always changed, how I change that?

    ReplyDelete
  6. Ok the facebook is fine. It just taking a long time to load. Just need help for screen position always changed when the tab is clicked.

    ReplyDelete
    Replies
    1. "When the tab is clicked" -- Do you mean when facebook tab is clicked? You need to change the width value of facebook comment system.

      1) Look for ---> div id='fb-root'
      2) You will see the assigned value width='720'
      3) Change the value to whatever is suitable for your site (in px)
      4) Remember that this occurred twice so change the other one too.

      Delete
  7. i add fb and blog comments only ! but when i visit my posts the 2 types of comments are shown , i want to make blogger comments is shown (main comments) and fb comment box hidden and when click on the tab the fb comment box is shown and blogger comment box is hidden

    sorry for my bad in En and hope you help me

    ReplyDelete
    Replies
    1. This tutorial exactly does that. Either your internet connection is just too slow or there's some conflict in your javascript code.
      Find all occurrences of this "$jq" (without the apostrophe) from my code (which you might already be using in your template) and add a number at the end. Say, "$jq1" or "$jq2".

      Delete
  8. can u add google + comments. and it will be 4 comments. facebook, google + , blogger and disqus.

    please..
    thanks

    ReplyDelete
    Replies
    1. In update, I added the instructions for adding Google+ comments near the end of the post. But just like what google support said, "Unfortunately, we cannot guarantee the experience with heavily customized templates."

      You can try it out and please give me feedback whether it worked or not. And next time, if you were the one who messaged me via my contact page, put your email address instead of your blog URL so I may be able to reply to you there.

      Delete
  9. Hello Liezl, you're awesome for writing this amazing tutorial(and you're not lazy at all :P )
    Everything is done just as you instructed however I am getting this error while saving my blogger template
    [ See Screenshot :
    [1] https://drive.google.com/file/d/0B4FcEYPLEtlJRU5xbXV4M1RXWlk/view?usp=sharing
    [2] https://drive.google.com/file/d/0B4FcEYPLEtlJdW1NLU5HUnhQYkk/view?usp=sharing ]

    Help me overcome this hurdle please!

    ReplyDelete
  10. Okay I retraced all steps over and over again. I'm still getting this message after I do step5 and save

    "The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements"

    I followed all steps and hit SAVE at STEP11(without saving anywhere in between) in one of my tries. Same result. I just cant get rid of this message.

    What I tried:
    - Searched "#comment" from to ; There was no "#comment" in between.
    - Searched "#comment" in the whole document ; found some results upto line no.1062 .... However id="Blog1" starts from line 1266... so how could that have caused the error?
    - Reverted my Blogger Template and Did all steps exactly, without fail time and again. Just didnt work out for me.
    - No duplicate id for Blog1 ; I checked that

    What I suspect(One or multiple):
    - Somehow my blogger template is not supported? I am using the Simple Template by modifying bits and pieces to my liking. [plz check source if you have time: https://drive.google.com/file/d/0B4FcEYPLEtlJMkk5YmthNmVBMFE/view?usp=sharing ]
    - I am magically missing some step even though its my 5th time with this...
    - My lack of sleep is creating problems
    - I am really very dumb :3

    Enlighten me please!

    ReplyDelete
  11. Finally managed to get this down!!

    First of all, thanks a ton for writing and sharing this article. It seems that blogger doesn't like my html comments like . (And yes, this happened just for your codes. I do this all the time with other codes ; no problem). I think it must have interfered with the javascript (or maybe it made some codes act like comments.. and made them useless..).

    Anyway, my suggestion to people who try this in the future is:
    - DO EXACTLY AS GIVEN IN THE INSTRUCTIONS IN THIS POST, WORD-BY-WORD
    - If it doesn't implement in your blog, you're doing something wrong. This lady is a genius. Don't doubt it :D
    - Strangely enough, highlighting and then pasting the given codes over it WORKS! ... while Highlighting, then hitting delete, and then pasting failed me 6 out of 7 times. Blogger just sucks like that. So you guys do the same ---> Highlight the code and copy over it.

    Thanks again Liezl ; Sorry for bothering you! (This is almost like spam lol! :P )

    ReplyDelete
  12. Lol. Hello again Liezl!!

    Help me out a bit okay?

    This part of the code doesn't seem to work for me. Although it should...


    I can see the the number of comments posted in G+ with this part:


    Problem is :: I CAN'T SEE THE COMMENT BOX ITSELF; Neither on the PAGES or the POSTS (anywhere in my blog).

    I've tried lots of things and reverted my template tons of times. (kinda regretting putting G+ comment tab now lol :P )

    Anyways, since you told that you're not much into Google+ , here is something I've found online. Please refer it if you have to, and hopefully find me a solution.
    [1] http://www.mybloggerbuzz.com/2013/12/use-blogger-and-googleplus-comment-system-together.html
    [2] http://www.bloggerspice.com/2014/12/How-to-add-Blogger-and-Google-plus-Comments-System-Together-With-Toggle.html

    ^ I didn't understandmost of what was being done there. However, I know that the js script for google has to be called. I did that and implemented that. Works well with empty /dummy blog.... can't seem to make it work out with your tabs.

    Here is my blog: http://csitauthority.blogspot.com/p/3rdsem.html
    You will notice that Google Plus Comment Count is working... but the comment box itself is nowhere to be seen. Can you help me fix this? Thanks a ton in advance.

    ReplyDelete
  13. Sorry for earlier... code got interpreted as comment... and disappeared... lol.

    This part of the code doesn't seem to work for me. Although it should...

    <div class='commtab' id='blog-comment4'>
    <script src='https://apis.google.com/js/plusone.js'/>
    <div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='560' expr:data-href='data:post.url'/>
    </div>

    I can see the the number of comments posted in G+ with this part:

    <li class='blog-comment gplus-comment'><span class='comment-count'><div class='g-commentcount' expr:data-href='data:post.canonicalUrl'/></span><i class='fa fa-google-plus commenticon'/>Google+ Comment</li>

    Problem is :: I CAN'T SEE THE COMMENT BOX ITSELF; Neither on the PAGES or the POSTS (anywhere in my blog).

    Please check my blog and suggest how I should fix this: http://csitauthority.blogspot.com/p/3rdsem.html
    You will notice that Google Plus Comment Count is working... but the comment box itself is nowhere to be seen.

    ReplyDelete
    Replies
    1. I've already fixed it! It should be working now. This is what I changed, from:

      <div class='cmt_iframe_holder'
      expr:data-href='data:post.canonicalUrl'
      expr:data-viewtype='data:post.viewType'/>

      to:

      <div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='600' expr:data-href='data:post.canonicalUrl'/>

      Delete
  14. Thanks a ton Liezl. It worked like a charm. You have been very helpful. Your blog is very helpful. You're great!! Thanks again!

    ReplyDelete
    Replies
    1. You're welcome. I'm glad it worked for you.

      Delete
  15. Awesome !! Thanks... It worked for me !!!

    ReplyDelete
  16. Thanks for this...can you share with us the left floating share buttons you are using on web version.

    ReplyDelete
    Replies
    1. Just added the Comment System but the Title which shows comment count, comment icon and comment name doesnot shows on a line.
      and I want it on a single line. How do I fix this demo at http://techblogng.com

      Delete
  17. i have the same problem as Lance Elot.

    "The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements."

    i didn't find any #comment in the code so i'm not sure what the problem is and how to solve it...

    ReplyDelete
    Replies
    1. I think what you're trying to do is edit things manually. You simply have to follow Step 4: Highlight the whole "includable" section and paste over the codes I provided in Step 5.

      If you can't follow that, then there's nothing I can do for you. Lance Elot learned his mistakes and he just followed the steps to get it done.

      Delete
  18. hi! just realized that blogger comments are not working. when someone leaves a message and hit publish, it refreshes the page but the comment is gone. what went wrong?

    ReplyDelete
    Replies
    1. just found out I forgot the step 8. sorry. and thanks for this amazing tutorial!

      Delete
  19. I'm very grateful for the exhaustive tutorial. Sadly, Facebook is showing blank..not an even the option to comment....would you care to help?
    http://www.politicalkenya.com is the blog

    ReplyDelete
  20. I Liezl,
    Thank you so much for such a great tutorial! I have deleted the facebook comment system, and kept just blogger and disqus. It works like a charm! :D

    ReplyDelete
  21. Thanks for this...can you share with us the left floating share buttons you are using on web version.....................

    ReplyDelete
    Replies
    1. I can't just yet. There used to be a counter right there. Supposedly, every time you hover on a social share button, the number of counts will show for that social medium (with the hover 3D effect), and the sum for all the counts of all the media will show right there on top with the word SHARES.

      Unfortunately, the social media made changes with their API (about 3 of them) and my code broke. Until I find a way to recreate the counter and make it permanent or find the best 3rd-party service for it, then I will post a tutorial for it.

      Delete
  22. i have custom template embedded with disqus comment footer, want to replace it with blogger comment section of facebook one, hope you will help me out, thanx :)
    have GREAT TIME AHEAD.....:)

    ReplyDelete
    Replies
    1. I know it's late in replying but this is for future readers. I made a new tutorial here: http://www.zirev.com/2015/11/how-to-add-facebook-disqus-and-google.html

      You'll see the rundown of events. You can choose which commenting system/s to add (could be any combination): Facebook, Disqus and Google+.

      Delete
  23. Hi, I´m trying to put it off, but when I do reverse, my blog gets with no commet tab. Can you please post how take it off and came back to original blog comment tab?

    ReplyDelete
    Replies
    1. Please refer to this new tutorial: http://www.zirev.com/2015/11/how-to-add-facebook-disqus-and-google.html

      You'll see the details on what what were added so you'll know what to take out. Pay close attention starting from step 3 there.

      Your original comment section is this whole thing:
      "<div class='comments' id='comments'>...</div>".

      Delete
  24. Thanks for your tutorial, but can you help me how to resize the comment flat form.. here is my website www.healthcertified2k.com can you check please... thanks

    ReplyDelete
    Replies
    1. Please add this on your CSS styling for Tabbed Comments:
      .blog-comment-tabs ul li {
      float: left;
      width: 33.33%;
      padding: 1.5% 0;
      text-align: center;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
      }

      And then for the child list of blog-comment-tabs (ul li names) under <b:includable id='threaded_comments' var='post'>, you can delete the word "Comment" for Blogger Comment, Facebook Comment and Disqus Comment for better aesthetics.

      Delete
  25. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  26. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by a blog administrator.

      Delete
  27. This comment has been removed by the author.

    ReplyDelete
  28. This comment has been removed by a blog administrator.

    ReplyDelete
  29. This comment has been removed by a blog administrator.

    ReplyDelete

Random Posts