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!

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