Home blogspot How To Add Facebook Comment Box To New Blogger Blog?

How To Add Facebook Comment Box To New Blogger Blog?

173
0

This article will teach you how to add facebook comment box to a new blogger blog easily.

Making use of facebook comment box is not hard but requires specific knowledge and this article will put you through to add facebook comment box.

Most bloggers using blogger blog are tired of spammers so the best alternative is for them to opt to a better platform that can help reduce spamming like disqus and facebook comment.

How To Add Facebook Comment Box To New Blogger Blog?

  • Go to this link and to create Facebook app: https://developers.facebook.com
  • Hover on the “My Apps” drop-down button near the Facebook Account name (top right corner)
  • Click on “Add a new app”
  • The platform selection window will open. Since we are going to add comment box on a Blogger blog site, click on “Website”
  • In the next page, enter the name of the Facebook App. Preferably keep a name related to your blog site so you can identify easily later on.
  • Choose a category for the app.
  • Click “Create App ID”
  • In the next page, scroll down and under “Tell us about your website”, enter the URL of the Blogger blog site. Click Next to proceed.
  • In the next page, scroll down to the bottom, and under “Next Steps”, click on “Social Plugin”
  • Facebook Social Plugins page opens. Click on Comments.
  • In the “Comments Plugin” section, click on “Web”
  • We’ll get a Comment Configurator and a code will be generate for the comment box.
✓ Also Read:  All in One SEO Pack For Blogger Blogspot 2019 [Updated]

On the facebook comment generator page:

  • Enter the URL of the website/blog where you want the comments box to appear.
  • In the Code Configurator, enter the URL of the website/blog where you want the comments box to appear.
  • Adjust settings like the width of your comments plugin or how many posts you want to show by default.
  • Click the Get Code button to generate your comments plugin code. As we finish entering the URL of the site and/or the size, the Facebook comment will show a live preview of how it will look.
  • Click on the “Get Code” button. The plugin code and instructions to add it on the website are displayed.

Now you are done with generating the code its time to integrate it into your blogger blog site now:

  • Log in to your blogger account
  • Click on your blog for which you just created the Facebook App
  • Disable blogger default comment. Settings > Comments
  • Choose Hide and save your setting.
    2. Click on “Template”
    3. Before proceeding, backup your current Blogger blog template
  • With backup taken, click on “EDIT HTML”. A page opens which contains the Blogger Template’s XML code.
  • Facebook is telling us to “Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.”
    Find the <body> tag: click any where inside the code once and press “CTRL+F” to show the search bar.
    Enter only “<body” without the ending “>” in the search bar and hit enter.
  • Go back to the Facebook Developer page which we kept open, and copy the JavaScript SDK code displayed right under “Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.” The code looks like this:

<div id=”fb-root”></div>
<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/sdk.js#xfbml=1&version=v2.5&appId=YOURAPPID”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

  • Go to the Blogger EDIT HTML page and paste the code right after the end of the <body> tag.
  • Click on “Save Template”.
✓ Also Read:  How to Add Custom Ads.txt File on Blogspot

You might get a XML parse error.

  • Edit the code by changing “&”(ampersand) highlighted in red below with “&” highlighted in green
  • After editing, Save the Template and the parsing error should not appear again.

Go back to the Facebook Developer page open. The second code displayed under “Place the code for your plugin wherever you want the plugin to appear on your page.”, looks like.

<div class=”fb-comments” data-href=”http://Deegeek.blogspot.com ” data-numposts=”5″></div>

Use the following code instead: to display the Facebook Comment Box

<!– facebook comment box –>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<h2>Comment with Facebook</h2>
<div class=’fb-comments’ data-numposts=’5′ expr:href=’data:post.canonicalUrl’ expr:title=’data:post.title’ expr:xid=’data:post.id’/>
</b:if>
<!–facebook comment box –>

Now Paste the code…

Press Ctrl + F and find <data:post.body/>.

Immediately after the code paste the code.

If you’re confused about the right <data:post.body/>, search for this code instead:
<div class=’post-footer-line post-footer-line-2’/>

The Facebook Comment box should now appear below the post. Viewers who are logged in to Facebook will see his/her profile picture near the comment box. 

Comment below if you still having issues with displaying facebook comment box on blogger

LEAVE A REPLY

Please enter your comment!
Please enter your name here