Introducing Facebook Like

(Note to those reading this as a note pasted on Facebook: This is actually a blog post on my blog, NOT a Facebook note posting. Facebook automatically republished all of my blog posts as notes under my account. My blog is http://segin-rr.blogspot.com/ so go there before complaining that I’m talking about a feature that already existed. Being forewarned, if you elect to complain anyways, I take no responsibility for the consequences of your own stupidity.)

Recently, I added support for Facebook’s “Like” button onto my blog. As you can see from the top of the blog post, there’s a new “Like” button.

The Facebook “Like” button is not a standard Blogger feature. To add it, you need to edit your blog’s template. If you know what HTML and CSS is, or at least have enough brains not to get scared simply because you have to sift through a lot of cryptic text, then (hopefully) this will work for you. I’m going to assume you’re using one of Blogger’s standard templates, or a slightly modified one, as some fully custom templates are really different in design and these instructions may not work with them.

First, log into Blogger, and go to the control panel for your blog. From the “Design” tab, select “Edit HTML”. Under the “Edit Template” section of that page, there is a checkbox labeled “Expand Widget Templates”. Check this checkbox if it is already checked (The page will reload when you check it).

Now, in the template code box, locate a line of HTML that says “<div class='post-header-line-1'/>” – as a hint, press Ctrl-F and give Find “post-header-line-1”. Below this line will be a “</div>”. Create a new line between these two lines and paste in this code:

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

If you cannot find the “post-header-line-1” code, look for a line containing “<data:post.body/>” and put the code above BEFORE it.

Volia! Now all of your blog posts on your Blogger blog will now have a Facebook “Like” button at the top of the post!

If you want to put the button at the bottom of the post instead of the top, place the button’s code after the line “<div class='post-footer-line post-footer-line-1'>”. If you had to follow the instructions right after the button code, then it’s already at the bottom and you do nothing.

Now, it’s only time until people start “liking” my blog… Muhahaha….