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!

21 thoughts on “How to Add a Facebook Like Box to your Blog

  1. Thanks for sharing this, I have my button, last time I looked, but am always amazed how many blogs don't have this link. BTW, I think your's might be lost, I saw Pinterest, Flicker and Twitter but not the FB button. I found you anyway, and so glad I did!
    I shared this on FB so others can get their buttons set up <3

  2. Hi Ros, It's interesting that there's an option to set the width of the box, as the page says it doesn't support a width less than 292px. I had looked at this but not gone ahead as I needed a much smaller width. Looks like it doesn't matter, as you've set yours much smaller, obviously with no problems. Great tutorial.

  3. Hi Ros,

    Thanks for sharing such a wonderful tutorial! I have just used your post to add the fb like box to my blog. Look forward to following your blog this year 🙂 Tash

  4. thanks, lost my old one int he blog re design and couldn't remember how to put it back on again, wasn't working for a while then i realized i had https:// instead of http:// in front of my fb address.
    cheers cinti

  5. Thank you! I have it in place on my blog. Appreciate that people are willing to share in language and easy to follow instructions for the less technical computer users such as myself.
    ~Amy @ Permanent Kisses

  6. Hi. I appreciate your lesson on how to put a like for your FB page on a blog.

    I did try it, and ended up with too much on there.
    I had my little profile pic, another profile pic only bigger, and part of my latest article. Also, pics of some of my FB likes that are already on there.

    Is there a way to just have Like my FB page????
    I have a lot of free tutorials on my blog side bar and do not really want to take up a lot of room with like to my FB.

    Thank you.


Leave a Reply