How to add a Facebook Like button to your Blogger blog

Posted by: Gergely Sumegi (3 years, 11 months ago)

If you have a Blogger blog, Facebook offers many ways to get connected to your readers via Facebook, but not all the options are equally easy to implement.

For instance, if you are an administrator of a Facebook page, you can easily get a code snippet that can be embedded on any other website, such as your blog. With this widget you can get likes for the Facebook page, but not for the blog itself. This is a great way to get likes for your Facebook page, but this solution is not ideal if you want to stay away from Facebook, and gather your readers around the blog, and not the Facebook page.

When it comes to adding a Like button to the blog itself, it is a trickier business, especially doing so for each post. The default Share button has got a different purpose: it will share your post on the reader’s Facebook timeline, but doesn’t get likes.

Let’s start with adding an overall Like button to the blog, that can be placed anywhere on the template. First, you need to open the Dashboard of your blog in one tab of your browser. Open a new tab, and open this address:

On this page, you will see a small tool that will create a tailor-made Like button suited to your needs. In the URL field, enter the full URL of your blog including the http:// part. In the Width box, enter the desired width in pixels. If you want to place the button on the usual right hand bar of Blogger, the Width figure should be around 200. Untick the box next to the Send button.

Click on Get code, and choose the IFRAME option. Copy the code to the clipboard, and switch to the other tab with the dashboard open. Choose Layout on the left hand menu. You can see the layout of your blog here. You should see a box saying “Add a gadget”. Click on that one.

A new window comes up with many types of gadgets you can add. Scroll down the list and choose HTML/JavaScript. Now paste the code from the clipboard in the Content box, and you are done! You can now freely move the gadget with your mouse anywhere in the template.

Okay, that was easy, now comes the tricky part: the Like button to each post. You can close the Facebook Developer page, but stay on your Blogger dashboard. Choose Template from the left-hand menu. Click on Edit HTML. Don’t be frightened of the source code, just search on page (Ctrl+F) for the <body> tag. There might be some additional code in the body tag, so you may just search for <body without the closing bracket.

When you have found the body tag, insert a new line below it, and paste the following code in this new gap:

<!-- Facebook like button to each post, start of first code -->
<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); = id;
 js.src = "";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Facebook like button to each post, end of first code -->

Well done, but you are not finished yet! Now search for this code in the source, a little bit further down: <div class='post-header'>

Insert a new line after this part, and paste the following code:

<!-- Facebook like button to each post, start of second code -->
<div class="fb-like" expr:data-href='data:post.canonicalUrl' data-send="true" send="false" data-width="450" data-show-faces="true"></div>
<!-- Facebook like button to each post, end of second code -->

With this code inserted, you will now have a Like button on the top of each Blogger post you publish.

By Gergely Sumegi

← You’re the New Face of Google’s Targeted Ad Campaign Yahoo Mail Users Furious After Redesign Disaster →

Process Library is the unique and indispensable process listing database since 2004 Now counting 140,000 processes and 55,000 DLLs. Join and subscribe now!

System Tools

PC Mechanic