Facebook Comments plugin has rapidly replaced third part commenting system like disqus and others. They are now also being crawled and index by search robots. Our first tutorial on facebook comments box and Facebook comment count was widely appreciated by a large audience and helped most of you. Today we have something even more interesting. Thanks to James we learnt a new way of displaying facebook comments in blogger blogs. We will be using a different approach here and only using the javascript code and CSS code from james and keeping other settings entirely different.
In today's tutorial we will learn how to show both facebook and blogger comments inside tabs that can be easily switched and toggled. The comment count will appear inside the tabs with an icon thus letting the visitor a much clearer option of commenting. The tabs are clickable to behave like buttons. The tabs act more like two separate pages that let the user decide which commenting system to choose. The tabs are created using normal JavaScript code used for toggle view. Its extremely easy to install if you follow this tutorial carefully. I am sure most of you were waiting for this therefore it would be fun sharing it today.
Create a Facebook App
In order to control and keep a backup of the comments made on your blog you will need to create a FB application. The steps of creating this app is very simple. Simply follow these easy steps:
Note: Facebook has changed its layout interface so the screenshots could look a little different from current interface. Steps are exactly the same.
- Go To Facebook Developers Page
- Submit your blog URL and give it a name. Keep Site name as your "Blog Title" and Site URL as your "blog address"
3. Hit "create app" button and proceed
4. After submitting the security check code you will see this page,
5. Save that FACEBOOK APP ID in a notepad because we will need that later. Now Click the link near the top-right corner of the same page that says "Developer Dashboard"
6. One the new window that appears click the Edit Settings link ,
7. Then go to Website option and write your Site Domain as blogspot
8. Save Changes and jump to the next step of this tutorial
Creating Tabs For Facebook Comments in Blogger
For blogger comments to display next to tabbed facebook comments, your blogger comment form settings must be set to embedded below post. To show blogger comments below posts do this:
- Go To Blogger > Settings > Comments
- Set "Comment Form Placement" to Embedded below post
Now follow these easy steps one by one:
- Go To Blogger > Design > Edit HTML
- Backup your template
- Click the "Expand widget templates" box
- Search for <head>
- Just below it add the following code,
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='Blog LOGO Image Link' property='og:image'/>
<meta content='FACEBOOK APP ID' property='fb:app_id'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/><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>
- Replace Blog LOGO Image Link with the image link of your blog logo. Your logo size should be as small as 30px by 30px in size. If you don't want a logo to display whenever someone shares your comment on his wall then simply delete the yellow highlighted code.
- Replace FACEBOOK APP ID with the numeric facebook app Id that you were asked to note down. You can find your Facebook App ID in settings page of the app you created earlier.
6. Search for <html and replace it with the following code,
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Note: Give a space at the end of the above code.
7. Now Search for ]]></b:skin> and just above it paste the following CSS code,
/*--- Tabbed Facebook Comments By MBT ----*/.comments-page { background-color: #f2f2f2; width:450px;}
#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;}
- To change the background colour of tabs content area simply edit #f2f2f2
- To change the width of the comment box container change width:450px;
8. Next search for this
<div class='comments' id='comments'>
After the first occurrence of the above available code paste this code:
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-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='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by
<b><a href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>
</div>
</b:if>
</div>
Note: If the above code gave errors then delete the red highlighted lines from the code above.
- To change the width of the comment box size change the numeric value width='450' . Keep it equal to the width of the comment box container we set earlier in step#7.
- To change the footer credits size (i.e. Facebook Comments by blogger Widgets), change this value width:440px
- Keep a difference of 10 pixels between the comment box size and footer size. For example if you set comment box-size to width='450' then set footer-size to width:440px
- To change the text inside tabs edit Comments for Facebook Tab and Comments for Blogger Tab
9. Save your template and you are All Done!
Visit your blog to see it working just fine. :)
Note: If you have activated blogger threaded comments then the Tabs will display only when at least one comment is posted in blogger
Moderate Comments
In order to mark any comment as spam or remove/hide any comment you need to log into your facebook account and then visit this page:
You can moderate all comments at once without visiting every post in your blog and moderating comments individually for every post.
How To allow Other Login Providers
With Facebook Plugin you can choose to accept comments even with Yahoo, Hotmail or AOL. To accept comment from third part providers simply click the Settings link on Facebook comment box inside any of your post and click the checkbox that says "Other login providers"
Note: The Settings link or Moderator view will only appear on your new new posts or on posts with less than 2 Facebook comments posted. There fore in order to make a one time settings, simply visit your fresh post and edit it from the facebook tab.
Credits
This tabbed commenting system has been enhanced and publicized by MBT blog by using scripts of James. If you wish to share this post with your readers then kindly link back to this post as the only favor for our efforts.
Need Help?
I am sure this post looks a little too techy but its made as easy as possible. If you ran into a trouble then just let me know by posting your query. The next part of this series will teach you how to display facebook and blogger comments count on homepage in a presentable way. Peace and blessings pals! :)
Filed Under: Blogger Widgets and plugins, Facebook Comments Box
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you
Subscribe to our regular Email Updates!
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Nice Post :)
ReplyDeleteWaiting for the 3rd part of this series
www.skfanclub.com
thanks a lot for this post thanks mohammed
ReplyDeletethank for it ,nice job
ReplyDeleteI like this one..!!
ReplyDeleteRegards
Pradeep
nice one and waiting for such post
ReplyDeleteHello, I'm having trouble with an error code. I've followed your instructions but this appears when I click "Preview"...
ReplyDeleteYour template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "b:includable" must be terminated by the matching end-tag "".
Error 500
Can you please help?
complicated to install..... but nice.. http://myblog0411.blogspot.in/2012/02/love-valentines-day-and-their-facts.html
ReplyDelete@Lisa
ReplyDeletei am having the same issue!!
Doesn't work for me :( my blog is www.gizmotraker.com
ReplyDeleteOopsy the third step says: par3...!!
ReplyDeleteDoesn't work for me. I have the same problem with @lisa
ReplyDelete@Lisa and @Sanket
ReplyDeleteOops humble apologies I had mistakenly written the wrong cod ein step#8. I have updated it and its now working just fine. If you received errors just remove the red highlighted code from step#8
how about loading blog page
ReplyDeleteafter you using tis plug in?
www.zulkbo.com
@Mohammad Mustafa Ahmedzai
ReplyDeleteThanks! The code works now. But when I've tried to click between the tabs, they seem to get stuck. I can't get back to the FB tab once I've clicked on the Blogger tab? You can see here: http://lisadiederich.blogspot.com.au/2012/03/maternity-shoot-peta-baby.html#comment-form
Also, is there a way to have the comments box appear on the main page under each post (instead of having to click the "Leave a comment" link? Sorry to bother. Thanks! :)
This comment has been removed by the author.
ReplyDeleteI have activated Facebook Comment Box previously. So what can i do???
ReplyDeleteThis comment has been removed by the author.
ReplyDeletewhy in my blog? have followed the instructions and successfully but when I look at her blog does not look like the existing demo.
ReplyDelete@Lisa
ReplyDeleteThe tabs are click able but in your case as soon as the user brings his cursor on the text the tabs get inactive. I just hope you added the code in step#8 as given without making any changes to div sections.
You can display the plugin on homepage by removing this line from step#8
<b:if cond='data:blog.pageType == "item"'>
and the second last closing b if tag. which is
</b:if>
However I would not recommend displaying comment boxes on homepage.
@মোঃ নেওয়াজ মোরশেদ (বিকন)
If you can understand the tutorial above then you can make necessary changes to create this look else you may remove your comment box and re-add it by implementing the above tutorial. Your comments wont get deleted because your Facebook Application ID is not being deleted and will store all your comments and display it upon fresh installation again.
@Wartabeta
After the introduction of threaded comments, Blogger team has really messed up the codes. The above tutorial is the easiest way to add this plugin. A little HTML knowledge will enable everyone to add it correctly. Since template codings are different for each therefore small changes will occur.
your ex. not work with internet explorer 7 ,8,9 whay?
ReplyDeletebut work with my blog
http://www.tqarob.com/
Much respect for you .Because you are expending of coding blogging in our community .i envy on your self. . .
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHow to make the post image thumbnail of every post appear as the blog logo for that post whenever a comment is posted on the post. Because a single logo for all posts caused a lot of problem and appeared on almost everywhere for every widget that required a thumbnail and when I removed the blog logo part of the code, the posts like or sent to facebook appear without any snippet or thumbnail and only the post url is displayed. Please Help!
ReplyDeletegr8 and i like it i have been looking for i did it as well as i can but it showing the blogger comment box below the tab there showing 2 below facebook u can see in this pic so pls help me thanks this is my blog medialivecenter.com
ReplyDeleteeven this code showing on top of header of my site meta expr:content='data:blog.pageTitle' property='og:title'/> pls help medialivecenter.com
ReplyDeletePerfect tips. I tried but It wasn't shown as the demo. The old blogger comment box still showing under the FB comment tab. And I can't get back the previous tab after clicking on one the tabs...
ReplyDeletePlease fix them my bro!
Best regards.
This is really nice, but I can't figure it out because facebook has changed so much. Can you update??
ReplyDelete:( I followed your instructions and it's not showing on my blog..what have I done wrong :( those24littlehours.blogspot.com
ReplyDelete@Haleyknitz
ReplyDeleteyup..when i open fb app developer, it doesn't show the one in your tutorial
am having trouble with this..
ReplyDeletein FB's new layout interface, i CANT SEE any BOX asking for SITE URL.....Am sure it'll be there...bt cant find it out yet...
pls help me for this...
Just a question:
ReplyDeleteIf I have instead of blogger commenting setup the Disqus how I should proceed?
Thanks!
What makes Mybloggertricks stand among other tutorial blogs is the LIVE DEMO. Very helpful and unique. Thanks again for this trick.
ReplyDeleteIs there a way to get such a thing working with Dynamic Views? Thanks so much! Please help.
ReplyDeleteI improved this tutorial and it works for me. See the improved tutorial here http://sag-3.blogspot.com/2012/03/tutorial-add-facebook-and-blogger.html
ReplyDeleteMine works incomplete, fb tab dont hide BLOGGER POSTS
ReplyDeletehttp://www.jaragua.tk/2012/03/desde-villa-jaragua-miss-xaragua-2012.html
This comment has been removed by the author.
ReplyDeletei try all the process but didnt change anything in my blog.. :(
ReplyDeleteCan u pls figure out why? me blog http://cebisanku.blogspot.com
Thx.
Really great tutorial, but it won't work on my blog.
ReplyDeletehttp://moja-kuhinjaa.blogspot.com/
Little help?
I Have Done It All Perfect, But Its Showing Both Facebook And Blogger Comments Together. Check The ScreenShot Below
ReplyDeletehttp://dl.dropbox.com/u/48496881/comment%20form.bmp
I want to use blogger default comment first & followed by fb comments as hidden! but page loads both the comments at the same time! what to do? example here - http://www.nilapennukku.com/2012/03/blog-post_24.html
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteCan't find where to change the language settings for links i.e.
ReplyDelete'like' 'comments' 'reply' etc...
Thanks in-advance.
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteOnce I click on blogger comments, I can't click on facebook comments anymore... I lose the facebook comments until I refresh the page. Does this have anything to do with the fact that I have comments embedded only? I didn't see an option in blogger that said below the post. http://www.theuninformedamerican.com/
ReplyDeleteHi, I'm having the same problem as Lisa (comment #15), I can't click back on the Facebook tab once I click at the Blogger tab. I did remove <div class='clear'/>
ReplyDelete</div> from step #8, but the problem persist.
I think this is a nice tutorial, and thank you for your time explaining it!
Hi,
ReplyDeleteNeed help with 2 things
1. Object at URL 'http://freemp3boy.blogspot.com/2012/04/tupac-shakur-me-against-world-india.html' of type 'article' is invalid because the given value 'data:blog.postImageThumbnailUrl' for property 'og:image:url' could not be parsed as type 'url'.
I need the post image to show when sharing to facebook.
2. This comment has not yet been published to Facebook comes up instead of automatically allow person to publish their comment on facebook. And also, it the Post To Facebookcheckmark is not automatically checked. Take your time no rush thanks and great job, you have the best Blogger Widgets, Tips and Assistance blog, youre number 1
@Carolina Patrício
ReplyDeleteHi Carolina,
The same thing happened to me, so I carefully retracted my steps and it seemed to work. I just did the whole steps again and it worked. Just make sure you don't delete one single piece of code and check your blogger comment settings.
salam
ReplyDeletegreat post bro...
It works on my blog : http://howtomakez.blogspot.com but I got Only one problem, but first I wanna make one thing clear, which is the problem which some people are facing:
the code you highlighted in RED i.e.
<div class='clear'/>
</div>
dont delete this code if you are facing and problem in saving the template with this code included, its important because when we try to switch back from blogger comments to facebook comments, we cant... the solution is:
Just remove the slash which is just after the <div class='clear'
so it leaves us with:
<div class='clear'>
</div>
which just works perfect B-)
so use
<div class='clear'>
</div>
instead of
<div class='clear'/>
</div>
undefinedTHE RED ONE)
and now come to my problem. When i click on the blogger comment tab, it shows the blogger comments only but when i click on the facebook comment tab, it shows both the blogger comments and the facebook comments :-undefined i think there is some problem with step5 - script2 , , , ,or , , , step8
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggleundefined"#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggleundefined"#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>
Thanking you in anticipation
PS. ♥ GGGGRRRRRRRRREEEEEEAAAAAAAAAAAATTTTTTTTTTTTT blog ♥
Hi Im getting "This comment has not yet been published to Facebook. Publish Comment"
ReplyDeleteBut the Publish Comment is transparent. How do I get rid of the entire message so that it doesnt ask people who try to post a comment?
one question Sir.. Why my older post blog didnt show the widget>?its only be seen in new post my blog http://sempoicornerdisini.blogspot.com
ReplyDeleteNot working for me ??? :( i always try ur tuts but any of them never work for me... irritating .. >.< :(
ReplyDeleteHelp if you can ... no errors but no comment box below post .. :(
does not work
ReplyDeleteHi
ReplyDeleteDid everything according to instructions, парсер блоггера, There are no errors visible, but the comments form does not appear.
Help please.
http://www.kinomelochi.com/2012/03/blog-post_31.html
any update on this?
ReplyDelete@-=JOBG™=-
ReplyDeleteI think the topic is closed by the author
First of, thanks for the tutorial!
ReplyDeleteI installed it all like you said, but I don't see tabs. Neither on Firefox, nor Chrome; nor Safari.
There's just following:
FB logo then "comments"
Blogger logo then "x comments"
and "facebook comments by Blogger Widgets"
I did a lot of tweaking on my blog (and also a coder), so that might be the issue, but I'm unsure what to do next? Or maybe it's the FB app that I did not configure right? It was different in presentation that in your tutorial.
Here's my blog: http://petitplatbysk.blogspot.fr
cannot find div class='comments' id='comments' in template html
ReplyDelete@Engr AH
ReplyDeleteI have the same problem. You have found a way to fix this?
Hi,
ReplyDeleteFirst i want to thank you for your tutorials and tricks it was helpful
I had little issue about this tutoria, I want to show the facebook tab without having to add one comment in blogger, i tried differents ways like removing this code :
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggleundefined"#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='clear'/>
</div>
from the code that i had to paste under this line: <div class='comments' id='comments'> but it didn't work
Then i tried to remove blogger threaded comments by following your tutorial : http://www.mybloggertricks.com/2012/01/how-to-remove-blogger-threaded-comments.html
but it didn't work neither
So i request your help in order to solve this, i'll be very grateful
Thank you,
Have a good day.
Help i am having this error
ReplyDeleteError parsing XML, line 2055, column 3: The element type "b:includable" must be terminated by the matching end-tag "".
@Udit Kakar me too got the same problem . I followed your every step . But when the template is saved it gives an error
ReplyDeleteYour template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "b:includable" must be terminated by the matching end-tag "".
Error 500
Can you please help me ?
Hey it keep displaying the blogger comment,
ReplyDeletehttp://i.imgur.com/iitRt.png
what should I do?? Please help!!
This comment has been removed by the author.
ReplyDelete@Gab Cepe Roy
ReplyDeletehello .
we same problem with your..
this is =>
Why my Facebook no moderator at there ?? and why blogger comment same at Facebook comment .. please help me ..
my blog is http://viral2u.blogspot.com/2012/05/test.html
please checked with me.. okey.
and send at me problem at my email => dealertopup@yahoo.com
tqvm
please visit my blog another
Http://www.esosial.net/
http://www.ads-fb.blogspot.com/
so, no one success with this "extremely easy to install" tutorial?
ReplyDeleteUpon clicking the link Facebook Developers Page you provided at the beginning of this tutorial, a different Facebook page opens and then a box pops up with different questions.
ReplyDeleteInstead of Sitename and Site URL that you said in this post, the questions are App Name and App Namespace.
For the preciseness of your content, can you please give a few instructions on what to enter on those boxes?
Because I'm afraid your guide is no more valid on the new Facebook page at which users land after clicking "Facebook Developers Page" you mentioned above.
I think it's not only the layout of FB that has changed but the link of the "Create App" for your tutorial. Users get lost right at the very first page of Facebook Developers area.
Please just give us a little bit new instructions on that new page.
Thank you very much in advance.
I used the manual methods and it works.
ReplyDeleteDo visit facebook developer's site, it's awesome!
http://developers.facebook.com/docs/reference/plugins/comments/
I have added given your fb comment code but i received template error like
ReplyDeleteYour template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: Attribute "xmlns:fb" was already specified for element "html".
Error 500
This comment has been removed by the author.
ReplyDeleteIts not working... please chech in my blog http://kmdeepakkumar.blogspot.com
ReplyDeletesorry but not create app here have some efferent to create app and i con't create these
ReplyDeletePlease help how to post html codes like yours that i can put the code and my visitors can copy the code. thanks!
ReplyDeleteNo doubt why you get so many blog comments.
ReplyDeletefunny statuses
i've directly follow the step and the form shown nicely, but the problem is blogger form box still keep appearing below fb form box, even i choose fb tab...
ReplyDeletecould you find the problem please, here mmy demo blog http://masihcoba1.blogspot.com/2011/04/this-is-new-post.html
@admin to make the app, look at this link http://jensontaylor.blogspot.com/2012/03/integrate-facebook-comments-for-blogger.html
ReplyDeleteGreetings Bro,
ReplyDeletePlease i tried using this on my news blog here http://storiestrendingnow.blogspot.com/
but after following and implementing the steps i couldn't see the facebook comment on my site, i made a comment to test it yet couldn't see it.
Pls i don't know if my template doesn't support it or what the problem is. Pls help me out on this.
Thanks.
@Desire, @volos_86
ReplyDeleteI have the same problem... there was no error at all but no comment box showing too..
after the second occurrence i added and removed the red highlighted tags. Worked fine. Thankyou! www.hsquares.in
ReplyDeleteHi Mohammed,
ReplyDeleteInformative post indeed. I followed all the steps given above but was facing a problem.In the link given below:
I can see that both facebook & blogger tabs are present.
I cannot toggle between the two tabs as FB tab is frozen.So therefore I cannot post comments using FB.
http://thelaughingmessiah.blogspot.com/p/notice.html
Would be gr8 if u could solve this tech issue.
Thanks in advance !!!
i had trouble installing this but i found a very good website and simple to install, plus it looks cool on your page http://intensedebate.com I use it on my site http://r4ndomshit.blogspot.co.uk/ check it out for yourself. hope you dont mind me posting this admin.
ReplyDeleteHi Mohammed, this is Ahmed...thanx for ur hard work..i have a problem...i followed the steps but the facebook comments box doesnt appear as well as the tabs...nothing changed at all...
ReplyDeletemy blog is Arabic+im using un official template+ before i started implementing this tutorial i DELETED the facebook comments Box and came here to add it again...plz help
forgot to put my link WWW.Vitameen.Net
ReplyDeleteNice post! Realism challenge 3 playing card
ReplyDeleteI have error like this ! >>>
ReplyDeleteYour template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "b:includable" must be terminated by the matching end-tag "".
Error 500
Many please help! I did everything as described and yet the comments box does not appear. If anyone has any idea, I will be grateful to share, here is the address of my page: http://www.utopia-bg.com/
ReplyDeletea
ReplyDeleteHy, I wanna ask something.
ReplyDeleteif theree's no
<... class='comments' id='comments'>
in my template..so where do I can place the script code in step #8??
please help me
bro i was using blogger and facebook comment system at once, now i switched to disqus and all my FACEBOOK comments are removed, what can i do? the question is how can i implement both systems at once? facebook and disqus
ReplyDeletecan u update this? please :)
ReplyDeleteHelp if you can ... no errors but no comment box below post .. :(
ReplyDeleteonly blogger comments are shown, please help me i think there is some problem....
email: irmemon225@gmail.com
blog: itwebister.blogspot.com
I followed the steps and successfully integrated the facebook comment with blogger.The only problem I have is that the tabs are displaying on top of each other instead of side to side.How do I fix this problem? My blog is www.koidemoblog.blogspot.com
ReplyDeleteHi please help me,
ReplyDeletei am having a problem on tabs, when you click the fb comment tab it shows both fbcomment and blogger comment box but when i click blogger comment tab, the facebook comment box will hide,
i would like to hide blogger comment box when fb comment box was shown, how to do it? Im a bit confused,, thanks..
Whoooo
ReplyDeleteWhoooo
Whoooo
It's awesome........................
It worked good on post pages. Thanks for that. But there is a problem as well. A portion of it appears on homepage also which makes the homepage ugly. So, I hid posts from home page. Yet it appears on any posts' list e.g on posts by label.
ReplyDeleteYou may see it yourself on my blog http://iloveshibir.blogspot.com/search/label/bcl.
How to hide everything related to the comment box on homepage and search label pages etc?
Thanks a lot !!! i was trying to include the facebook comments for my blog for a quite long time .most of the tutorials where not working fine,and was not able to sort it out the issue, finaly your clean descriptions helped.. thanks !!!!!!
ReplyDeletehttp://www.3daspirants.com/
This comment has been removed by the author.
ReplyDeleteHello Blogger tricks, Thanks for your great posts. I have visited your blog a month ago and your tricks and design have been adopted to my blogger. Just one thing I have to solve.. i hope you can help me.
ReplyDeleteand you commented this Note: If you have activated blogger threaded comments then the Tabs will display only when at least one comment is posted in blogger
Yes I have activated blogger threaded comments and I don't understand how to get rid of threaded comments in my blog. If you have any idea or the post about this issue, please let me know. I really appreciate your kindness..
Heejae Kim
http://partskor.blogspot.kr/
<b:include name='nextprev'/>
ReplyDelete</b:if>
</b:includable>
<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:voidundefined0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframeundefined'<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
<!-- 페이스북 코멘트 MBT -->
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggleundefined"#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
ReplyDelete</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggleundefined"#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-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by
<b><a href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>
</div>
</b:if>
</div>
<!-- 페이스북 코멘트 MBT END -->
Sir! i have a question
ReplyDeleteis there is any side effect of this facebook comment box, Like SEO of google Ranking?
when i click at the blogger tab the facebook comment box disappear permanently. tell me what shall i do?
ReplyDeleteThis comment has been removed by the author.
ReplyDeletethanks for this help but after all setup unfortunately it not working in my blog mithilaworld.blogspot.com or not show any error,please email me dklove84@gmail.com
ReplyDeleteCan you do an update with the new Facebook layout interface? I'm having a hard time creating the app. Thanks.
ReplyDeleteCan You Check My Blog... Still Old Comment Box Is Appearing.
ReplyDeleteMy Blog. www.tollyarea.com
this worked thnks.
ReplyDeletevoodoo spell has amazed me as I have seen results from everything he has done for me, often quite fast. While I have been to other spell casters who I believe tried their best; voodoo spell simply is the best, being truly gifted and having written the book on it. In addition, his integrity truly sets him apart in the field as he has told me several times I did not need a spell when he just as easily could have said I did. He is a truly kind and generous person who took time out on a weekend recently to help with a difficult ongoing case for me which brought him no personal gain. His work resulted in an all out miracle with a man I have been in love with for two years. voodoo spell rocks!. i so much believe in this man here is the contact in case you have any problem, oduakar1@live.com, God bless
ReplyDeleteHey, great post and it really helped me get the facebook comments working on my blog. I wanted to get some SEO out of it but the iframe issues (search engines won't crawl iframes) made this impossible and, of course, the only way I could find to pull the text of the comments was through php scripts (which blogger doesn't support). Soooo, i wrote a php script and threw it on my server and then called it as an object on my blogger template and viola! - it worked.
ReplyDeleteIn kind, I thought I'd share it with you and maybe add a little value to your already great post. Just paste this code in your blogger template above or below the commenting code and it should be good to go. If you want to view the results temporarily change the opening div tag to just <div> and refresh the page(s) to see how Facebook feeds the text. Hope this helps some of you!
One more note, the php script grabs the referring URL(of wherever you've put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) - I thought that was a nice touch ;-)
<!-- BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes -->
<div class='separator' style='clear: both; display: none; text-align: center;'><object data='http://sukithookahs.com/get_comment_text.php' height='60px' type='text/html' width='450 px'>
</object></div>
<!-- END Graph API comment pull and text insertion in an invisible div for SEO purposes -->
A final note, I AM NOT a programmer so this isn't the prettiest thing in the world, but it works great...
Hey, great post and it really helped me get the facebook comments working on my blog. I wanted to get some SEO out of it but the iframe issues (search engines won't crawl iframes) made this impossible and, of course, the only way I could find to pull the text of the comments was through php scripts (which blogger doesn't support). Soooo, i wrote a php script and threw it on my server and then called it as an object on my blogger template and viola! - it worked.
ReplyDeleteIn kind, I thought I'd share it with you and maybe add a little value to your already great post. Just paste this code in your blogger template above or below the commenting code and it should be good to go. If you want to view the results temporarily change the opening div tag to just <div> and refresh the page(s) to see how Facebook feeds the text. Hope this helps some of you!
One more note, the php script grabs the referring URL(of wherever you've put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) - I thought that was a nice touch ;-)
<!-- BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes -->
<div class='separator' style='clear: both; display: none; text-align: center;'><object data='http://sukithookahs.com/get_comment_text.php' height='60px' type='text/html' width='450 px'>
</object></div>
<!-- END Graph API comment pull and text insertion in an invisible div for SEO purposes -->
A final note, I AM NOT a programmer so this isn't the prettiest thing in the world, but it works great...
i have a problem in <html xmlns:fb='http://www.facebook.com/2008/fbml'
ReplyDeleteplz help me
done, but have something big mistake... facebook & blogger same area, how to move? or hide blogger comment?? ohsemtv... thx
ReplyDeletehas anyone figured out how to remove the blogger comment box from below the facebook comment box?
ReplyDelete@BIJENDER SE/\/SEXvery complicated to install... and give me an error... no... tired to do that... i'am fail.... my blog template didnt match
ReplyDeleteThanks for sharing yours knowledge.
ReplyDeleteGuia Blogger
Can You Add It to my Blog Template Plzzz :)
ReplyDelete