Add Facebook comments to my blog

Blogger does not support Facebook comments natively, but they can be installed by adding the required HTML to your blog.

To install a Facebook page plugin, it's best to use an HTML gadget, rather than customizing your template. This article provides a simple one-click button for installing the required HTML gadget on your blog.

Facebook comments rely on the Facebook JS SDK (JavaScript Software Development Kit).

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

Then, they need fb-comments markup.
Note that, in this gadget, this is done in custom HTML, since we need the canonical URL of the current page. In addition, we want to omit the title, and only want to render it on a single-item Post page.

<b:includable id='main'>
  <b:if cond='data:view.isPost'>
    <data:content />
    <div class='fb-comments'
         expr:data-href='data:view.url.canonical.escaped'
         data-numposts='5'
         data-width='100%'>
    </div>
  </b:if>
</b:includable>


Happy Facebooking!

Comments

Popular posts from this blog

Filter out certain labels from my Blog Homepage

Change the landing page of my blog

Get Facebook to show feature image for your Blog's Homepage