Facebook comment box for blogger 2013
I had devided the entire tutorial into two different part:
Phase 1: Creating Facebook App ID.
Phase 2: Installing Facebook Comment Plugins inside Blogger Template.
If you had already created your Facebook App id than you can skip the first phase, go directly to the second phase. So lets start the tutorial.
Creating Facebook App ID.
Update : How to Create FaceBook App Id For Website 2014? (only for custom domain)
Step 1: Go to Facebook Application Page.
Step 2: Click on “Create New App”.
Step 3: One popup appear in which you required to Write “App Name” and click on “Continue” Button.
Step 4: Now fill up the details ( See following Screenshot )
Note:-
-
- If you are using free sub-domain for your blogger blog (xyz.blogspot.in), than in Apps Domain Field Add following domain names.
blogpost.com, blogspot.ae, blogspot.mx, blogspot.in, blogspot.pt, blogspot.jp, blogspot.ca, blogspot.de, blogspot.it, blogspot.fr, blogspot.se, blogspot.co.uk, blogspot.co.nz, blogspot.com.es, blogspot.com.br, blogspot.com.ar, blogspot.com.au
- In Field of “Site URL:” Don’t forget to insert http:// in your blog address (https://www.heerentanna.com/).
(Find App Id : In above screenshot highlighted text is my application id, you need to copy your own id.)
Adding Facebook comment blogger plugins under Each blogger Post.
Step 1 : Login In Blogger Account.
Step 2 : Backup Your Blogger Blog. (Learn how to backup Blogger Blog)
Step 3: Navigate Blogger Dashboard > Go to Template > Edit HTML.
Step 4: Find Following code by pressing CTRL + F.
<html
Replace <html code with following code.
<html xmlns:fb=’http://www.facebook.com/2008/fbml’
Step 5: Now find following code.
<div class=’post-footer-line post-footer-line-3′
or
<p class=’post-footer-line post-footer-line-3′
or
<data:post.body/>
Step 6: Now generate code using below Facebook comment code generator, Copy code and paste it just below <div class=’post-footer-line post-footer-line-3′> or <p class=’post-footer-line post-footer-line-3′> or <data:post.body/> code.
Step 7: Find Following code.
</head>
<meta expr:content=’data:blog.pageTitle’ property=’og:title’/><meta expr:content=’data:blog.url’ property=’og:url’/>
<meta content=’Tips Via Blogging‘ property=’og:site_name’/><meta content=’LOGO-IMAGE-LINK‘ property=’og:image’/>
<meta content=’YOUR_APP_ID‘ property=’fb:app_id’/>
<meta content=’http://www.facebook.com/heerentanna‘ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>
- Replace Tipsviablogging With Your Own Site Name
- Replace LOGO-IMAGE-LINK with your blog logo image URL.
- Replace YOUR_APP_ID with your Facebook app id.And Lastly replace http://www.facebook.com/heerentanna with your own facebook page URL.
Note:
- Navigate blogger Dashboard > Select Blog > Setting > Posts and Comments > Find Comment Location Field and select Hide option from Drop Down Menu > Click on Save Settings button (Find it on top right corner.) that set. Congratulations you had completely install your Facebook comment box that will going to appear on each blogger post.
bro when anyone can comment on fb….this comment shown on blog site….nor they comment on blog using fb….
bro i need looks like ur fb botton that was shown on ur comment box below…
bro…how this tutorial helps me can u describe me in details ….here or fb…
Blogger Heeren Tanna said… bro in one simple line your solution is on below link, just visit it you will find your solution.Facebok, Disqus comment blox along with blogger comment.
Great detailed information, I ll be visiting you more frequently, here is
very interesting information.
e-commerce consultancy
Thanks a lot for taking the time to discuss this,Thanks a lot giving such a nice information. keep it up……..
mobile website template
Thanks for the info.
Will like to try this one.
Paritosh
Really nice Info
I don’t know why but FB comments box is not working properly on my blog HPBolly
The blog posted is very interesting from all aspects and it will surely benefit the readers by all means.
Your Space Web Design offers a wide range of services for both professional and semi-professional companies. Founded in 2010, we have quick established ourselves as one of the south east’s leading web service providers.If you are looking for Web Designing & Development services then visit our website: http://www.yourspacewebdesign.com/.
web designer wexford & wexford web design
ERROR:
The comments plugin requires an href parameter.
What to do?
When I hide the bloggers box, facebook comment box also disappear. Any help?
nice 1, i’ve try and it work perfectly fine. thank for the info!
u can check it out!>> http://miratouch.blogspot.com
i’ve tried. but in step 4, i did’t have any of it.. help me please
Wow…! It is an awesome trick….!!
So useful for bloggers…!
Computer Tricks
Hey very nice web site!! Guy .. Excellent .. Superb .. I’ll bookmark your web site and take the feeds additionally?I’m glad to search out a lot of helpful info here within the post, we want work out more techniques on this regard, thanks for sharing. . . . . .
great post, very informative. I wonder why the
opposite specialists of this sector do not understand this.
You must continue your writing. I’m sure, you’ve a huge readers’ base already!|
Hi there, awesome site. I thought the topics you posted on were very interesting. I tried to add your RSS to my feed reader and it a few. take a look at it, hopefully
I can add you and follow.
This website is marvelous, the tips are amazing. i have one question though. facebook usually makes changes frequently. would any future change affect the blog commenting system?
Hi shaheen, glad to see you here, There will be not as such impact on Facebook comment box. However its highly depend on the facebook developers but as per my own experience you should not worried about predicted giant issue.
Simply wish to say your article is as surprising.
The clarity for your put up is just cool and that i could assume you’re knowledgeable in
this subject. Fine with your permission let me
to grasp your feed to keep up to date with forthcoming post.
Thanks 1,000,000 and please carry on the enjoyable
work.
Feel free to visit my homepage: Lizz Tayler
I’m not positive the place you are getting your information, but good topic.
I must spend some time studying more or understanding more.
Thanks for fantastic info I was on the lookout for this information for my mission.
My page: Valentin
Not workin for me..!! 🙁
gives error when i save the template
I cant’t save the template it gives error!!
That was a very useful article..
is there a way we can write our own commenting system for our blog? with the options like NAME, EMAIL, Website and Comment..
Thank You
http://www.techisher.com
hi uday,
what you are talking is about default WordPress comment system.. for blogger it is not posible as it required some access to modify and create custom files in cms which blogger didn’t provide.
I am a new blogger , your tutorial helped me a lot to improve my blog.
keep posting tutorials, i will comeback often to visit your tutorials
Thanks a lot for this tutorial
Nice trice and knowledge dear, but its difficult to follow all steps in responsive blogger template, so please find some easy method for doing so.
Yes mahendra, agreed with you.. This article were written at the time of old dashboard..
i tried out but its not showing facebook comment box…need your help to solve this
Your blog might have more than <data:post.body/> code, use try and error method, it will help to resolve your problem,
And please don’t forget to delete code if it’s don’t work .
Thank a lot for this useful stuff. This is very informative and well written post for me.
Facebook comment plugin doesn’t work any more in Blogger,desqus and Facebook comment system. What can I do brother?
Hi Goljar Ali, It’s working perfectly on my demo blog. Kindly reffer tutorial again.
If you still facing any problem than kindly connect with my facebook page. i will try to solve your problem personally.
Very nice article. I love to read it. Thanks for sharing.