How to Add a Facebook Like Box to your Blog

The last 5 months I have spent many hours setting up my blog. It has been really fun, but also a huge learning curve! Everything on my blog that you can see has been completely customized by me (with a little help from blogger and other internet tutorials) and there are a few things that I thought I would share.

Professional bloggers often have designers and IT people behind them, but most of us are just blogging for the love of it and to share and participate with like minded people. So I thought in 2012 I would share some of the technical bloggy things that I have taught myself because I am sure that there are lots of you who would like some simple tutorials that will improve your blog.

For the first tutorial, I thought I would show you how to add a Facebook 'Like' Box to your sidebar.(sorry wordpress friends, this tute is for people who use Blogger) Having a complementary Facebook page is great - it allows you to interact with your followers, have conversations, give people an alternative method of following, especially if they don't have a blogger account. I use facebook to share lots of my 'behind the scenes' projects, ideas and ask opinions of my readers. I also share tutorials and other things I've found out there in internet-land that I think my readers would be interested in. So come on over and follow me!

Now for the tutorial - first, open four windows / tabs on your browser. In these tabs, open this tutorial, your blogger dashboard, your blog's facebook page and this page.

Next step is to complete the little online form to get your HTML code. Copy the URL address of your blog's facebook page and paste it into the box where it says 'Facebook page URL'.

Once you have done this, you will see on the side of your screen an example of what your box will look like. You can see mine in the screen grab below.

Most bloggers put their like box on their side bar. To make sure it fits, you need to alter the width. Mine is 190 and it fits really nicely in my sidebar.

Play around with the other options in the form. For example, I chose not to have my stream published in my like box, just the like button and my followers. Choose the options that suit you and your blog. Once it looks the way you want it, click 'get code'

You will have two boxes of code here. Copy the code from the first box.

Go to your blogger dashboard. Go to layout and on your sidebar choose the 'Add a Gadget' box. From the list that appears, click the little plus sign to choose the HTML/Java Script gadget.

Copy and paste your code into that box. I didn't bother to title the gadget as it is obvious what it is.

Go back to the facebook code box and copy the code from the second box. Paste directly under the first lot of code. Your code box should now look like the picture above.

Click save.

Position your gadget on your sidebar where you want it and click 'save arrangement'. You are done! View your blog to make sure it looks the way you want it. Now people can 'like' your facebook page without having to leave your blog.

I hope you found this tutorial helpful - I plan to do a few more tech tutorials, so if there is something particular you would like to know, comment or email me and I will do my best! If there is something in this tutorial that doesn't work, please comment or email so I can help you further.

Happy blogging!