Facebook, The most popular social networking site ever created in the history of mankind. With 1.3 billion monthly active users facebook stood top in rankings of the social networking sites. So it become one of the best platform for marketing and publicity too. Having facebook pages helps in advertising and getting traffic to the official websites. This is one way to drive traffic from social networking site to official website. Adding a Facebook Like box Widget or like Button in the sidebar of your Blogger blog or WordPress website gives the users an option to stay connected with you through Facebook page and so as to Follow and get your updates directly.

How to Add this Facebook Like Box/Button Widget in Your Website Sidebar:

Add a Facebook Like box/Button Widget in Your Blog/Website Sidebar simply without knowing any coding work.
In this tutorial , First we will get the relevant code of your Facebook page from facebook websites Developer section, then we will place the code in the Html part of your Template Code.

So, lets start here.

STEP 1:

Login to your Facebook account and Visit this LinK: https://developers.facebook.com/docs/plugins/like-box-for-pages

STEP 2:

There you’ll see a couple of empty which you have to fill.

In the Facebook URL box Enter your facebook page URL.(Here we are adding MJ facebook page url– www.facebook.com/MJ )
Enter your desired dimensions for Your Facebook Like Box in your Website, width and height in pixels. If you don’t have any idea. you can give 250, 300 which suits for many websites. You can change those values Later whenever you want.

In the color scheme, you have a drop down menu where you can chose the color scheme. Black may look good for FB like box, but many website/blog admins prefer white color scheme. Though you can change this color scheme whenever you want.

you can also opt for options like whether to show your facebook followers faces or not, whether to show the header, border for the like box or not. There are check boxes available and all you need is to check or uncheck them according to your choice.

STEP 3:

When you are done with customization press the GET CODE button. A pop-up window will appear with Code generated which is present 2 parts. Make sure you’re in the HTML5 tab .

STEP 4:
Copy the code in the first block.

STEP 5:
Now You have to manually edit the template code of your blog in the blogger to add this code. Goto Blogger Dashboard and in the template section click on edit template code, You need to Paste this code in the body section. Using Ctrl+F find ‘</body>’ tag (without quotes) and paste the code just before that tag and save the template.

STEP 6:
Now copy the second block of code.

STEP 7:
Goto layout option in blogger from your dashboard. click on ‘add a gadget’ and add ‘html/javascript’ gadget by clicking the plus button.

STEP 8:
Now give a title to your like box and paste the code you copied from the 2nd block in content box. Click on save and drag the gadget in the layout section to place it in the order you want in the sidebar. Click on ‘Save the arrangement’.

FINISH:
Now you’ll see the facebook like box in your Blog/website sidebar.

I personally feel facebook like box is a lot more better than annoying your audience with the Facebook pop-up like box. Please a comment and let us know if you’ve used this method.