Sometime ago, I shared tutorials on how to manually include a Facebook comment plugin or box to a blogger. But owing to the fact that so many bloggers have thousands of posts on their blogs already, so doing it manually would be really cumbersome: doing it manually through BLOGGER POST EDITOR would be awkward. So, in this post, you will see how to do that through BLOGGER HTML EDITOR and the effect would reflect on all your pages. This time around, the Facebook-comment-box-snippet to input into your HTML EDITOR would automatically generate comments pertinent/specific to each post instead of inputting the URL of the post manually when editing the post. I give credits to WWW.SAFETRICKS.COM
Please, make sure you follow the steps well, they are simple and easy. ASK QUESTIONS VIA BLOGGER COMMENT BOX IF YOU NEED ME TO ANSWER YOU ASAP.
CONCERNING THE CREATING OF FACEBOOK APP, SEE HERE FOR DETAILS ON HOW TO DO THAT.
How To Add Facebook Comment Box To Blogger. ?
Part 1:- Create App For Facebook Comment Box.
- First of all you need to create an app on Facebook. If you know how, simple visit below given link.
http://www.trendsoflegends.com/2016/09/the-simplest-steps-on-how-to-integrate.html
Part 2:- Settings For Blogger According To Facebook Plugins.
- Open Your Blogger Template section of Blog >> Then Edit HTML.
- Now Search for <html and Replace it with below code.
<html xmlns:fb='http://www.facebook.com/2008/fbml'
- Now Search <head> and paste below code just below searched tag.
<meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <meta content='Safe Tricks' property='og:site_name'/> <meta content='Blog-Logo-Image' property='og:image'/> <meta content='Your-App-Id' property='fb:app_id'/> <meta content='http://www.facebook.com/SafeTricks' property='fb:admins'/> <meta content='article' property='og:type'/>
Replace:-
Safe Tricks:- With Blog Name.
Blog-Logo-Image:- With Logo Image.
Your-App-Id:- With Facebook APP ID.
SafeTricks:- With Facebook Page Username.
So these settings will helps to debug webpage according to facebook graph APIs in better way.
Part 3:- Add Facebook Comment Box In Blogger Template.
- Go To Edit HTML section of your blogger template.
- Search By CTRL+F For <body> OR <body expr:class=’"loading" + data:blog.mobileClass’>
- Now Replace APP ID with yours from below given code.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP-ID',
xfbml : true,
version : 'v2.7'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
- Copy above given code and paste it just below <body> OR <body expr:class=’"loading" + data:blog.mobileClass’> as shown below.
- Now search again by CTRL+F in template section for
<b:include data='post' name='post'/>
- Then Paste below given code just below the searched code.
<b:if cond='data:blog.pageType == "item"'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div> </div> </b:if>
- After pasting both codes in accurate position. Simply save your template code.
- Now Checkout any of your published post to check Facebook comment box is visible or not.
- In case you feel to adjust width of comment box then change values of width=’600′according to your choice.
Part 4:- Steps To Hide Blogger Comment Box.
- If You want to hide your blogger comment box
- Then go Settings tab of blog >> Then Post and Comments
- Now Change Comment Location to Hide and then save settings.
In conclusion, we hope this guide proves helpful to you. For any assistance, questions or query, feel free to leave a comment below. Share this guide with your friends as well.
NOW, TRY SHARING WITH OTHERS AS WELL. IF HIDING YOUR BLOGGER COMMENT BOX WOULD AFFECT THE FACEBOOK COMMENT BOX, LEAVE THE TWO OPEN, THEN MAKE THE BLOGGER COMMENT BOX TO BE USED ONLY BY REGISTERED MEMBERS TO YOUR BLOG, OR MAKE IT TO BE FOR ONLY THOSE WHO HAVE GOOGLE ACCOUNTS.
YOUR COMMENTS ARE THE FOOTPRINTS YOU’LL LEAVE ON THIS SITE AS A VISITOR!
Remember to bookmark this site and follow us by email to always get notifications.
Thanks for coming today, remember to come tomorrow, and keep on coming.
OUR INSTAGRAM USERNAME=> “dinspirationalparrot“
YOU CAN ALSO USE THE
FACEBOOK COMMENT BOX BELOW [RELOAD PAGE IF NOT DISPLAYING]
FACEBOOK COMMENT BOX BELOW [RELOAD PAGE IF NOT DISPLAYING]
Be the first to comment
You must log in to post a comment.