Build Online Store! | Penguin Panda Series - New! | 4 Rules To Make Money | SEO Settings | Facebook Popup 1, 2, 3 | Mashable 1 , 2


Thursday, June 23, 2011

Facebook comments Box Instead of Blogger Comments Form


Pin It
facebook-commnets-boxThe previous post on Facebook comments box did not replace your blogger comment form but if you wish to completely remove the blogger form and use this new plugin then steps are even more simple. However I may assure you one important thing here. I am soon going to publish a script that will automatically count and display Facebook and blogger comments beautifully and will show only one form at a time. For the time being apply this new trick.

Replace Blogger Comments Form With FB Comments Box

All the steps are exactly the same as mentioned in the earlier tutorial except step#7
1.  Instead of searching for this code,
<b:includable id='comment-form' var='post'>
Search for this code,
<data:post.body/>
  2.  Just after it, paste the same code we used earlier as shown below,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
</b:if>
  • If you want to use the dark scheme then simply replace light with dark
  • To change the Comments box size, change this value width='520'
  • To change the footer credits size, change this value width:510px
  • Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px
     3.  Save your template

Hide or Pop-up Blogger Comment Form

Here you have two options. Either you can,
  1. Hide the comments box but not the comments. The box will appear only when visitors will click the Post comment link. or
  2. Hide both Blogger comments and comments box

For the first option:
A pop-up link will display both Facebook and blogger comments but will hide the Blogger comment form as shown below, SEE DEMO ALSO
FACEBOOK-COMMENTS-FORM

To do this go to Blogger > Settings > Comments   and in the comment form placement option choose the pop-up option as shown below,
pop up blogger form


Save and you are done!
For The Second Option:
If you wish to hide both blogger comments and the comment box? In that case, set comments to hide
hide blogger comments

As mentioned by Blogger Hiding the comments will not delete them but temporarily hide them from visitors.
Hit save and you are done again!

What to Do Hide or Popup the form?

The best SEO and productive advise that I can give is that you may hide the Blogger comment box only but you must display blogger comments and give users the chance to comment with any platform they may like. In short the popup option is the best. Blogger comments are crawled by search engines and they are an important part of your content so its better that you don't hide them.
With coming days I will come up with more tweaks related to this brilliant traffic gifting Facebook plugin and will try to make it more blending with some customization tips.
You must know:

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 »


Thanks for making this possible! Kindly Bookmark and Share it.
Technorati Digg This Stumble Facebook Twitter

36 comments:

Comment Page :
jsbrohi on 8:05 PM, June 23, 2011 said... #

Thanks To You About That ..................
I have a Question. If you Can Then Kindly Answer it ..........
If You Can Then Kindly Write a good Article about Backlinks ?
yhanks

Abhishek on 7:54 PM, June 24, 2011 said... #

Hi Mohammad This is a killer post thanks for sharing
regards
hackerstips.tk

Abdulsalam on 10:29 PM, June 24, 2011 said... #
This comment has been removed by the author.
Abdulsalam on 10:31 PM, June 24, 2011 said... #

Glad to see the blogger comment posted by me on blogger comments

Thanks,
www.spruceblogger.blogspot.com

Akshay [ADMIN.] on 12:30 PM, June 30, 2011 said... #
This comment has been removed by the author.
Akshay [ADMIN.] on 12:32 PM, June 30, 2011 said... #

I think the Code should be data:post.body instead of data:pos.body what you have given. Anyways my problem is in my Template there are two data:post.body So under which one should I paste?

Mohammad Mustafa Ahmedzai on 5:07 PM, June 30, 2011 said... #

Akshay

Thanks for reminding buddy. I have corrected the code. Choose the one close to which you find items near your post titles or items below posts.

Ziad Mestarihi on 12:28 PM, July 05, 2011 said... #

Hi,
i have done all the steps but in the end after i click save i got this msg :

XML: Attribute "xmlns:fb" was already specified for element "html".

what should i do, can you guys help plz ?

Gryphon Hall on 10:21 AM, July 11, 2011 said... #

Thank you so much for this tutorial. Everything is working as expected, except in one regard (just a minor annoyance, really). Why does an error message occur "Warning http://__________.blogspot.com/2011/07.testing-2.html is unreachable." appear?

Mohammad Mustafa Ahmedzai on 11:38 PM, July 11, 2011 said... #

@Ziad

That means you are adding the code twice there. Please go check that code and see you are adding the code after <html only once

@Gryphon
Where do you get this error? In facebook box or while saving your template?

The URL has no proper address and does not exist. Make sure you add the box in your active blog

Ziad Mestarihi on 8:55 PM, July 12, 2011 said... #

Hi again Mohammad..
thanx for you answer,that's right i checked my template i find the code added after <html already,
how can i fix it in order to add facebook comment box ?
thnx for you help
best regards

Mohammad Mustafa Ahmedzai on 11:51 PM, July 12, 2011 said... #

@Ziad

See that this code is added only once:
xmlns:fb='http://www.facebook.com/2008/fbml'

Delete the repeated one and save your template. The plugin will work just fine.

Sahil on 7:46 AM, July 23, 2011 said... #
This comment has been removed by the author.
Sahil on 7:55 AM, July 23, 2011 said... #
This comment has been removed by the author.
Disney Go To Girl (Amanda Ficili) on 5:34 AM, July 27, 2011 said... #

thanks so much for this tutorial! Amanda @Disney Go To Girl .com www.Disneygotogirl.com

Apache on 5:42 PM, August 01, 2011 said... #

somebody tell me that how to moderate these comments without app id.

I also tried the standard procedure to add comments according to April 11 instruction release by facebook. the comments box was added but all comments were appearing on all pages :D

тяσנαη нα¢кєя on 1:48 PM, August 24, 2011 said... #

Its Not Work In my Side

Joshua LaBello on 1:30 AM, August 26, 2011 said... #

Does anyone know any code that would allow these facebook and blogger comments to always be shown with each post - without having to click on the 'comments' link?

Joshua LaBello on 1:30 AM, August 26, 2011 said... #

By the way, my site: http://www.TattooConfessionals.com

Conor O'Brien on 1:39 AM, August 29, 2011 said... #

Fangoooo

By PeliculasTube on 10:55 PM, September 19, 2011 said... #

sorry for my english can you tell me how to put tabs in the comments, facebook / blogger, like this image demo please?

http://2.bp.blogspot.com/-CF9og_u_Bh4/TneBOgmqhMI/AAAAAAAACj4/LI3QMWyQnmE/s1600/Image%2B1.png

Ashish on 2:03 PM, October 20, 2011 said... #

Thanks for sharing this information and resources its really help full for me with the help of this we can improve our web design and development.
Web Design Company India

Admin on 3:59 PM, October 22, 2011 said... #

Muhammad i hv followed your steps but fb comment box is not displaying..
Only default blogger comments box is displaying......

Please solve my problem ... THANKS

Also check http://www.accountancystudents.net/
for confirm

Haqverdi on 7:09 AM, November 17, 2011 said... #

how can I make it appear on homepage also, not only when you go to post itself?

pradeep nagar on 10:18 AM, November 18, 2011 said... #

Thank You

Your blog is very informative

SEO Training Noida

Neeraj Grover on 7:22 AM, November 28, 2011 said... #

You Know I Can't Even Find

nor

What Should I Do ?
Blog URL : http://roverit.blogspot.com/

Neeraj Grover on 7:27 AM, November 28, 2011 said... #

@Neeraj Grover OH Sorry I Found It Forgot To Expand The Widget Templates !
Thank You

Shafiq on 12:46 AM, December 08, 2011 said... #

@jsbrohi?

Andover '09 on 10:36 PM, January 05, 2012 said... #

Hi Mohammad,
I can't find in my code

I'm using the new blogger interface.

Ms. Williams on 2:59 AM, January 31, 2012 said... #

I really like this. It works great, but I have one question. It only appears if someone clicks the title to the blog. It doesn't automatically show up at the bottom of the post. If you visit my site www.peridotdynasty.com you will see what I mean. I want it to be above my sharing buttons, but it is not.

kingU on 6:23 PM, February 11, 2012 said... #

nice post...your blog is awesome..iam also blogger and i apply many tricks on my blog by reading your post..thnx. check my blog http://newsboxblog.blogspot.com

Shivesh Chandra on 6:05 PM, February 12, 2012 said... #

Hey i jst used this trick but there is some problem created that is i select radio option from show to hide, then both of the comment box has been hidden... please resolve this.. http://sptricks.blogspot.com

Hacker on 4:10 PM, February 16, 2012 said... #

Hehehe.

Kyle Gershman on 3:07 AM, February 20, 2012 said... #

Thanks for such an interesting article as I'm considering replacing my blogger comments with facebook connect. Can you explain why you haven't done this with this very blog?

Unknown on 4:23 PM, April 29, 2012 said... #

Hello friends, I've discovered best money making programe that its really paying & i have been paid & i think it wil be good to share it with everyone. U earn money in d programe without selling or refering, duo if u want to increase ur earning & make it grow fast, then u involve refering. Its a programe that u can join with a minimum of $10 & earn 2% daily. U can earn in d programe by buying a position & each position cost $10, d more u buy d more ur earning. Each position u buy expire or marture after 75 days, withdraw are daily direct to either ur alartpay, libertyreserve or perfectmoney account. U wil get an instant $10 when u join d programe. U can use that $10 & buy 1 position & start earning 2% daily. Mean while u are advice to buy more in order to earn big. Pls click here http://adv.justbeenpaid.com/?r=bhiix90zjf pls when u join, try & take a day to study d programe, dont just be in hurry, just try read every post in d site. Dis programe is d right place 4 u to invest

Wins on 10:14 AM, May 04, 2012 said... #

Hi Mohammad,

Thanks for the interesting article.
Just a question, does your Facebook Comments code work for the dynamic views that Google just introduced recently?

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
Mohammad

 

Recent Posts

Join Me On Facebook

8600+ Followers

Join The Team!

Licensed Under CC

Recent Comments

Follow Me On Twitter

2601+ Followers

My Blogger Tricks (MBT) © 2012. All Rights Reserved | Contact |