How to Add the Facebook 'Like' Button to Blogger

I had a bit of trouble working out how to add the Facebook 'Like' button to the side of my Blogger page, so I figure I'm not the only one. Here's how I managed to add the Facebook 'Like' and 'Share' buttons to my Blogger blog. (These are the buttons on the right-hand side of the blog, not the one under each post.)

Before you begin, you will need to log into your Facebook and Blogger accounts. If you do not have Facebook and Blogger accounts, you will need to sign up for them, and then log in.

      Prepare to add the Facebook widget to Blogger

a.       Go to your blog

b.      Click on the ‘Template’ option in the left-hand side column. It is about two from the bottom.

     Find the ‘Badges’ page on Facebook.

a.       Go to your personal page, not your wall, by clicking on your name at the top right of your Facebook page.

b.      Click on the ‘About’ tab.

c.       Scroll to the bottom of the page and click on ‘Help’. (Do not try scrolling to the bottom of your wall for this as Facebook tends to keep adding more news items before you can click the button. It’s very frustrating.)

d.      Type 'badges' in the search bar at the top of the page.

e.      Click on the drop down item “Badge”, and then click ‘Learn more’ in the text that appears.

f.        Select the ‘Get our social plugins (Like button, Activity Feed) here’ option in the blue bar under the pictures of the other options NOT the 'Like badges' option with the picture.

 

    Prepare the Facebook widget for adding to Blogger.

a.       Click on either the ‘Like button’ heading or the Like symbol beside it.

b.      Select the text in the ‘URL to Like’ box and delete it.

c.       Insert the URL for your blog in the ‘URL to Like’ box.

d.      Check that the ‘Include Share Button’ option is ticked.

e.      Check that the ‘Show Friends’ Faces’ is ticked if you would like faces shown, or unticked if you would not.

f.        Click on the ‘Get Code’ button.

g.       A pop-up titled ‘Your Plugin Code’ will appear. It has two sets of code in it. The code in the top box needs to be added to the html of your Blogger page. The code in the bottom box needs to be added to the widget box.

   

    Add the Facebook widget to Blogger

a.       Go to your Blogger Template page.

b.      Under the ‘Live on Blog’ picture, you will see two buttons: ‘Customize’ and ‘Edit HTML’. Click on ‘Edit HTML’.

c.       Copy the code in the top box of ‘Your Plugin Code’ provided by Facebook.

d.      Scroll down the html on the Blogger Template page until you find the word ‘body’. You will notice the little arrow to the left of the word ‘body’. This is the start of the body command. Look along the line that starts with ‘body’ until you come to an arrow that points the other way. The arrows are like brackets. You must not add anything between them. When you get to the arrow pointing the other way, the bracket is closed. Place your cursor after that arrow and then paste in the code from Facebook.

e.      Click on ‘Save Template’ at the top of the page.

f.        Go to the Facebook code and copy the code from the bottom box.

g.       Return to Blogger and click on the Layout button on the left-hand side of the page.

h.      Click on an empty box that says ‘Add a Gadget’.

i.         In the pop-up box scroll down until you reach the ‘HTML/JavaScript’ option. Click on the HTML/JavaScript option. A pop-up will appear.

j.        In the title box type ‘Like’ or something similar to identify the widget you are adding.

k.       In the content box paste the Facebook code you have copied from the bottom box.

l.         Click on ‘Save’.

m.    Look at your gadgets to make sure you now have a box labelled ‘Like’ (or whatever you titled your new gadget).

n.      Click on ‘Save arrangement’ in the top right-hand corner.

o.      Choose ‘View blog’ to see what your changes look like.

p.      If you want to move the ‘Like’ button return to the Layout page and click on and drag the box to a new place until you are happy with how your blog looks.

 

NOTE: I did have some screenshots prepared to go with this post, and then I worried about what copyrights I might be violating, so I left them out. I hope you find this post helpful.