How To Add Facebook Comment Box On Your Blogger Blog

Get Free SEO Tips

Follow me

Mathias Amodu

Founder at Zealmat Limited
My Name is Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large
Follow me
The Facebook comment box is very important to your blog visitors because must of the don’t have google account and the might love to interact with you so as to get there solutionsolved.

Image

This process might sound funny for newbies but I know it is not new to others who are into blogging for so long.

This Facebook comment box was newly lunch on Zealmatblog so I decided to give you my visitors the easy method on how to add this to your blogger blog.
Below are some simple steps in how to insert or add a facebook comment box to your blogger blog.

Step 1
You will have to create a facebook application or if you have already you can still make use of it.Image

Step 2
Now login to your blogger account and then select the blog you want to add the comment box to.

Step 3
Then scroll your mouse down to the template tab and click on it then in the template page click on edit html again.

Step 4
Now click on the html code and then press  CTRL+F on your keyboard and search for this code below
               
                  <html

Step 5
Now replace the code above with this one below, mostly this code is located at the top of the html code.
Check the image below
Image

<html xmlns:fb=’http://www.facebook.com/2008/fbml’

Step 6
Then copy this code below again and place it inside the search box then press enter.

</head>

Step 7
Then paste this code above or  before the code above.
Image

<meta expr:content=’data:blog.pageTitle’ property=’og:title’/><meta expr:content=’data:blog.url’ property=’og:url’/><meta content=’ZealmatBlog’ property=’og:site_name’/><meta content=’IMAGE LINK’ property=’og:image’/><meta content=’1737460273143739 ‘ property=’fb:app_id’/><meta content=’http://www.facebook.com/zealmat’ property=’fb:admins’/><meta content=’article’ property=’og:type’/>

Arrangement

Most word or number is been colored above right? you will have to change them to your’s

Any word or number in this color change it to your  = APP ID

Any word or number in this color change it to your  = Facebook page URL

Any word or number in this color change it to your = blog title

Any word or number in this color change it to your =  Image link

Step 8
Then copy this code below again and place it inside the search box then press enter.

</body>

Step 9
Then paste this code above or  before the code above.

<div id=’fb-root’/><script>    window.fbAsyncInit = function() {    FB.init({      appId  : &#39;1737460273143739&#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>

Step 10
Then copy this code below again and place it inside the search box then press enter.

<data:post.body/>

Step 11
Then paste this code above or  before the code above.
Check this image
Image

<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=”https://www.zealmat.com” rel=”dofollow” target=”_blank” title=”zealmatblog”><img alt=”zealmatblog” border=”0″ src=”https://zealmat.com” 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><div style=”font-family: arial, sans-serif; font-size: 9px;” class=”ycdr”><a href=”https://www.zealmat.com/2013/07/add-facebook-comments-box-for-blogger.html” target=”_blank” title=”Facebook Comment Widget”>Facebook Comment Widget</a> <a href=”https://zealmat.com/” target=”_blank”>News</a></div></b:if>

Click here for tutorial on how to display the Facebook comment box on mobile view

Also make use of a desktop computer while performing this.

Don’t forget to drop your comment below thanks.

About Mathias Amodu 903 Articles
My Name is Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large

10 Comments

  1. Mion March 3, 2016
    • Mathias Amodu March 3, 2016
  2. Mona March 3, 2016
  3. Niamh Kelly July 24, 2016
  4. Anonymous September 1, 2016
  5. HowYoutuber X December 31, 2016
  6. fahad rafiq August 26, 2017

Leave a Reply

*