How to add Facebook Like Box to blogger/blogspot blog using html5

The Like Box is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website or blog. The Like Box enables users to:

• See how many users already like this Page, and which of their friends like it too
• Read recent posts from the Page
• Like the Page with one click, without needing to visit the Page

You must have a Facebook Page for your blog or a personal Fan page before you can generate the Like Box. If you already have a Fan Page, just get the url of the Page handy. 

If you do not have a Facebook Page, you can set up one now for free at :www.facebook.com/pages  Just click on the "Create Page" button and follow the instructions. You can read my tutorial on How To Create a Facebook Page. 

You can get the URL of your Facebook Page by visiting the page on a computer and copying the URL from your browser's address bar. It is easier when you get a short url for your Page, which you can claim at :www.facebook.com/username but you must have at least 25 fans before you can get the username for your page. 

Now, lets get started.

1. Login to Facebook.com 

2. Go to http://developers.facebook.com/docs/reference/plugins/like-box/

3. You will see a dynamic form to fill for you to generate the Like Box as seen in the picture below:

4. Paste or type the url of your fan page into the "Facebook Page url" box. You should notice a preview of the Like Box by the right hand side. 

5. Feel free to adjust the width and color scheme. 

6. If you untick "show stream" , your latest Page posts will not show above the Faces in the Like Box. 

7. Once you are satisfied , click the "Get Code" button. 

    You should see a pop-up window displaying two codes, with the implementation set as: html5

8. Login to your Blogger blog, go to Design/Layout, then "Page Elements". Right on the sidebar or footer,      click on the "Add  Gadget" link. 

9. From the list of gadgets that will pop up, choose "HTML/JAVASCRIPT" gadget.

10. Paste the two codes of your Like Box into it and SAVE.

That's all. 

View your blog and you should see the Like Box. If you are not okay with the width, you can edit it from the code copied into the "html/javascript" gadget.

If you have questions to ask or contributions to make, kindly make use of the comment form below.

In my future posts, I will be sharing more blogging tips and tricks Subscribe to my blog if you do not want to miss them.

Share on Google Plus

About dadasdasdas

My name is Subha. I’m interested in computer science, music and literature. Computers first appeared in my life when I was fifteen. Then I had got my first computer. I remember myself thinking, that it was the best thing in the world. I was playing it whenever I could but some time later, I noticed that I could do a lot more things with the computer, for example programming. So, I have started my graduation in Computer. Later i have decided that I can spread my knowledge among peoples. So, I have started blogging.