How to add a Facebook "Like" button to blog posts.

Okay, before you start, I know this might seem like I've forgotten all about the post, To Facebook, or not to Facebook, which I wrote the other day, but I haven't. The point of that article was to talk about the ennuis of the sandwich-filler updates, and the feeling of inferiority caused by how shiny everyone else's life can appear when they edit it for all to see.

As far as real "networking" goes, I believe Facebook can be valuable. It's particularly a great way to share interesting articles, blog posts and pieces of wisdom that you find online. All it takes is a simple click of the "like" button, found beneath almost everything these days, to share the things you've read with your friends. 

But getting that little "like" button to appear on my OWN posts eluded me. Until now. I've finally figured it out and thought I'd make a simple guide to share with y'all. I hope it makes your lives easier!

How To Add The LIKE Button To Your Blog Posts.

Okay, it all begins with a piece of code which looks scary. The term "html" strikes fear into the hearts of many-a-blogger and I'm no exception. So let me state very plainly that THIS IS A COPY AND PASTE EXERCISE. You don't need to understand anything, you just need to follow the steps. It's pretty simple, so don't get scared. 

Step One

In your blogger account, click on the design tab and then click on "Edit HTML".

Step Two

Check the box which says "Expand Widget Templates". 

Step Three

a) Press Ctrl+F at the same time and you'll notice that a search box pops up on your screen.This is the "Find" box. I use Google Chrome and it pops up on the top right of the browser page for me. It'll pop up somewhere for you too!

b) In the find box, type <data:post.body/>

Step Four

That piece of code in your own Blogger template will then be magically highlighted for you. Directly below this piece of code, you need to paste the following gobbledegook: 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div style='padding: 10px 0px 0px 0px;'>

<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>

</div>

</b:if>

Step Five

Click "Save template" and voilà! You should now have a shiny new button at the bottom of each post!

I hope I made this as simple as possible for you. More than that, I hope it works (comment, let me know)! I know there are other ways of doing it and other sites which allow you to pick different designs and colours and such, but this is for simpletons like me who break out in a nervous sweat every at the sight of HTML code! 

I hope you "like" this. He he...see what I did there? 

Lx