How to add facebook comment to blogger? (New Blogger Template)
Here is how to add Facebook comment to blogger:
First of all, you need to create a Facebook App. The APP ID is the key that will be used in this setup.
Go to this link and create an app: https://developers.facebook.com/apps
Video: How to create Facebook App?
Video: How to integrate Facebook Comment in Blogger template?
Assuming you have the Facebook App already created, let's proceed with integrating Facebook comments to Blogger template. Follow the steps below:
- Get the APP-ID from the Facebook App and replace it below:
<meta content='FACEBOOK-APP-ID' property='fb:app_id' />Replace the “FACEBOOK-APP-ID” above and keep it in a Notepad. We will use this later.
- Backup your Blogger Template (just in case)
Click on the backup/restore (top right corner of the page).
- Edit Blogger Template
- After you have taken a backup click EDIT HTML > PROCEED > EXPAND WIDGETS (old Blogger Template. You won’t see this in the new one).
- Copy the entire code and keep it in a Notepad temporarily in case something goes wrong and we need to replace quickly. You also have a backup created though in the previous step.
- Click any where in the code area, then press CTRL+F to find.
- Find <head> and just after it paste the code with the Facebook App-Id we made earlier
- Save Template
- Now press CTRL+F and find
“ <div class=’post-footer-line post-footer-line-3′>”
OR this “<p class=’post-footer-line post-footer-line-3′>”
OR “<data:post.body/>”.
Try finding any of the three above. And right after it, copy and paste the code below:
<!-- FACEBOOK COMMENT -->
<b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id'/> </b:if>
<!-- FACEBOOK COMMENT -->
- Now go to the top of the template and find “<html” and paste the code below right after it or at the end of the “<html”, that is between “<html” and “>”
It should now look like:
<html xmlns:fb='https://www.facebook.com/2008/fbml'
or
<!DOCTYPE html>
<html b:version=’2′ class=’v2′ expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’ xmlns:fb=’https://www.facebook.com/2008/fbml’>
<head>
This is the namespace added in the code – used for all Facebook widgets and apps. So you only need to add this into your code once, regardless of how many different FBML widgets you use.
- Save Template
- Close
- Enjoy the Facebook Comment Box!
In case something goes wrong and it does not appear or your template messes up, go back to EDIT HTML and replace the entire code with the one you saved in NOTEPAD before we started doing this and save the template. Verify your page is as it was by viewing your blog. And then try again.
You may also want to check this updated, details post how to add Facebook Comments and troubleshooting issues here: http://techubber.blogspot.in/2016/03/how-to-add-facebook-comments-box-on-blogger-blog-site.html
Cheers!
No comments