If you've been finding it difficult to integrate the Facebook comment box with your Blogger blog, sit back and relax as I guide you on how to add Facebook comments plugin to Blogspot blogs using HTML5.
For you to add the Facebook social plugin to your blog, you will need the Facebook Application ID of the blog. If you know the ID, copy it somewhere and if you don't know it you can check the Facebook apps page.
Next is to log in to your Blogger dashboard, back up your template and go to "Template" > "Edit HTML"
==> Click inside the HTML and use CTRL F to find : <body
==> Directly below it, paste <div id='fb-root'/> OR <div id="fb-root"></div>
==> Open a new tab on your browser and go to www.freehtmlparser.blogspot.com
==> Copy and paste the code below inside the box on the page
<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>
==> Carefully replace the highlighted appID with the ID of your blog
==> Click "Encode"
==> Go back to the browser tab where you have your blog HTML
==> Copy and Paste the encoded script directly below the <div id='fb-root'/>
==> Now, your html should look similar to the screenshot below:
Click "Save Template"
==> 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/>
==> Directly below it, paste this code :
<b:if cond='data:blog.pageType == "item"'>
<p align='center'>
<img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFt-D-XfhXNQJq7-NMGCUQVDbolkv5SoRbPYEda9A6Iy98tp6QLQRNi68ZrHhGMHxK_kfjp9hVFRmb7lFd7zJxnnf1ULoZCooNGCwzn-SbQFe_ZrHvsStF_7OtS-0ReoVJvGGdCAps3ljR/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>
==> Click "Save Template"
That's all.
Check out the desktop view (not Mobile View) of any post on your blog and you should see the comment form below the post.
Please, let me know if it works for you.
Also use the comment form to let me know if you face some challenges.
Please, SHARE this with friends.
Cheers!
Did you know that you can get paid to do simple jobs on Facebook?
ReplyDeleteThere are thousands of businesses around the world and in your local area looking to hire people just like you to
work on simple tasks such as:
Posting Facebook comments
Moderating Facebook groups
Uploading photos and tagging people
Generating Facebook ‘likes’ and followers
Most of these jobs don’t require any prior experience and the only skills you need are a good knowledge of how to use
Facebook.
Click the link below to get started:
https://clicktrix.com?david2587