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

Post a Comment

Popular posts from this blog

Remove the header image for posts in Emporio

The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan! Head to Theme => Edit HTML Search for ' data:view.isSingleItem ' The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'> <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'> <b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/> <div class='bg-photo-container'> <div class='bg-photo'/> </div> </b:if> </b:if> Delete the XML including the <b:if> tag code. Happy Emporio'ing!
Read more

Rotate my Blogger images

Image
Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270). Take, for example, the image below. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG If we switch the s200 to s200-r90 , we get the following image instead. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG Happy rotating!
Read more

Add snippets to the Emporio theme

Image
A lot of people love the image-focused look of the newer Emporio template. This article explains how to tweak your template's XML to add a short snippet to the Emporio posts - unfortunately, there's no easy way to add in snippets for Emporio, without customizing the markup. But, if you're feeling brave, head to: Theme -> Edit HTML -> Jump to Widget -> Blog 1 If you search for 'snippet-container', you'll come across: <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.title /> </div> <b:if cond='data:post.title != ""'> <div class='snippet-fade r-snippet-fade hidden'></div> </b:if> </div> Notice that it's just got the title. You could change it to add something like: <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.
Read more