Easy way to make Facebook comment form to Show of Blogspot/ Blogger Mobile View

The general problem with facebook comment form is that people find it difficult to make it work perfectly on mobile view after working on desktop, This is a great challenge which will be resolve in simple step in this tutorial.

==> After getting your App ID Kindly 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

==> In your Html Click CTRL F to find :

<b:if cond='data:top.showMobileShare'>

==>find where the ending </div> is, You can check the image below. 3 </div> will follow each other. Check the image below

Place the code below directly below it

<p align='center'>
<span style='font-size: 15px;font-weight:bold;'>Facebook Comment Box </span>
</p>
<div style='text-align: center;'>
<fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' mobile='yes' numposts='10'/>
</div>

Then Click on save tamplate

View a post on your bog from your mobile phone and you will see the facebook comment form.
Kindly let me know if it works for you by using the comment form to place a comment.

NOTE: Blogger using third party template might not find in on the template

Recommended: How to Add facebook Comment Form to your Blogspot Blog

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

FacebookTwitterGoogle+PinterestWhatsApp