Header Ads Widget

Responsive Advertisement

Ticker

6/recent/ticker-posts

How to Add Facebook Comment Box for Blogger Blog/Website with Notifications

Web Expert 3:03 AM
Are you looking for adding Facebook Comments box in your blogger blog than we will provide you tutorial about how to Add Facebook Comments Box for Blogger. Facebook has released comments plugin for blogs and websites. You can easily add Facebook comments box to your blog because this plugin can be added in any blog or websites. This comments box help to post comments on your post with Facebook profile and share them on Facebook.

How to Add Facebook Comments Box For Blogger

How to Add Facebook Comments for Blogger

You can easily add Facebook comments box to your blogger blog with follow some simple steps as give below:

1. Create Facebook Application

First you need to want Facebook application ID so please follows below steps to get your App ID:

Step 1

Go to Facebook Developers Page.

Step 2

Click on create a new App and enter your application name and name space as shown in below picture.
How to Add Facebook Comments Box For Blogger

Step 3

Fill all required fields and add your domain name.
How to Add Facebook Comments Box For Blogger

Step 4

Click on save changes and copy your App ID.

2. Add Comments Box to Blogger

Now follow below steps to add comments box to your blogger blog:

Step 1

Log in into Blogger Dashboard and click on Edit HTML as shown in below picture. 
How to Add Facebook Comments Box For Blogger

Step 2

Click on Expand Widget Template as shown in below picture.

How to Add Facebook Comments Box For Blogger

Step 3

Search <html with the help of CTRL + F. Replace <html to following code.
<html xmlns:fb='http://www.facebook.com/2008/fbml'

Step 4

Add below code before </head>
<meta expr:content='data:blog.pageTitle' property='og:title'/><meta expr:content='data:blog.url' property='og:url'/><meta content='Web Expert' property='og:site_name'/><meta content='BLOG_LOGO_IMAGE_LINK' property='og:image'/><meta content='YOUR_APP_ID ' property='fb:app_id'/><meta content='http://www.facebook.com/webexpert' property='fb:admins'/><meta content='article' property='og:type'/>
Tips:  1.Replace Web Expert to your blog name.
2. Blog_logo_Image_link with your logo link.
3. Change Your_app_ID to your Facebook app ID.
4. Change your Facebook fan page with http://www.facebook.com/webexpert

Step 5

Add below code before</body>
<div id='fb-root'/><script>    window.fbAsyncInit = function() {    FB.init({      appId  : &#39;YOUR_APP_ID&#39;,      status : true, // check login status        cookie : true, // enable cookies to allow the server to access the session      xfbml  : true  // parse XFBML    });  };    (function() {    var e = document.createElement(&#39;script&#39;);      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;    e.async = true;      document.getElementById(&#39;fb-root&#39;).appendChild(e);    }());</script>
Tips: Replace  YOUR_APP_ID to your Facebook application ID

Step 6

Now search below code.
<data:post.body/>

Step 7

Now add below code before it.
<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><div>
<a href="http://www.webexpertseotipscms.blogspot.com" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='550'/></div></div><a href="http://webexpertseotipscms.blogspot.com/2014/02/download-best-blogger-templates-of-2014.html" rel="dofollow" target="_blank" title="blogger templates"><img src="https://bitly.com/haakblog" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://webexpertseotipscms.blogspot.com" rel="dofollow" target="_blank" title="blogger tricks"><img src="https://bitly.com/haakblog" alt="blogger tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://webexpertseotipscms.blogspot.com/2014/05/how-to-add-facebook-comment-box-for-for-blogger-blog-or-website-with-notification.html" target="_blank" title="Get This Widget">Get Widget</a> <a href="http://webexpertseotipscms.blogspot.com/" target="_blank">Blogger</a></div></b:if>

Demo: How to Add Facebook Comments Box For Blogger

Tags:

Post a Comment

0 Comments

How Can I Help You?