Instructions for creating Facebook Comment frames for Blogger

Instructions to create a Facebook Comment frame for Blogger. Facebook developers are always trying to make the user experience better with its features and Facebook itself. So that’s why the Facebook developer also introduced Badges and social plugins that include some useful stuff for the rest of the web.

Instructions for creating Facebook Comment frames for Blogger


As for a list of some of the best plugins, Facebook comments are one of them. The Facebook Comment box helps your blog visitors to comment on your blog through their Facebook account.

Facebook comments also help increase your website traffic because if someone uses their account to speak, your mentioned post will automatically appear in their news feed, This increases your chances of getting more visitors.

We have discussed the advantages of adding Facebook Like Box. And, use the Facebook Like button in between posts.

The Facebook Comment Box also helps you to make your blog user-friendly if you have a large number of visitors from Facebook. So, if you want to add Facebook comments to your blogger blog, follow the simple steps below carefully.

Instructions for creating Facebook Comment frames for Blogger

Part 1: –  Creating Application For Facebook Comment Box.

  • First of all, you need to create an app on Facebook. If you know how visit the link provided below.

LINK


  • Then Popup Window will appear to fill in the details related to the Facebook application.
  • Fill in the Display Name, Contact Email and select a category, then click Create App ID.


  • Within seconds, a new application will be created. Now you have to change the app review status from developer mode to public mode, as shown below.


  • Now copy paste the App ID to use in the next steps. If you cannot find a location simply as shown below.


Part 2: –  Settings for Blogger According to Facebook Plugin.

  • Open your Blogger Templates section in Blog >> Then  Edit HTML.
  • Now Search for  <HTML> and replace it with the below code.
<html xmlns:fb='http://www.facebook.com/2008/fbml'
  • Now Search for  <head>  and paste the 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'/>

Safe Tricks : – With Blog Name.

Blog-Logo-Image  : – With Logo Image.

Your-App-Id : – With Facebook App ID.

SafeTricks  : – With Facebook Page Username.

These settings will help to debug the website according to the Facebook Graph API in a better way.

Part 3: –  Adding Facebook Comment Box In Blogger Template.

  • Go to the Edit HTML section of your blogger template.
  • Search Using CTRL + F For  <body> OR <body expr: class = '& " loading " + data: blog.mobileClass '>
  • Now replace  APP ID  with your code 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 the above given code and paste it just below  <body> OR <body expr:class='" loading " + data: blog.mobileClass '>  as shown below.

  • Now search again with  CTRL + F in the template for <b:include data='post' name='post'/>
  • Then Paste the 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='https://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 posting both codes are in incorrect location. Save your sample code.

  • Now Checkout, any of your published posts, to check the Facebook comment box is visible or not.
  • In case you want to adjust the width of the comment box, then change the values ​​of width  = '600 ′ as  per your choice.

Part 4: –  Steps to hide Blogger comment box.

  • If you want to hide your blogger comment box
  • Then go to the Settings tab   of the blog >> Then   Post and Comment 
  • Now Change  Comment Location  to  Hidden  and then  save  settings.

In conclusion, we hope this guide was useful to you. For any support, questions or concerns, feel free to leave a comment below. Share this guide with your friends.

Click to rate this post!
[Total: 0 Average: 0]
6
Subscribe
Notify of
guest
0 Góp ý
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x