Pages

27 July 2016

How to Add facebook Comment Form to your Blogspot Blog

Adding facebook comment form to you blog enable your blog visitors and subscriber to comment on you blog from the facebook account. To be able to add facebook comment form to your blog, you will first need to get The Facebook App ID of your blog. If you have already done that before and you have the App ID Saved somewhere that is good and you can proceed to the next step. But if you have not gotten it you can easily get it on facebook apps page

You can read: How to Get Facebook App ID for your Blog

==> After getting your App ID Kindy login your Blogger Dashboard,

==> Back up your template. Make sure you always back up your template before editing it.

==> Click on Tempate And Then "Edit HTML"

==> Click inside the HTML and press CTRL F
==> Paste <body into the box and click enter
==> Immediately below the above code, paste <div id='fb-root'/> OR <div id="fb-root"></div>

==> Open a  new tab and got to www.freehtmlparser.blogspot.com

==> Copy the code below and Paste it inside the box

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=522587054526444";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Replace the Number highlighted with your blog AppID you Generated earlier
Click on Encode

Copy the code after pressing Encode

Goto back to you HTML

Paste the encoded script below <div id='fb-root'/> OR <div id="fb-root"></div>. Either of the two use used

You should have something similar to the image below


Click Save template

Press CTRL F and find any of the following

==> Click inside the HTML and use CTRL F to find :

<div class='post-footer-line post-footer-line-3'>
 OR
<div class='post-footer-line post-footer-line-3'/>
 OR
<data:post.body/>

Copy the code below and paste it immediately after any of the above code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='center'>
<img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnBZSZb3c2G7yIHni7W2Fgy1y8Z3ouzIUQto7MoMHPIDJk85uHXfEBRUUo26HTDFbOWq-0t0zxK2cYd9K5xdZz5L6BQIqUGnTbbl-aEY1JO7Y4TCDMdAEBwu-BM-5ei15bQOw8PBcUxhct/s1600/cmds.png'/> </p>
<div style='text-align: center;'>
<div class="fb-comments" expr:href='data:post.url' data-width="100%" data-numposts="10" data-colorscheme="light"></div></div>
</b:if>



The Click Save Template

View your website on the desktop and check any post you have on your blog to see if it works

Kindly let me know if this works for you by using the comment form

Recommended: How to Get Facebook Application ID for Facebook Comment

Like Our Facebook Page or Follow Us on Twitter and also you can Click Here to Subscribe to tis Blog to get Latest Update

OR

Open a new tab and got to www.freehtmlparser.blogspot.com

Copy the code below and Paste it inside the box



Replace the Number highlighted with your blog AppID you Generated earlier
CLick on Encode

Copy the code after pressing Encode

Goto back to you HTML

Paste the encoded script below
OR
. Either of the two use used

You should have something similar to the image below

Click Save template

Press CRT F and find any of the following

==> Click inside the HTML and use CTRL F to find :

No comments:

Post a Comment