Add a Facebook like button byline to your blog

To install a Facebook like 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.

There are two options for how to install the like button plugin below - adding it as a byline, or as an HTML gadget. Both require the JS SDK (JavaScript Software Development Kit).

The markup

First, the Facebook SDK is needed.

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

Then, the fb-like markup.

<div class='fb-like'
    expr:data-href='data:view.url.canonical.escaped'
    data-layout='button_count'
    data-action='like'
    data-size='large'
    data-colorscheme='light'></div>

HTML Gadget

Option one is to add the button as an HTML gadget - to do so, you can click the link below.

Blog Posts byline

Option two is to add the button as a byline in the HTML markup of the Blog Posts gadget, one for each post.

Note: The URL needs to be the post's url when doing the like-button per byline.

<div class='fb-like'
    expr:data-href='data:post.url.canonical.escaped'
    data-layout='standard'
    data-action='like'
    data-show-faces='true'></div>

To include the extra byline, we override the bylineRegion includable.

<b:includable id='bylineRegion'>
  <b:include name='super.bylineRegion' />
  <b:if cond='data:regionName == "footer-1"'>
    <div class='fb-like'
        expr:data-href='data:view.url.canonical.escaped'
        data-layout='button_count'
        data-action='like'
        data-size='large'
        data-colorscheme='light'></div>
  </b:if>
</b:includable>

1. Go to the Theme tab, and hit 'Edit HTML'
2. Use 'Jump to Gadget' to jump to the Blog widget
3. Just inside the 'main' b:includable, insert the fb-root and SDK code snippet from above.
4. Just inside the 'b:widget' tag, add the byline override 'bylineRegion' 

The result of doing so can be seen below.

Happy Facebooking!