Tuesday, January 3, 2012

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 comments:

  1. I'm going to have to spend some time reading this and figuring out how to do it! Meanwhile, if you'd like another place to share, I would love to have your tutorial at my Blog Tips & Resolutions party! <3

    ReplyDelete
  2. Thanks for showing this... it's very helpful.
    Came from the Link-Party from http://www.sugarbeecrafts.com/
    Greetings from Germany
    Catrin

    ReplyDelete
  3. Such a great idea, and love your blog! I would love it if you would link this up at my linky party as well! Here is the link http://www.thesouthernproductqueen.com/one-stop-shoppe-linky-party Happy New Year!

    ReplyDelete
  4. Handy little tutorial! HTML code can be so complicated!

    ReplyDelete
  5. 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

    ReplyDelete
  6. 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.

    ReplyDelete
  7. Great explanation! I am a new blogger and I am slowly but surely figuring some of this stuff out. Thank you!

    ReplyDelete
  8. Thanks for the tutorial. Added an action to my "to do" list to work on this Facebook like button -- so much to learn. I am a new follower.

    Debra

    ReplyDelete
  9. You ROCK!!! Thank you for giving this FB-illiterate blogger the keys for putting that like box on my blog. DONE!! I'm featuring you today over on my Facebook page. http://www.facebook.com/pages/Igottacreate/100573240032625?sk=wall
    I also featured you on my blog this week.
    http://igottacreate.blogspot.com/2012/01/blog-tips-cafe-feature-2-and-party.html
    Thanks for linking up at my Blog Tips Cafe party. It's really "clicking" over there!

    ReplyDelete
  10. 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

    ReplyDelete
  11. Thank you so much ! I've wanted to do this forever and couldn't figure it out ! You made it easy.
    Thanks again :)
    I don't sew , but I'm following now :)

    ReplyDelete
  12. 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

    ReplyDelete
  13. You are AWESOME!!! Thank You!!!

    ReplyDelete
  14. 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

    ReplyDelete
  15. Fantastic post with easy to follow instructions - just what we need when navigating the blogging world!

    ReplyDelete
  16. I will have to try this when I'm fully awake . Ha! Thanks for sharing :)

    ReplyDelete
  17. 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.

    barb

    ReplyDelete
  18. Thanks so much for this tutorial! I wasn't sure what to do with the two separate codes, and you saved me a lot of time.

    ReplyDelete
  19. Great tutorial!! TFS!! Just added it to my blog. When you get a moment, come take a look: http://craftybrooklynarmywife.blogspot.com

    Alisha

    ReplyDelete

Thank you so much for your comments - I adore hearing from you! I love to reply personally via email so if your email isn't visible in your profile feel free to leave it in your message so I can get in touch!

Related Posts Plugin for WordPress, Blogger...