Skip to Content

How do I add Facebook comments to Blogger?

How do I add Facebook comments to Blogger?

Adding Facebook comments to your Blogger blog can be a great way to encourage discussion and build community around your site. Facebook comments allow your readers to comment on your posts using their Facebook accounts, bringing the conversation to a platform many people already use regularly.

Why Use Facebook Comments?

There are a few key reasons why you may want to use Facebook comments on your Blogger site:

  • Increased engagement – Allowing readers to comment with their Facebook accounts makes commenting quick and easy, leading to more comments.
  • Taps into existing communities – Your readers likely already have networks and connections on Facebook that they can leverage when commenting.
  • User management – Facebook handles comment moderation, banning abusive users, and more through their platform.
  • Credibility – Comments tied to real Facebook profiles add more credibility than anonymous comments.

How Facebook Comments Work on Blogger

When you install the Facebook comments plugin on your Blogger site, it adds a comments widget that your readers can use to post Facebook comments. Here is an overview of how it works:

  • A reader visits your blog post and sees the Facebook comments widget.
  • They click in the comment text box and a popup appears prompting them to login to Facebook to post a comment.
  • Once logged in, the user can enter and post their comment, which will display in the widget along with their name and profile picture.
  • Other readers can reply to that comment, like it, and share it to their own Facebook profile.

The comments widget looks and functions very similarly to the comment section on Facebook, creating a seamless experience for your readers.

Step 1 – Install the Facebook Comments Plugin

The first step is to install the Facebook comments plugin on your Blogger site. Here is how:

  1. Login to your Blogger account and navigate to the site you want to add comments to.
  2. Click on Template in the left sidebar.
  3. Click Edit HTML to open up the template editor.
  4. Add the following code before the tag, replacing xxx with your Facebook App ID:

    <b:skin><![CDATA[/* Facebook Comments Plugin */
    var defaultFbCommentsWID = 'xxx'; //Enter your Facebook App ID
    //]]></b:skin>

  5. Click Save Template at the top of the page.

This installs the required JavaScript code for the Facebook plugin. The key part is specifying your Facebook App ID, which is what connects the comments to your Facebook app.

Step 2 – Create a Facebook App

In order for the Facebook comments to work properly, you need to create a Facebook app. This is what provides the App ID you need. Here is how to create one:

  1. Go to https://developers.facebook.com and login with your Facebook account.
  2. Click My Apps in the top menu bar.
  3. Click Create App in the top right corner.
  4. Enter a Display Name and Contact Email for your app.
  5. Choose a Category for your app – Blogs is a good option.
  6. Click Create App ID.
  7. On the screen that follows, click Skip Quick Start in the top right corner.
  8. Open the Settings menu on the left sidebar and click Basic.
  9. Copy the App ID displayed at the top – this is what you’ll use in your Blogger template.

That’s it, you now have a Facebook app configured that will power your blog comments.

Step 3 – Configure the Comments Widget

Now that you have installed the plugin and created a Facebook app, you can configure the widget that will display the comments.

Open the Template editor in Blogger again. Now add the following code where you want the widget to display:

<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.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class='fb-comments' data-href='YOUR_BLOG_URL' data-numposts='5' data-width='100%'></div>

This adds the required JavaScript SDK and then displays the comment widget. Make the following changes:

  • Replace YOUR_BLOG_URL with your actual blog URL.
  • Adjust data-numposts to change the number of comments shown.
  • Change data-width if you want the widget smaller/larger than full width.

Now when you view your blog posts, you should see the Facebook comment widget!

Step 4 – Moderate Comments

By default, Facebook handles comment moderation, spam filtering, and banning abusive users based on their platform policies. However, you can still moderate and filter certain comments if needed:

  • To hide a specific comment, click the drop down on the comment and choose Hide Comment.
  • You can change the comment ranking order from social relevance to chronological if desired.
  • Ban or restrict persistent abusive users via your Facebook app’s App Details page.

Overall, Facebook comments require very little ongoing moderation from you since Facebook handles most of it behind the scenes.

Customizing the Facebook Comments Experience

There are a few options available for customizing the look, feel, and functionality of Facebook comments on Blogger:

  • Color scheme – Matches your Facebook page color profile by default. Change in Facebook app settings.
  • Language – Defaults to visitor’s browser language. Force a specific language if desired.
  • Post author – Control whether author name/profile pic appears with auto-posted comments.
  • Open Graph & social meta data – Customize how comments appear when shared to Facebook.

Refer to the official Facebook comments documentation for details on all the available options. The key is updating your Facebook app configuration.

Troubleshooting Facebook Comments

If you are having trouble getting Facebook comments working properly on Blogger, here are some things to check:

  • Verify the Facebook JavaScript SDK is installed properly.
  • Check that your Facebook App ID is valid and configured in your template.
  • Make sure your blog URL is properly set in the comments widget code.
  • Try having a test user post a comment and look for errors.
  • Check Facebook developer docs for common issues.
  • Try resetting the Facebook app and reauthorizing it.

Often minor code issues like missing JavaScript or invalid IDs can break the comments. Double check the installation steps and inspect for errors.

Conclusion

Adding Facebook comments to your Blogger site is straightforward with the official Facebook plugin. Just install it, create a Facebook app, add the widget code, and configure the options you want.

With Facebook comments enabled you can enjoy deeper reader engagement, tap into the Facebook community, simplify comment moderation, and bring credibility through Facebook profiles. It offers a great native comments experience directly within your blog.

Use the tips in this guide to get Facebook comments working properly on Blogger. It is one of the most popular and effective ways to add comments to a Blogger site.