Thursday, October 7, 2010

Add Facebook "Like" Button to Blogger Posts

Facebook™ is all the rave right now and almost every website has integrated some form of Facebook service into their pages - plugins, to be exact.

One of the more popular Facebook plugins is the "Like" button. Many websites are strewn with the "Like" button - even my favorite manga reading site has placed the Like button in every page of every manga posted in their website - in the hopes of advertising their pages in the social networking giant every time people "like" their pages and getting more traffic.

For people with blogs, getting readers is just as important as getting traffic is to these large websites. And one way to do that is to - yes, you guessed it - add the "Like" button to your posts. Every time a reader "likes" your post, this action will be posted to that person's Facebook wall and his friends will be able to see it. This way, you can get additional advertisement while letting other people do the work for you.

So now we know what the "Like" button can do, let's get to placing these buttons on our blog posts.

We can begin by going to Facebook's Developers page. Scroll down a little and you will find input fields that you can use to configure how you want your Like button to look like. Below is a screenshot of the configurations:

Just choose from the options available to you and see the preview of your button in the right side. When you click "Get Code", you will be given two codes but for this example, copy the iFrame code, which looks like the one below:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fyourblogname.blogspot.com&layout=button_count&show_faces=true&width=450&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
You can edit this code manually later if you like.

Now, you have to edit your blog so that every time you post a new article, the "like" button will be automatically added to your post. To do this, go to the Design Tab in your blog, click Edit HTML, then check the Expand Widgets Template box.

We will add the code you obtained from Facebook to the beginning of your post body. In your HTML code, look for the line (you can copy the code below and use Ctrl+F):
<div class='post-body entry-content'>
Immediately below this code, add an opening and closing div: <div></div>

In between these two div tags, paste the code you copied from Facebook. It should look like the one below:

<div class='post-body entry-content'>




<div><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fyourblogname.blogspot.com&layout=button_count&show_faces=true&width=450&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe></div>
Save your template and you should see the "Like" button at the beginning of your post body, just below the post title. For this code, the "Like" button will be present in all pages - both your home page and individual post pages. This is what I did with my blog.

If you want the button to show only on the individual post page (the page that is displayed when you click on a post's title), just add:
<b:if cond='data:blog.pageType == "item"'> before the first div and </b:if> after the closing </div> tag.
The code that you added tells Blogger to display the Like button only if the page is the post page. The code should now look like this:

<div class='post-body entry-content'>




<b:if cond='data:blog.pageType == "item"'>
<div><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fyourblogname.blogspot.com&layout=button_count&show_faces=true&width=450&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe></div></b:if>
Save your template and see the "Like" button on your post pages only

* You can also try experimenting by placing the "Like" button in other parts of your post.

If you liked this post, then why don't you click the "Like" button in this post and share it with your friends?

5 comments:

  1. already placed it on my blog. Thank you very much for the tutorial.

    ReplyDelete
  2. I did every step (which was very clear BTW Thanks!) but I'm getting 174000 like which is impossible...

    ReplyDelete
  3. @nana:

    did you check the URL if it's really pointing to your site? :-)

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Hi im philip my scolliosis po ko mild lang po makkpagbarko po bako.

    ReplyDelete