Due to an Upcoming change by Twitter in their API, Twitter comments will cease to function sometime early in 2013 at the latest. Unfortunately, this cannot be fixed reasonably and no further support will be available. I hope everyone that's used my script over the past year and a half has enjoyed it, but regretfully Twitter is no longer friendly to this type of usage and I've ceased development for their service.
Twitter and Facebook have come to dominate social media in the past few years. Although many other services exist, these two have grown to mammoth proportions dwarfing most others. As such there's a fair chance your blog readers have an account with one or both, though they may not have an account compatible with Blogger comments. In order to increase interactivity of your blog, wouldn't it be nice to broaden your reach by utilizing these two social titans?
In this post I detail how to implement both Twitter and Facebook comments into each blog post along side Bloggers own comment system. This tutorial results in comments which look and function exactly as those active on this blog at the time of publication. End result being a three tab paged comments section with active counts for the number of comments under each for the page.
 |
| Preview of this Tutorials Results in CSS 3 compatible browsers, includes color customization for this template |
Twitter and Facebook Apps
Each Social Network offers Applications for developers. Although most of us certainly are not programmers, it's still quite helpful and useful to register apps of your own. Facebook Comments, fortunately, do not require an application to function. However, one is needed to access all available features such as comment administration and Facebook notifications. As yet I do not have a tutorial, but you may register your own app at Facebook Developers.Twitter on the other hand requires you register a Twitter App and include the necessary JavaScript library with your API key as outlined in this Tutorial. Once registered and the script added to the <head> section you're ready to integrate Twitter comments using my JS Tweet Box. The line added should look something like this, substituting your API Key of course:
<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1"/>
Installation: Include Necessary Scripts
Now, we must add the scripts necessary to support each comment system. Open your blog template in Design->Edit HTML and check the Expand Widget Templates box. Using your browsers search function, hit Ctrl+F, to find <head>. One line below insert the following script includes:<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=0'/>
<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/>
Adding the Comments Tabs
Next, we must add Tabs from which a reader may choose their preferred comment system. Each tab is styled to reflect the color scheme of the associated service and includes a readily identified icon for easy use. Search with Ctrl+F for class='comments' and place the following code on the line below the found text:<div class="comments-tab" id="blogger-comments" title="Comments from Blogger">
<data:post.numComments/> Comments
</div>
<div class="comments-tab" id="twitter-comments" title="Comments with Twitter">
<span class="js-page-tweet-count" expr:href='data:post.url'/> Tweets
</div>
<div class="comments-tab" id="fb-comments" title="Comments made oFacebook">
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class="clear"></div>
</div>
Choosing Default Comments
I've upgraded the code since the Facebook Comments box post to make choosing which page displays by default simple. My code makes Blogger comments visible out of the box, however you may choose another by including the class, js-default-tab, on the comment tab of your choice. For instance to display Twitter comments by default change the following line:<div class="comments-tab" id="twitter-comments" title="Comments with Twitter">The same can be done for Facebook comments as well, just add the js-default-tab class and you're set. Keep in mind, this only functions for 1 tab at a time and always the first encountered in the code.
To
<div class="js-default-tab comments-tab" id="twitter-comments" title="Comments with Twitter">
Setting up Comments Pages
Include this code just below the previous addition to create space for both Twitter and Facebook comments as well as creating a correctly styled Blogger comment section.<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'></div>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Optional Configuration
Twitter Comments have a few options you may wish to configure. The changes are easy enough to make, simply alter the 2nd line of the page code above as outlined in the JS Tweet Box tutorial. This allows you to add a Follow button and include short urls using a Bit.ly application.Facebook comments include three options as well. If you notice in the line above beginning <fb:comments there is a num_posts and width number set. The first sets how many Facebook comments are shown by default, alter this to your liking. The second is the width of the comments box. I recommend setting it near to the width of your blogger comments. Finally, if you've chosen to forgo a Facebook App you may still moderate the comments by including the following line below the <head> tag as this tutorial began:
<meta content='YOUR_FB_ID' property='fb:admins'/>Replace the YOUR_FB_ID item with your actual Facebook ID and so long as you're logged into Facebook you may moderate the comments. However, you will not receive notifications of comments despite Developer documentation otherwise, at least I have not. In order to get both moderation and notifications you'll need to register a Facebook App and include this meta tag below the <head>
<meta content='YOUR_APP_ID' property='fb:app_id'/>
128 comments :
what is this...
http://jsblogstop.googlecode.com/svn/jsblogstop/commentpages/jsCommentPages.js
Error!!!
That would be a copy/paste mistake in the 2nd section line 1, which I've corrected. I pasted in a line which should not have been there from my first draft.
James this is an awesome idea. I will give it a go when I have a bit more time on my hands.
Thanks!!
Great idea,implemented it, just wanted to ask ,can you even Include Disqus and IntenseDebate comment system with this ??
an offbeat Question: Is there a way to show the Number of Reactions (Blogger once) received per Post in the post header (like u show the number of comments per post in the home page and index pages)
@Prayag,
I would imagine it's possible to add Disqus and IntenseDebate as comment tabs. I've not looked into either extensively though, but using the same programming logic and proper sizing it should be possible. I have no plans to investigate that question at this time, however.
As far as counts go, I've not developed a tutorial for that however the code is possible. It's just a matter of placing tags in the appropriate place with a small adjustment to the Twitter comments count JavaScript. Likewise, I have no plans at this time to build a general tutorial/codebase for that purpose at this time. But the basic bones are in the code I've provided already to place the counts anywhere.
James
Ugh.. great comment box here!!! *thumbs up!
@James: {I would imagine it's possible to add Disqus and IntenseDebate as comment tabs}
ARRHHGG!! I REALLY WANT IT BRO!! Well, as u said u dont plans it.. i will try to do it by your guidelines.. but i think i will need Your help, later..
i cant wait to make it true! >.<;
Ugh.. i followed ur steps here but it doesnt work properly.. i even tried put the div codes in several ways
any suggestion please?
http://muxstry.blogspot.com/2010/12/test-malaikat-rahim-as-tulisan.html
very excellent!!! I'm looking this tuts for long time and you give me the short answer. thanks alot!
argh... got one problem. why in my blogs fb:comments-count not working? I've also tried in several blogger themes but nothing change. not like yours that showing "2 Comments" or "0 Comments" in my blogs always show "Comments" doesn't care the post has 0,1,5,10 comments it just showing "Comments" without the counter. please tell me why?
Had a Question again? Is it possible to display the comment count received via Blogger as well as Facebook Together.
I saw that the facebook comment count comes from class='fb-comments-count' and the blogger comment count comes from data:post.numComments .I was unable to combine them together,Please help I am newbie to this .Please can you give the code for the same
@G+, it's a problem with Facebook markup language that others have reported. It's related to this line:
<script src='http://connect.facebook.net/en_US/all.js#xfbml=0'/>
In a prior tutorial the final 0 was a 1, but other bloggers seemed to have more luck using a 0 so I opted for that in this tutorial. My own blogs have worked flawlessly with either version and I've not tracked down FB documentation on the error since this workaround has fixed the issue before. Try changing version 1 and see how it works for you.
Btw, the question had fallen into my spam folder. I had to use your Blogger profile to confirm the error. I like the padding hover/active effect you added to your tabs. I've become so accustomed to using background/font changes, I'll have to use that technique sometime.
James
@Prayag,
The code depends upon where you want to place it and how you want it organized. But these two will give you the numbers, sitting side by side.
<data:post.numComments/<
<fb:comments-count expr:href='data:post.url'/<
Not knowing how you want it to look that's the best I can do. As far as Twitter goes, I'd have to check my code to confirm exactly where it picks up on the tag but it uses this tag.
<span class="js-page-tweet-count" expr:href='data:post.url'/<
It may not work in multiple places or if the JS Tweet box isn't in use though, I've not tested that sort of use.
James
See if I have received 2 Comments from Facebook and 3 comments from Blogger ,Then In the Post Header I want to show the Comment Count as 5 Comments (Total of Both)
I want to combine the Comment Counter of both Facebook and Blogger
I dont have a Tweet Tab in my Blog so just Fb and Blogger comment count Concern me.
I tried to do this
<a expr:href='data:post.url "#comments"' style='float:right'><img height='16' src='https://lh6.googleusercontent.com/-ycvvoLCoKVo/ThtRCE3C4_I/AAAAAAAAAeg/jcsdXgbdpTQ/s800/blogger.png' width='16'/>
<b:if cond='data:post.numComments == 1'>1 <data:commentLabel/><b:else/>
<data:post.numComments + fb:comments-count expr:href='data:post.url'/> <data:commentLabelPlural/>
But it showed a error ,Please help
still not working for me :(
are you sure its just because of <script src='http://connect.facebook.net/en_US/all.js#xfbml=0'/< ?
I don't use <meta content='YOUR_APP_ID' property='fb:app_id'/< and worried if the problem is from there.
hehe.. I don't want to take more risk to use lot of new CSS style when lots of my visitors is still using old-browser like IE :D
oh, and for that reason I need to change your CSS files and re-upload to my own server. but, the credit is still on you so I won't change the scripts name. hope this is ok with you?
@Prayag,
Oh, you want to add them together for a sum. That's not going to work easily. Facebooks code initiates on page load, then calls their API to obtain a comment count for the specified URL. This is returned asynchronously and processed through JavaScript. The value doesn't exist until well after the template code executes. Besides that you cannot code mathematics in the way you've attempted.
The only way to do what you want is through a custom JavaScript either tied to an event or repeatedly polling the DOM for changes, at least on Blogger. It could be done in a server side language such as PHP, ASP(.net), Ruby, Python, etc. if you had your own hosted account. I could probably figure it out, but at this time I do not plan to do so since it seems unnecessary given the limited tools available. It's really a task better suited to a server side script. Although I might consider doing a JQuery implementation for a fee.
James
@G+I,
Yes, that's the script Facebook requires to make their fbml tags work. You'll have to check with their developer sites to see if there's a problem with your page urls, because it's all their code executing to retrieve the counts.
The CSS is designed to work at a degraded quality with IE8(no rounded corners, no gradient backgrounds, box shadows, etc.) I get about 1/4 of my traffic on IE, actually get more Firefox and Chrome lately. So, I chose not to implement the old nested div image slicing junk of the past. I'm quite ready to have that Microsoft garbage behind me.
J
Thanks for the code. I installed it and appears to be working except that comments are not being counted in the twitter and Facebook tabs. Here is my blog URL http://litewnlsd.blogspot.com/
@Keith, I assume you've resolved your issue since I'm seeing counts on all tabs.
Hey James,
First of all, thank you for taking the time to do this. I've found it to be much the best way to implement comments by both facebook and twitter!
However, I have a problem. When I click on the "facebook" comments tab, nothing shows underneath the comment menu.
I've done everything as stated here, so no idea why it's not working. any ideas?
Thanks!
ah, forgot to include my blogger url.
www.graboencasa.blogspot.com
Solved it!! with the http://connect.facebook.net/en_US/all.js#xfbml=0 line, changed the 0 to 1 as stated above, and worked like a charm!
Thank-you for the response James. Excellent work! Can you check out this post from my site for me? http://litewnlsd.blogspot.com/2011/08/google-earthmaps.html#comments
There are 6 Facebook comments posted here, but the counter,shows 0. ???
@keith, I see a 0 count and 0 comments from facebook.
Hi James,
Your tutorial is truly awesome. I've implemented it on my music blog successfully. However, it also shows on Home Page. Could you please show me how to use conditional tag to hide it from the main page? I've tried normal ways but didn't get it right. Thanks very much.
Harry.
My blog address : http://www.fm4u.org/
@Harry, I'm afraid you have several problems which are not easily communicated, but they are related to what appears to be a previous comment modification. Typically, the div with class='comments' contains the blogger comment system and is nested within a conditional statement. This tutorial assumes that configuration.
Your blog however was previously modified and this is no longer the case. Your comments are situated well below in a div with the id='comment_section', which from appearances is inside the proper conditional. In short, the code provided for the tabs and pages needs to be moved down to properly enclose your modification.
That's much easier said than done and it would be difficult for me to walk you through such a change, since I cannot directly view the template code responsible. Good luck finding where the code needs to go, I'm afraid I can only slightly assist.
Also, you've not included the required Twitter application for the tweet box functionality. You'll need to do so per this Tutorial for those to work.
James
Thanks so much for your fast reply, James.
I will try my best to modify it to suit my needs.
Ah yes, Twitter..... Thanks :)
Harry.
why my blog seems can't work? it doesn't show any sign that the code i entered is working. :(
how to change the background of the blogger's comment box?
at first , thanks for all..
I have just finished installation but just I have 2 small problems:
1- my face book counter doesn't work!
2- the dimensions of the comments box became out of my main section dimensions...and I hope you can Help me
that is a screenshot clearly showing my 2nd problem
http://3.bp.blogspot.com/-VqICgYIdff0/Tlxcd5qYb5I/AAAAAAAAAMo/EAqvX_JhFnA/s1600/untitled.PNG
Thanks
here is my blog
http://refinerypedia.blogspot.com/
OMG i can't believe this!! it work PERFECTLY, EXCEPT the twitter button.. it seems that i can't use the twitter comments box.. how come?.
anyway, still satisfied with this.. i hope you could help me with the twitter comment page. thanks..
http://garyasip.blogspot.com
done!! i've figured it out!! thanks a lot. booked marked this cool site. hope you can come out with another cool blogger application soon!
@Moneer,
You have a margin style around the blog posts from the class .single like this margin: 0px 5px 15px 12px; The #comment box needs something similar to line up correctly.
@GaRy, glad you like it and got it working.
@Faiz,
Set a background override on this style #blogger-comments-page {background-color: ACOLOR; }
somehow i wonder if i can put '@my_twitter_ID' in the twitter comment box just after the 'bit.ly'. this will keep me update with reader's comments through twitter. can u tell me how to do so?
thanks James, but i looked for #comment box and found nothing.. then i looked for similars but get confused and found many "margin"s ..can you help me by telling the particular part that i should modify
and what about my facebook counter ?
My facebook counter now working,thanks Allah, but still having my dimensions problem !!!
great post! I've adapted it for my blog, it works fine, but I have a problem: Your color scheme for blogger is a bit annoying and it's difficult to use. I want my previous default blogger comment form, with my default dark color scheme. Can anyone help me, please?
www.cahuleanu.blogspot.com
I forgot to say that my twitter app isn't working, because I cannot find that "API key". It isn't displayed on the next screen after registration. What is it and where can I find it? Thanks for this great tutorial!
FACEBOOK COUNTER disappeared again but now i can make it works.. the script of facebook like page interferes with the script of the counter, so if i remove facebook like page widget the counter will work properly
http://refinerypedia.blogspot.com/
but still can't repair my dimension !!... help me ..thanks
http://3.bp.blogspot.com/-VqICgYIdff0/Tlxcd5qYb5I/AAAAAAAAAMo/EAqvX_JhFnA/s1600/untitled.PNG
@moneer, Facebook comments counts are sometimes annoying like that. You can try changing the XFBML version on the following line from 0 to 1, sometimes that helps and sometimes the opposite works.
<script src='http://connect.facebook.net/en_US/all.js#xfbml=0'/>
The margin needs to be set on the comments box like this
#comment {margin: 0px 5px 15px 12px; }
@cahuleanu,
For the color refer to comment #37.
Locating your API key for Twitter is covered in This Tutorial. You may have missed the link while reading.
@Gary,
The code would need to be changed to include an @User, but I'm not inclined to add that right now. Most sites which do that annoy me as I have to delete their formatting and I greatly prefer a link back only. It's just my preference, so I've not integrated it into the script.
You're welcome to hook in with your own javascript to change the comments box contents if you'd like to roll your own of course.
.The problem with the colour was solved, without 37th comment. Now another twitter problem has appeared: the twitter tab says there's two comments, but in fact, there's only one comment. Can it be solved?.The problem with the colour was solved, without 37th comment. Now another twitter problem has appeared: the twitter tab says there's two comments, but in fact, there's only one comment. Can it be solved?
@cahuleanu, There are multiple ways to set colors yes. The Twitter count comes directly from the Twitter count API and that number is how many their API shows for the supplied URL. It's a bug in Twitter's count system and I have no ability to alter it in anyway.
james, thanks anyway! I'll follow your articlesjames, thanks anyway! I'll follow your articles
Hi JAMES!
I just want to PRAISE you for this wonderful "COMMENT" innovation you've shared with us, Bloggers.
This "FB + Twitter + Blogger Comment" code works perfectly fine on my WebBlog www.theentertainmentlifestyle.com although, it took me for quite sometime to study the scripts and install them all by myself, finally, I was able to make them work!
For me you're a genius!
Regarding the Facebook comment moderation thing, I'm still having trouble in getting an FB APP ID due to some technicalities in registering my mobile number at their site. But then again, moderating the comments are the least of my concerns as you've made a huge impact in transforming my "Comment" feature more interactive and impressive.
Thanks again and more power to you and JSBlogStop! (",)
Hi James, thanks for sharing your expertise with us. I have successfully added the comments box in my blog. It looks and works great with just a few tweaks.
I am getting this error : Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: Element type "div" must be followed by either attribute specifications, ">" or "/>".
Please HELP
@Shivam, you've made an error when attempting to add the modification. Most likely you've accidentally deleted an end tag somewhere.
I have checked it again but I suppose I copied everything correctly.
Is adding "Choosing Default Comments" is must?
Where I have to add "Setting up Comments Pages" section of code?
Hey there :)
First off, love this.
Two things. One, you want check the 7th line with first coding for making the tabs. The title needs to be fixed. I couldn't figure out why it looked funky being so tired until I go... oh. lol
My issue only is with the FB part. I click the tab, and it shows nothing, but I get "the comments plugin requires an href parameter." I tried changing the code like in your #12 comment, but instead of giving a blank page (as it did with the "0" number), with the "1" I get the above mentioned error. Now I'm exhausted so I might be missing something obvious, but I did everything mentioned.
Feel free to check for me :) ahbrowne.com
Thanks!
Dear James, thank you so much for this! I managed to install everything using this tutorial. Although I do have a small problem. It seems as though the original blogger comment box shows below the twitter and the facebook tab comment boxes, and the blogger tab does not look like yours, its also the original blogger box. Any ideas on how I should fix it? I did install the style code you provided on the previous tutorial for just blogger & FB tabs and still nothing.
Also on the twitter tab, the comment box is all scrunched up to the right. Any ideas on how to make that look as nice as yours?
Thank you very much!!
For those of you facing my issue, and some others with the FB part of the box not working, I wanted throw something in. I searched EVERYWHERE to figure out what the issues were. I kept getting the "the comments plugin requires a href parameter" and I couldn't figure it out. The code above is right, it's just that if you're running an OLDER version of FB like box, or anything from Facebook at all, get rid of it, then re-install it from FB for the new stuff. Go the widget style because their xml code gives you an error when you insert it into the html editor. But try that. Get rid of any other FB like buttons, or boxes, THEN add them again after doing this code. Everything should work great! Mine is, feel free to check it out at ahbrowne.com :)
Thank you very much for this comment box, I´ve added it in 2 blogs and it works great.
I´ve 2 questions, how can i change the commentbox background color? I don´t understand the your answer on comment #37.
The second question is a bit harder, how can i add a default text in the twitterbox, a text that will always appear in the begining or the end of the tweet that any user submits by the commentbox?
Thanks a lot! Great work!
how to hide blogger comment box when we use facebook comment box??
Oh God, it work perfect on my blog..thanks...Great Work..Amazing...
I've done everything correct again it's not working :/ People can't comment me from Facebook or Twitter. Could you help me??
thanx a lot for this tutorial!
blogspot and facebook comments are working great,, but for twitter,, it cant connect with my twitter's app..
*I have follow your Registering a Twitter Anywhere App tutorial,, step by step..
owh... my pager link Newer Post, Home and Older Post,, it is weird T_T
i want to implement only fb cmnts plz give me the idea,i cant find some things in my tempelate bcoz m newbie
My blog is http://www.gulmiresunga.com
I try to implement this tips but its not working for me.
There are two class='comments' and when i add the code below this code it gives the error like this .
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:includable" must be terminated by the matching end-tag "".
Error 500
Please help me.
hey, i got this comment widget at my blog...but I have a problem with the single line code of java script for jquery latest pack stored at code.jquery.com .
script src='http://code.jquery.com/jquery-latest.pack.js'
when i add this line below head, my featured post image slider become just an image, and when i remove this line, the slider works well, but this time comment widget get disturbed.
Plz help me.
@Santosh, you've made an error somewhere and either left out or mistakenly overwritten a needed closing tag. You'll just have to not save changes and try again fresh.
@Soniya, you're using quite a few scripts on both blogs associated with your blogger account. Whatever is powering the featured posts is conflicting with jQuery somehow. I'm not quite sure what the problem is, because there are so many scripts at play I'm not terribly inclined to trace through it all.
I reviewed all my blog posts and found the script does not work in all of my posts... Hoe to fix that? See the problem here: http://cahuleanu.blogspot.com/2011/07/cetatea-alba-istorie-n-paragina.html and http://cahuleanu.blogspot.com/2010/11/republica-acum-ai-jurnal-tv-si.html
I also tried to use different browsers but got the same result.
Hi James! I've installed the comments boxes in November and all has been working wonderfully. But now that I've changed to my own domain, the twitter and facebook comments disappear when someone comments via blogger. Do you have an idea how to fix this?
Thanks so much!
my new site is emmaslunch.com
hi, Emma. maybe you should get a new fb app ID and twitter app API KEY since you have changed your web address. is that right, james?
btw, it's a nice blog you've got there Emma's mom.. :)
@Emma, it looks like your template doesn't have the comments changes in it right now so I cannot see what you're seeing. However, since you've changed to a custom domain the link to all your pages has changed. This means the FB comments box and my Twitter comments widget are looking up a different web address for each page. So, the information returned from both services returns only the entries under the new address and the old information is not.
Unfortunately, there's no good way around this and is a side effect of changing your domain name. The one thing that could be done, is to alter the code to hard include the old address and store everything under the blogspot url. It's not a great solution, but it could work.
James
Hi, James. How can I leave my independet pages without this comment box? I've seen your Contact Me page doesn't have this comment box. Can you please help me.. :)
@Paman, The tabs and pages need to be wrapped by some conditional tags for that. This line goes before:
<b:if cond='data:blog.pageType != "static_page"'>
and this one after it all.
</b:if>
I don't really have precise directions on where exactly to place these conditional tags, but that's the basic idea.
Thanks, James.. problem solved! :)
Halo,,,I dont Change Anything since it Worked, but now, it is not working on my blog, and only FB comment not working, I dont know why...please help me..
this is My blog.
http://shiroi-kiba.blogspot.com
Sorrryyy..It Worked Again, I Change this..
<***** src='http://connect.facebook.net/en_US/all.js#xfbml=0'/>
to this..
<***** src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
Thanks...
Thanks James, I'll try to get it done somehow.
@Paman, thank you! :)
James, i succeed apply it to my demo blog.. btw, how to add one tab more there? I tried it with Disqus, but it show separately out of the tab. Could You tell me how to add more tab?
It works perfectly... Thank you so much!
I juts recently add this stuff in this blog http://gagbox.blogspot.com and hey it makes this blog so amazing and unique from the other.
Hi James, thanks for the awesomeness comments tabs. but i have a little problems here. Early in installing this tab, it worked very well until every time i post new post, the twitter and facebook tab disappear. Only the blogger comments available (embedded form) and both fb and twitter comment will appear again when somebody comment on my blog using blogger comment system. How can i solved this?
I cannot say exactly how to fix it, but there is a conditional tag somewhere in your template that detects numComments is 0 and causing special code to execute.
i can't do it plz help !
http://myfavorite-articles.blogspot.com/2012/02/blog-post.html
James, please review comment #69
Hey James, great work on the encoding. I'm having problems though on my site: AguileraOnline.com it appears to be fragmented. I read through all the above comments but can't identify the problem here. Thanks in advance.
Does this code work in the mobile view of a blog?
Your tabs are awesome, but I have the same problem as Cahya Qasehnya.
Facebook and Twitter tabs won't show unless there is one Blogger comment.
Even though I changed every numComments=0 to numComments=1, it still does like that.
Could you help us, please? :D
thank-Q
can I change the theme of this comment box with css??
the fb and twitter comment sometime is not appear in my computer anyway.
@Damien, yes. Stop spamming a question to which you can get the answer by simply trying it yourself.
Pretty cool! It would so much easier if blogger, facebook and twitter just worked together.. 2 problems I see is that the comments are on different pages and the twitter one is just a tweet and I can't see other tweets. On the other hand it's pretty unique and keeps the original blogger comment system and it looks good!
There is no (class='comments') code in ''Edit HTML'' . What can I do?
Sorry, James.. another problem. Whenever I try to post a comment on my twitter comment box, it fails and says this:
Sorry, something went wrong.
The provided callback url http://paman-guru.blogspot.com/xxxx/xx/xxxx-xxx.html is not authorized for the client registered to 'http://pamanguru.blogspot.com/'.
what went wrong?
@David, yep it's far from a perfect setup. Twitter at the time I authored this didn't have a way to thread comments to a URL neatly. I've not worked with their API in quite a while so maybe it's possible in part of an upgrade. Otherwise, a database of some sort is needed to track them for long threads. It should pull in recent tweets though.
@Julia, Hard to say. I'd have to look in depth at your template code to know. I've to a large degree moved on from Blogger work though.
@Paman, My guess is your twitter app isn't setup properly. Your blog must be in the allowed URLs for the app in order for it to work. I wrote about that in setting up your Twitter app, though I think Twitter has since changed their site a bit which may make it look different. However, the same principles apply.
first, I really want to thank you alot for this topic it's very helpful. I've been using these comments for months..but recently it encounters a problem:
the default view is very good (facebook tab is my default).
see this snapshot
http://4.bp.blogspot.com/-BncZur1i_Ao/T5CjxKgBOvI/AAAAAAAABAY/ig0QqUERpik/s1600/1.jpg
but when i move around between tabs then back to my default view I found a terrible difference (check this here)
http://3.bp.blogspot.com/-5b7cqJjpScA/T5Cj6y30R7I/AAAAAAAABAg/KKcsK9zIDTY/s1600/2.jpg
waiting your response...
my blog : http://refinerypedia.blogspot.com
Note: this often happens with Google Chrome browser
Thanks James for this awesome post.
For Facebook's comment box, is it possible to change the light theme( by default) to dark theme? If yes, can you show how to do that? Thanks in advance.
myblog: komik2malaysia.blogspot.com
hello sir.. can u look at my site, http://hazissac.blogspot.com i already follow your intruction and its working great at my site.. but when i test comment using blogger comment, the twitter comment and facebook comment dissappear after that.. how can i fixed that sir? TQ.
Hello! Everything works great when I am looking at the page from my desktop. However, when I try to add a FB comment using my iPhone, that box comes up blank.
The Blogger tab and Twitter tab work just fine...
Help!
http://beautymeetsnerd.blogspot.com/
Thank you so much :)
great!!!!
thanks, but why it doesnt work for all posts? some posts, it works like a charm, for the rest of the posts, it doesnt work at all
Hello James,
Many thanks for this article.
I have followed your steps and the Facebook comment seems to work after changing the XFBML version to '1'
However the Twitter comment box reports an error when trying to comment through it. If I post a tweet on twitter containing the url to my blog then this shows as a comment in the Twitter comment box, but can't seem to comment directly from my blog via the Twitter comment box.
I did find two cases of class='comments'and pasted your code only under the first instance.
My blog is at http://pilgrimchris.blogspot.co.uk/ and I would really appreciate your help in this matter.
Kindest Regards
Chris
works good james..now I want to create a sidebar to display the comments coming. any idea?
I apply this on my trial blog. The tab menus and boxes appear. but, whenever I post a comment with blogger, they disappear. what's wrong? please check it on http://pamanguru.blogspot.com/
James, this is a nice hack. I tried another tabbed comments hack (this one with only native & facebook and it was a disaster - the code was not properly done). So props on this especially the twitter & bit.ly add-ins.
1.) I would like to know how to append the "Blogger Comments" & "Facebook Comments" tabs which are showing on my pages (works fine on posts) - see screen shot of my About Page http://2.bp.blogspot.com/-XQ_QUxdEHYc/UAIuRgnO4nI/AAAAAAAACLM/h-213yBZG8Y/s400/comments+tabs+on+blogger+pages.png
I want the twitter tab to stay, as it encourages networking.
2.)Also CSS questions: I want just a white background on Blogger comment pages - I looked over your CSS on this blog,found the classes I believed were for this hack and tried to add some css but it caused the hack to break and rendered all the tabs in descendant order on the default Blogger comment page.
Can you advise how to address this? As well as a way to remove the rounded corners of the tabs & the comments pages themselves - it doesn't go well with my overall design.
James, disregard my question #1, I had tried using a conditional tag block in the head area - but that didn't do anything. So I surrounded "fb-comments" & "blogger-comments" tabs in the template each with b: "item", and that worked without causing an error or break in your hack.
@amber, white background with on Blogger only
.comments {
background: white;
}
To get them all it's:
.comments-page {
background: white;
}
Thanks James. I appreciate your time.
Something else I noticed - on a post with lots of comments, when switching to twitter or fb tabs - the space that the blogger comments would of taken up appears as scroll-able blank space below the footer of my blog(what would be end of page). I think it is a chrome / IE problem because if I view my post in Safari and it renders normally.
thank you sir i add your comment on amber and got my black background in facebook and blogger. cheers. (^^,)
I have tried everything featured in previous questions. It still will not show up at all on my blog. Please help.
http://www.beautyagainstthebeast.com/
when i added code below this class='comments' it gives that Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: Element type "div" must be followed by either attribute specifications, ">" or "/>".
Error 500
i have done everything as well but now the fb comment box donest show at all is my blog http://www.medialivecenter.com
i don't get the comment box like you i have done all the things like you said
plz check my blog and give me advice
www.mhfrough.blogspot.com
Beautiful application! Thanks for your work.
Could you please help me with FB? Is blank, and I tried to change from 0 to 1 and does not work.
thank you very much
Sorry, the demo web ist www.comunicar.mobi
I think this is a great idea. I will try it and back for the review.
i can't do this :(
That post was very useful, thanks a lot! Just got one question: is it possible to include a Google+ tab?
Thanks,
it works at my blog :D
look so nice there, check it out please
http://kompaspost.blogspot.com
Sir I am facing a problem . All the thing is set well but when ever I make a comment in facebook comments tab it is not appearing on my timeline , even checked post to facebook check box.... any solution ???? my site is
http://mechatronicsrockz.blogspot.in/
Is there a way to include a Google+ Comments tab?
Owh yeah! Finally! Follow your advice and now i have both facebook and blogger comments. Kinda lost while implementing and trying to paste the code because im not from programming background. Nevertheless, i succeed after few tries. Thumbs up for u for sharing this post and thanks
http://molium.blogspot.com
Sir I tired your code and every thing worked up . on my blog www.ankuanand.com .But the only problem i'm getting is that the facebook comment made on web version of website is not in mobile version of the website and vice-versa .. even number are not showing
two url to verify that on my blog
web version of my blog post
- http://www.ankuanand.com/2013/11/letsfallinlove.html
mobile version of my blogpost
http://www.ankuanand.com/2013/11/letsfallinlove.html?m=1
In addition you have appeared all but comments Twitter icon appears only and I can not add a comment by
Please reply and the link to my website preview
http://alyfouaad.blogspot.com/
Post a Comment