Thursday, March 31, 2011

Blogger: How to Add the Facebook Comments Box

Expand your reach with the Facebook Comments Box 
Comments are an integral method of interacting with visitors in a meaningful way. They are an opportunity to engage in productive conversations and build new relationships. You want to be accessible, but the ever present problem of comment spammers must be dealt with. In order to avoid Anonymous spammers, setting your blog to Registered users is helpful. Unfortunately, a good number of visitors may not have the required account.

The Facebook comments box is a convenient way to expand comment accessibility. Facebook has the largest base of users in the world and their reach continues to grow. Chances are readers have either a Facebook account or one Blogger accepts. In this article, I'll show you how to add Facebook comments along side Bloggers built in system.

Comment Choice through Tabs
My method adds a set of Tabs to the comment section. Clicking a tab reveals a different comment system, while the other stays hidden. As of this writing I currently use three Tabs for Facebook, Twitter and Blogger comments. The same basic method I'm about to show may be used to add still more choice if you so desire.

Adding the Tabs
Let's begin by adding the Tabs HTML. Open your template in Design->Edit HTML and check Expand Widget Templates. At this time click on Download Full Template and save a copy of your template. This modification is significant and in case of an error installing, you may need this backup to restore your template. After backing up, search with Ctrl+F for class='comments'. Below this found line place the following 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='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<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='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
Creating Tab Pages
Now that your tabs are in place, the comments must be segmented into 'pages' to be shown or hidden as a user chooses. Just after the Tab code I had you paste, insert this code:
<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='400'/>
  </b:if>
 </div>

<div class='comments comments-page' id='blogger-comments-page'>
This includes a 400px wide Facebook comments box and designates a page for blogger comments. You may change the 400 to whatever width suits your blog.

Tab Scripting and Styles
Two more additions remain to get things working properly. Once again open search with Ctrl+F and look for <head>. Below this line paste the following script:
<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>
These scripts are required to make the tabs function. If you already have another Facebook plug in or JQuery script included elsewhere, you may omit the first two lines. In order to gain moderation privledges to the comments, you must change the thrid line YOUR_FB_ID to your Facebook account ID. All that's left now are the Styles to make things look nice. Again search with Ctrl+F this time for #comments. Paste the following styles on the line above:
.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 may choose to alter these styles to suit your blog, but all 6 should be included in some form. Save your changes and visit an individual post page. Posts should now have Facebook and Blogger Comments at the bottom with tabs to select your favored option. These will not appear on the main page, only individual post pages.

Conclusion
The Facebook Comments Box is an excellent way to give visitors choice in conversing with you while limiting anonymous spam. There's the added bonus of social exposure through visitors friends seeing the comments. Although, you cede some control over the comment storage to Facebook and future portability may be an issue. Still, I believe the potential for exposure and social interaction while maintaining the Blogger default option makes this an excellent choice.

I realize these install instructions are fairly extensive, it's the price we pay for tabbed comments unfortunately. You may reach me for assistance through any of the three comment options provided below. Thanks for reading and good luck with your blogging.
130 Comments
Comments

130 comments :

A. Drewes said...

I would love to know how I can add in the twitter feature to my blog. Can you please email me with the code I need to input to closetsamples@gmail.com? Thanks so much!

Unknown said...

Hello Ashley,

I'm still experimenting with the Tweet box and have not written up any instructions for that just yet. Once I've played around with it a little more and got it working the way I want I'll certainly post something.

James

A. Drewes said...

Thanks so much! I'm looking forward to it. Also, how will I know if someone comments using the facebook tab? Will it email me like my blogger comments? I added it to my page after I made my previous comment. Thanks again :)

Unknown said...

I've read conflicting information about the notifications. Some of my reading indicated if you include yourself as a moderator through the meta tag you'll be notified. Other documentation said there is a script call which you can program to notify. Yet another piece implied you'll be notified automatically if you create and register a Facebook app, though I've read complaints this isn't happening for some and they have to monitor their app dashboard.

Long story short, I'm not 100% certain how notifications work and the documentation on Facebook developers along with other postings I've dug out of their site are conflicting. Once I've confirmed exact behavior myself, I'll update this post to reflect any changes and leave a comment.

Unknown said...

A little follow up on Notifications, I wanted to add a citation for why I think the setup I've provided should give notifications. Under this post announcing the new version of FB comments box I found this statement:

To receive notifications on every comment posted to the Comment Box, add:

<meta property="fb:admins" content="{YOUR_USER_ID}"></b>


Assuming that documentation is correct, you should receive notices. Unfortunately, I cannot confirm this since Facebook had a partial outage of service when the one comment to this post was made.

Mark Burton said...

Hi - This is a fantastic piece and really appreciate the effort you've made to help us bloggers out.

Once quick question - Have you come across a way of making the number of facebook comments present on the home page for those of us who use the 'read more' function rather than appearing in the post itself?

For example the number of blogger comments are shown on the homepage but the facebook ones are not.

Unknown said...

@Mark Burton

I had not thought of that Mark, but it could certainly be done. I obtain the comment count for the Facebook tab like this.

<fb:comments-count expr:href='data:post.url'/> Comments

This could easily be added into the footer, though I'd need to experiment a bit to find a look I find pleasing. I think you may have given me an idea for a new article.

Thanks for the question and stopping by.

James

Anonymous said...
This comment has been removed by a blog administrator.
Paul Crowe said...

Love it great work.You have the tutorial with the facebook comments as the selected option, i changed it to have blogger selected and fb as the second option on my blog.I think most bloggers would like to have that option.

Unknown said...

Thanks for the tutorial, works great!

I've put the tabs/comment sections onto my blog and it comes up with 'Warning: http://www.digitalpiratematerial.com/2011/04/fractal-system-emotive-step.html is unreachable.' on the facebook comments plugin.

What does this mean? and does this need to be amended?

Thanks again, keep up the good work.

Unknown said...

@jmvlg, It appears you've entered an invalid Facebook App ID on your blog. If you follow the link the FB comments plugin shows, you'll see the error description. I expect if you correct that App ID problem things will work properly.

Jeff E Jensen said...

Thanks for the tutorial! I've just added it to jeffejensen.blogspot.com and it appears to be working.

liberal sprinkles said...

HI, could you post the html codes that would make the Blogger comment box show up as the first and the default rather than the FB one? I'm not familiar with html and can't get it to work. Thanks!
Grace

Unknown said...

@liberal sprinkles, Take the instructions above and change the following three lines:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
#blogger-comments-page { padding: 0px 5px; display: none;}

To these:
<div class='comments-tab inactive-select-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<div class='comments-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
#fb-comments-page { padding: 0px 5px; display: none;}

I think that's all and how I have this blog currently set. Guess I should add to my TODO list to make altering the default simpler.

Anonymous said...

Thanks for tutorial

My fb comments didn't work.

I get this message on my blog " The comments plugin requires an href parameter."

What should i do?

Unknown said...

@Biaqpila, I could not identify the error looking at your page source briefly. However, I cannot see the exact template changes you've made from my end to exhaustively diagnose the problem.

The HREF paramater is set on this line <fb:comments expr:href='data:post.url' num_posts='2' width='400'/> You may look in your template source here to identify the problem. Otherwise, I recommend undoing the changes and trying again from scratch.

James

Anonymous said...

Please ignore my question. I've got answers. Everything was successful, after I remove the facebook fanpage widget.

Anonymous said...

Thanks James for fast respon...

One more question, if my facebook profile is http://www.facebook.com/biaqpila,
so my Facebook account ID is biaqpila?


Nice to know u, pls accept my friend request on your fb.

:) Thanks

kama_tech said...

hi very good tutorial would say the best that is in the network, thanks for sharing.

my question is how I can do to make the number of comments show in tab of facebook. as seen in this post

Riuz said...

you are so awesome!
i have been looking for this for a very long time, as i don't want my previous blogger comments on my blog been hide (or deleted) but also want to increase my readers by commenting with their facebook profile.
you save my life.

Mark Burton said...

Hi James - A quick one surrounding this

When people comment on the blog and post to facebook it seems to display the orange blogger logo instead of the picture that resides in the post.

Do you know of anyway to change this so that the jpeg in the post us used? I can't remember if it did this before applying the code or not.

It's not a big thing but just wanted to know if you had any ideas?

Thanks again for all you help!

Unknown said...

@Mark, I do not know of a way to default the image FB defaults to when scraping a page. I'm not too familiar with the algorithm they use, but you may look in the developers documentation on Facebook for an answer. If anything my guess is they'll have a meta tag of some sort you can set.

chardyboy said...

wonderful post. i followed what i need to do. and pooff im happy to see the result
see my site http://www.iphsport.com/2011/02/height800-scrollingauto-aligntop.html

thanks for this

chardyboy said...

Warning: http://www.iphsport.com/2011/02/height800-scrollingauto-aligntop.html is unreachable.

why i see this??

Dustin said...

Great tutorial Thanks. But, I can't seem to find #comments in my HTML template. Any ideas why, or how I can add it in?

Gue said...

Where I like to add make Twiiter? thanks b4

Unknown said...

This is a great idea! Thanks!! I posted a comment before but I think it was lost when blogger went down. But I have a question: How do I move the backlinks section to below BOTH these tabs? As of now, the backlinks only show if you select the blogger comments.

Unknown said...

@EchoDust, your template includes the backlinks inside the comments div for some reason. You may change this by inserting a </div> tag before this line <div id="backlinks-container"> then removing a </div> tag after the </p> tag several lines later.

Unknown said...

@James Thank you so much!

Ghumakkar Punit said...

@James-Thanks for sharing, I installed the box as you directed. Though having a problem same as @Chardyboy's. It'saying "Warning: http://www.punitdubey.in/2011/05/evening-in-chilika-lake.html is unreachable."...clicking the link it's directing to FB Developer Lint page....

Unknown said...

@Punit, reading the error message from FB you've entered an invalid meta tag. Specifically this line <meta content='YOUR_FB_ID' property='fb:admins'/> from this tutorial. If you have a Facebook app ID, looking at your page source that appears to be the case, you'll need to switch admins to app_id in the above line. Otherwise, you may insert your personal user ID instead.

I wrote this tutorial for general Blogger use, rather than developers since I expect most do not actually want a Facebook Developer App. Of course that's an option I could include a tutorial for later on if needed.

Ghumakkar Punit said...

@James,thanks for your prompt help. Earlier I have generated an App ID, and used it. But, it didn't work. Then as advised by you, I used my FB-ID, i.e fb.com/PunitDubey08, and it worked! For the latest page the unreachable thing was still there, until I 'Liked' it on FB.

Thanks man! It's now working as said.... :)

Oneinfocus.org said...
This comment has been removed by the author.
Unknown said...

@One, you may do either, although thus far notifications as documented for personal ID seems unreliable to me. If you have an App ID, I recommend using that instead.

Oneinfocus.org said...

Hey @James Thank you for your blog post.

I went here: http://developers.facebook.com/setup/ created an app to get an ID and followed your instructions.
It all works: see www.mountainclimber.me However - when someone comments it does not show up on their own Facebook user stream. Can you advise? I thought this should happen?

Oneinfocus.org said...

@James thank you for your response. My apologies in deleting the question - I worked it out. I am still stuck on why when someone comments it does not show up on their own facebook stream?

Thank in advance for your help!

Philippine Legal Forms said...

yours is a great site and most helpful! thanks a lot for sharing your knowledge...

Unknown said...

@One, I suspect the poster unchecked the "Post to Facebook" option. My understanding is only with that box checked should they appear in the users FB stream. Although, it's possible there is a bug on FB causing the issue since the comments box is their code inside an Iframe.

Unikversiti said...

Really awesome trick, one of the best!! thanks and have nice days :)

Kevin Leu said...

Hi James, thanks for taking out soooo much time to help strangers. I searched for "#comments" and nothing came up. Although there were 50+ results for just "comments." Any further clarification on where I can post that last line of Style code? Thanks!

Unknown said...

@SVB, you may place the style code anywhere within the <style> block near the top of the template. I chose the #comments location mostly for later readability as the two sets of styles are related. Odd your template has no style information for that element, though in that case. I recommend placing the style information either near the styles for Posts or Footer styles since comments occupy the space between the two generally.

Kevin Leu said...

Thanks James. I think I may be doing something wrong still: http://www.siliconvalleybachelor.com/

If I click on the blogger comment option tab, it doesn't do anything. It stays on the Facebook comment option. Are you seeing the same problem?

Unknown said...

@SVB, you left out the first two lines in the Tab Scripting and Styles section of code. Add those in and I think it should function properly.

Anonymous said...
This comment has been removed by the author.
Kenneth Morgan said...

this is great! looks good on my page too! thank you so much!

Roy said...

HI James, was it possible that you could post the html codes that would make the Blogger comment box show up as the first and the default rather than the FB one? I'm struggling with the one that you answer to liberal above. Thanks!

Anonymous said...
This comment has been removed by the author.
Unknown said...

@Roy, sorry it's been a couple days but I've been ill and unable to use the computer the past few days. Anyway, here's the changes I made for this blog.

Replace the step 1 code for tabs with this:
<div class='comments-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='clear'/>
</div>

Next, substitute this CSS for the final step:
.comments-page { background-color: #f2f2f2;}
#fb-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;}

That should do it.

James

JYOTIRMAYA CHANDRA said...

I am using another trick, but my FB comments are showing at each post, please have a look and help me...!!!!!!!

Anonymous said...

works perfect..thanks

UbatPensil said...

it works! awesome!! tnx!

Unknown said...

Thanks for the great sharing bro! ;D

Unknown said...

Hello mr James, I was searching for this fb plugin a loooong time , now it works very good on my Blogger blog. The question is > is it possible that the comment box will apear on the front page and not inside the post. for example on my blog sometimes I just post a single picture ,so I would like the fb comment box could appear below the image. Beforehand thak you . Look in my blog here www.lol-content.blogspot.com

Unknown said...

@Platon, you'd have to remove the with a matching which must be removed. Keep in mind this applies to every single post, which means each post on the front page would receive its own comment box. This would be very cluttered looking once you have a number of comments and I do not recommend it.

I can think of a few other ways one might code comments to the main page, however I have no code handy and honestly am not in favor of any scheme I can think of off the top of my head. Perhaps if it were added dynamically on a user button click it could work. I don't have the code though.

James

Unknown said...

yep maybe This would be very cluttered looking, but I need it, I want it to be like on this web site www.muligambia.com which means each post on the front page would receive its own comment box. maybe you could give me the additional codes so I could change the existing one applyed from you tutorial ...

Unknown said...

Woops, sorry about that I forgot to convert the html tags in the last comment. Removing the <b:if cond='data:blog.pageType == "item"'> and </b:if> tags I think will do it. Not certain how your template code is though, may be something else to do.

Unknown said...

mr james Could u make a tutorial about how to integrate FB comments box on Blogger blog put so it would be on the main front page different box bellow every post ? Becouse everzone on the internet is searchig for that tutorial and nobody made something working yet. i will share it with everyone.

Unknown said...

when I search for "class='comments'" I find instead
"<div class='comments'"


Where do I insert the codes for Tabs?

Unknown said...

That is the correct location. My tutorial used a shortened search term for ease of use.

Unknown said...

Thanks. Got it.

Unknown said...

Thanks. However I find that on main page the posts show no of comments of blogger icon the facebook icon doesnot show the number but on post page both show the numbers. Did I miss something?

Unknown said...

FB comments count on the main page is a separate task to which I wrote a tutorial Here. I use a similar, customized method for my own posts.

Don Quixote said...
This comment has been removed by a blog administrator.
Jaya Suria said...

i have a problem now... i installed this comment box on ma blogger, and now, my like button showing error whenever i press it, how to solve this?

Unknown said...

@Jaya, I can only guess what your problem is without seeing it first hand(no link provided), but my hypothesis is this code should in no way impact the like button functionality. A FB Like button, if you're using theirs and not some other, is embedded in an iFrame by Facebook's code and nothing I've written in this tutorial can alter that iframe. Although, prehaps it's possible the Facebook JavaScript each uses is included twice and causing a conflict. If so make sure the <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> line is included just once.

Of course, I have no way of verifying how you've installed each to see if something else is to blame or how your code is organized. So, this is merely an educated guess.

James

Fahad bin Khalid said...

Can you make a blogger widget for recent facebook comments??

Felix said...

Hi James really nice post. I did everything as you explained and it worked out. I was wondering though is there a way to to be to get notified when someone posts a fb comment on your blog post. At this point in time I have to be checking the posts to know when some one posts a comment.

aimanayie said...

dude..thanx for this tutorial.. it works well!

Unknown said...

@Fahad, I'm not familiar enough with the Facebook API to know whether that is possible, though I suspect it is. It's a bigger project than I'm looking to take on at this point though most likely and probably requires a FB App.

Unknown said...

@Felix, notifications require a meta tag associated to the account. Facebook developers documented the <meta content='YOUR_FB_ID' property='fb:admins'/> tag I supplied as accomplishing administration as well as notifications. Unfortunately, that documentation seems to be in error.

So, to get notifications it seems you must register a Facebook App, which requires a verified FB account using either a mobile phone or credit card. Once you have an FB app setup with the appropriate configuration include this meta tag <meta content='YOUR_APP_ID' property='fb:app_id'/> After that's done future updates should notify the owner of the specified Application. At least that's what the documentation says, though I have not registered my own FB App at this time.

James

(GBS) NewsFromTheHill said...

Tried once with no luck, but I'm a total novice to html code.
In the search for #comments my code showed two finds... would it matter which one? Also (sorry, but I'm a neophyte) when you say paste the styles on "the line above" what exactly do you mean? Right in front of the #comments or scroll up and find the nearest > and go before it?
Also will the ID for a Facebook Page work as well as a Personal Account ID?
Thanks

Unknown said...

@GBS, it does not matter which #comments because each instance is within the required Style section of your template.

Line above simply means on an empty line(one which exists or that you create) prior to where you've found #comments. Doing so should guarantee a valid CSS entry. This also locates the styles in a logical place within the template if you wish to customize them later it should be easier to find them.

No, a Page ID will not work. You must provide either your personal Account ID or register a Facebook app, then include that within a valid meta tag, in order to moderate comments. You may omit this if you do not wish to moderate.

(GBS) NewsFromTheHill said...

Hoorah! Working great, thanks!

MsKibibi said...

Thanks! This was the easier tutorial I found that actually worked.

Question - How do I hide the comments box from static pages on Blogger. Thanks!

Lauren | Seventeenth & Irving said...

This is fantastic! Thank you so much for the time and effort to create this easy to follow tutorial.

zullum said...

I can't find #comments in my html code what to do. Please help

forHuntersbyHunters said...

Booked Marked! I look forward to seeing the code that posts the the comment tabs on the main page vs. post page (if you have jump breaks)...
Nice work- the best tool on the web for this!
THanks!

GKC said...

how do I change the font color to white? the font is black on gray background :(

Jeremy said...

This is awesome. Thank you so much for posting this. Especially when combined with the comment counter tutorial.

Jeremy said...

Is there a way to have FB alert you when there is a comment?

Admin said...

Whenever I try it on my blog & click on save template,it shows shows some error that your html can't be parsed...
What's this error?
Please remove it..
My blog : http://testingsmarttemplate.blogspot.com/

Louma Sader said...

Hi James!

I tried to follow this tutorial (which by the way seems to give a fab solution to Blogger versus FB comments), but I couldn't get past the first step :S I searched for "class='comments'", found it and pasted the code right below (tried a couple of different locations within the template too, just in case) but alway got the "template is not well parsed...XML: The element type "b:includable" must be terminated by the matching end-tag "".

I've also tried over a dozen (not exaggerating) tutorials on how to add FB comments to Blogger and all of them either said that resulted in my blog displating "The comments plugin requires an href parameter." or displayed nothing at all...

I then reverted to my saved template, could you please take a look and tell me what you think I could be doing wrong? Or if some of the previous customization I've made on my template could be conflicting with the FB comment code?

Thank you so much,

Kind regards,

Louma
(the site where I need to install it is AmorMaternal.com)

Unknown said...

@Amor, that's not an error I can really debug for you since it's a problem completely invisible to the public. Basically, somewhere in your modification you've mistakenly overwritten a </b:includable> tag. Exactly where this occurred, I couldn't begin to guess. Unfortunately, this just isn't an error I can debug without seeing the source of the modified template sections.

@Shivam, you too made an installation error most likely due to the heavy modified template you're using. A custom template likely requires a custom installation, though not a task I'm looking to undertake gratis.

@Jeremy, comment #5 discussed this briefly, but despite the FB documentation it doesn't seem to work. Instead you'll need to register a Facebook Application with the facebook developers site and follow their instructions to include the correct meta tag in your template.

@GunplaBoy, you'll have to override the css in your template. Since I don't know which text your having a problem with I can't say specifically what style. I recommend inspecting the element by right clicking with either Chrome, Safari or Firefox to find the style applying the color then copy it and change the color value in your template.

Louma Sader said...

Thanks James!

Elsaady said...

hi James

Moderator Bar Missing

After installing the module, I created the App, as you said in the documentation. Followed all the steps. Also added myself as Moderator in the Developers page.
Still, when I go to the frontend of my website, I don't see the moderation bar over the comment box. There is no settings, no "Public Comments", no "Moderator View"

thanks

Anonymous said...

I cant find #comments.. So how can i paste the style??

Louma Sader said...

Does anyone know how to delete a FB comment made on the tab? I've tried "hide" and "ban user" which I thought were the closest and found out that the (spam) comments remain visible to all their friends on my post and on their walls :S

Thanks,

Louma

Unknown said...

@Amor, you cannot delete someones post. The poster owns the comment and it's theirs forever. All you can do is hide it from your site visitors.

Medsources said...

Hello James i have some problem.
i have installed this script in my blog.
It worked fine, thanks for sharing
but one problem is when i visit my webpages i have set default comment is facebook but there is twitter comment also appear just below fb comment. It will disappear after selecting tab.
Please how to solve this probelm to not show that twitter comment box just below fb comment?
My blog is
http://medsources.blogspot.com/

Unknown said...

@Med, you didn't follow the tutorial. You're using a flawed script that was copied from my site source. I've long since abandoned that code and rewritten because of the problem you're having. If you want it to work with all 3, I suggest using the updated tutorial for all 3 services in tabs.

Medsources said...

Thank for response. But i want add twitter also in my comment box. How can i add twitter box with recent version of your code???

t3ch said...

I cannot find #comments .
Please guide me.

lalang said...

how do i put blogspot comment tab before facebook comment tab? just like you comment box.

Admin said...

Thanks a ton James! It's working for both my blog: http://jonhappiness.blogspot.com and http://jonharules.blogspot.com ;) Is it possible to have this on Wordpress too?

Unknown said...

@Jonha, it's possible to add FB comments to wordpress for sure. It would just be a matter of mucking around in the sites template files and adding in the needed tags + scripts. I've not done it myself, because I don't run any public WP sites and the free wp.com setup is too limited. I'm sure it's possible though, I do occasional WP plugin work on my development server.

James

AFIQFAKHRI said...
This comment has been removed by the author.
Emma's Lunch said...

Hi James, thanks so much for this, its a great feature. I'm trying to add it to my blog emmaslunch.blogspot.com although when looking to add the very first set of code I can't find the class='comments'. I read through other comments here and I found that someone else had the same problem and you suggested to put it anywhere within the style block, but strangely enough I can't even find that! :S Do you have another suggestion?

Thanks for your help
Vanja

Emma's Lunch said...

Please disregard the silly above comment, got it working.

we are the spencers said...

I have a quick question. I did your tutorial and everything worked great. The one tweak I would like make and don't know how is when I click to make a comment on one of my posts the page opens at the top of that post and i have to scroll down to leave a comment. i would like to click on a comment and it take me right to the comment section without having to scroll down. Hope this makes sense! Any tips?

Unknown said...

@spencers, it looks like you've added the Comments Count tutorial as well and the direct navigation isn't scrolling down. I think that's your issue, correct?

I'd not noticed that bug before, but it's related to the way the links are constructed and the code I use to hide/show the comment tabs. It can be fixed one of two ways, either by making the Blogger comments the default or by altering the count tutorial.

To set Blogger comments as the default system you can follow the steps in Comment 14.

As far as modifying the link code, I'd have to play around with my test blog to get the correct modification. Probably easiest to make blogger comments the default, but let me know.

James

Tshewang Gyeltshen said...

hi James;
i have used your trick in my blog http://www.tshegyel90.blogspot.com;
i very much liked the idea of tabbing fb and blogger comment box together; however; my problem is that; the background that facebook comment box use, shares with the blogger comment box leaving the previous comments visibility very poor;
would be glad if you can help me fix this;

thanks in advance
Tshewang

we are the spencers said...

Thanks so much James, I will give that a try.

Mosses said...

man...I am almost crying, thank you so much.

Angela S. said...

Thanks James. This is a great article! However, I noticed one thing: the Facebook comment box doesn't appear in Internet Explorer 9. It works great on Firefox and Google Chrome, but it's just a gray rectangle with no comment box on IE 9. I've tried the sites of people who commented here, and it's the same thing; your site works, though.

Gustavo said...

James i can´t do it, i have tried a lot of times...but it don´t appear.
This is my web chicasalskate.blogspot.com
I hope you can help me. Regards.

Unknown said...

I couldn't find the class comments or the #comments and can't figure out where to put it! Help!

حاج محمد said...

Could you please show me how do I switch tabs, so that the blogger tab appears as a default, and the facebook tab has to be clicked at?

Many thanks.

news said...

Hi, I am having a very stupid problem.
You asked to find, (class='comments') ,

But in the new blogger inerference there is no, (class='comments'),

Only thing I found there is ().

I tried to insert your given code after that but giving me an error message , which is (Error parsing XML, line 1289, column 5: The element type "b:includable" must be terminated by the matching end-tag "".)

What to do to resolve this issue ?

SM said...

One question: How to make the direction of tabs and comments work right-to-left, for use in languages, such as Arabic, Hebrew, etc.?

Jeremy said...

This worked great on my blog for the past 6 months. Now, all of the sudden, (a) the comment box doesn't recognize that I am the moderator and (b) recent comments aren't showing up in the FB Comment Moderation tool. I need to fix this because someone left a nasty comment that I want to delete, but right now I am having to remove the box entirely.

Zbang said...
This comment has been removed by the author.
Unknown said...

Hi James
I think i am asking question everywhere on ur blog :P
I install this and it works, the only problem is, when I make a new post, the tab wont appear until there's a first comment is made, not sure why is this happen but I'm sure it's not normal...

here's the link, if click on the first post, there's no tabs at all, the for the other posts w reply, the tabs are there.
http://coffeeandfriedchicken.blogspot.com/
thanks so much!
Kuni

GulmiResunga.com said...

Thanks for the tips.. As your steps i have implement it on my blog. But one error appears.
The comment box tab is appearing on the static pages also. I want to hide it from there. But i don't know how to do it. I have done "don't allow comment" for post option of static page. But its not working. Visit http://www.gulmiresunga.com/p/submit-articles.html and you will understand my problem.

Regards
Santosh

Angelina said...

I install this and it works, the only problem is, when I make a new post, the tab wont appear until there's a first comment is made, not sure why is this happen but I'm sure it's not normal...
Facebook Application

paschal said...

thanks so muchhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh got it working on my software blog i can really show how appy i am

Anonymous said...

Thanks! it worked,

Luqeem™ said...

hi james, can i know why when i clicked my blogger comments, it doesnt show the comments made. its blank.

another one is how can i put the 'post a comment' above the comments.

Anonymous said...

Not working on my site. Can somebody help me on this?

http://www.juandelacruzblog.com/

Thanks!

Ferdinand Kamadin Bangun said...
This comment has been removed by the author.
Ferdinand Kamadin Bangun said...

I think it's working on my site www.grafik4.com.
Thankyou very much.

Voice of 71 said...

in my blog, when someone comments from blogger account, the whole tab disappears . what is the solution ?

Voice of 71 said...

can i make another tab showing google+ comments ?? all i want is a three tabbed commenting system having blogger default comments, facebook comments and google+ comments together .

Yurika-Chan said...

Facebook tab it's not working

shaikh iliyas said...

Thank you very much i love you my dear brother thanks very much
finaly in my blog its beatiful

http://mypremiumtrick.shayrikiduniya.com/2013/10/mypremiumtrick-symbol.html

shaikh iliyas said...

dear please add email subscribe here
i want to like to subsribe your email

Unknown said...
This comment has been removed by the author.
Unknown said...

Hello sir! I need your help. I have successfully placed a Facebook comment box on my blogger however the Blogger comment box was not replaced by it. That's why I have this two unsightly comment boxes below each of my post. What should I do?

Here's my blog btw if you want to take a look.

http://vclenuar.blogspot.com/

:/

Unknown said...

James you're awesome man!

One people have copied your snippet and modified himself but can't make workable.

But your original source code works just perfect...!

Tricahyo Abadi said...

I've been using this comment box for 3 years and only today I realize that it is from you, Mr. James. Just because I want to add another tabs as Voice of 71 request, that is G+ comments, then I find your blog via Muhammad Shawon. (both are guests above)
I really appreciate this work as it does invites more interaction on my blog. Thank you so much, James.

Unknown said...

nice

Post a Comment