Add Facebook Like button to main page and each post on blogger

Facebook like button is an easy way to express your readers like with your blog/ article. Here is a simple tutorial to add a Facebook like button to your blog showing the whole like count of your blog and a like button showing each likes of currently opening article. It is quite easy to insert in your blog/website with a simple code.

Like button for main page showing whole likes of your blog

There are three different styled Facebook Like buttons provided by Facebook. They are

• Standard 
• Button_count
• Box_count

Facebook Standard

Facebook Button_count

Facebook box_count

Before copying the code read this.

We have the three like buttons in our hand (see above images). And I have provided three code snippet for each of the buttons to make easy those who are not familiar with codes, actually the three codes have only slight changes. Choose one which is more suited to your webpage.

Note: The Yellow marked parts in the below provided codes are to be replaced with the URL of your Facebook fan page* (not of your profile page).

*- The Facebook fan page means that the page you created for your blog fans in Facebook. 

How TO Get It?: Just log in to Facebook >> Open the page you created for your website (or Create one ). Now just copy the URL in the address bar of your Browser.

Pasting your Page URL to the Below Code

The Yellow marked portions are my Facebook page URL (The whole yellow marked are not URL, be careful when editing). Actually my URL is http://www.facebook.com/pages/mobihackmanin/239717319413715  But when it is implemented in the code we have to use

%3A%2F%2F  for  ://

%2F                   for   / 

in between the URL. And it becomes like 

http%3A%2F%2Fwww.facebook.com%2Fpages%2Fmobihackmanin%2F239717319413715 

(see I used in the below code snippet). Otherwise when it runs it shows only 'error' instead of the button.

Code for a Standard Facebook like button

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fmobihackmanin%2F239717319413715&amp;send=false&amp;layout=standard&amp;width=300&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=35&amp;appId=256026674531562" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:35px;" allowTransparency="true"></iframe>

Code for a Facebook button_count

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fmobihackmanin%2F239717319413715&amp;send=false&amp;layout=button_count&amp;width=300&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=35&amp;appId=256026674531562" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:35px;" allowTransparency="true"></iframe>

Code for a Facebook box_count

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fmobihackmanin%2F239717319413715&amp;send=false&amp;layout=box_count&amp;width=300&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=35&amp;appId=256026674531562" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:35px;" allowTransparency="true"></iframe>

Extra Adjustment on Facebook Like button (width, Color Scheme, Button Text)

In Addition to the yellow marked URLs you can also see some more code parts are yellow marked. I will explain them here. The marked sections are

• URL of your Fanpage (We discussed it above)
• light   :- If you are using a whitish template of theme for your website you can use the light  , but if you are using a dark theme you can replace the word this  dark .
• like    :- If you want to show recommend  instead of showing like on the button you can simply  replace this term to  recommend 
• 300   :- This is the width (in pixel) of the portion in which the like button appears.You can change it as your wish.

How to Add this code to a blogger blog?

It is quite easy, no harm to have a try

1. Log in to blogger
2. Click 'Layout' from your dashboard (the panel appears after login)
3. Click on 'Add Gadget'
4. Choose 'HTML/ JavaScript' from the list.
5. Give a head line if you want otherwise leave blank, and paste the code in the second box
6. That is all ...You done.!

Hope this would be helpful to you ..We have made an effort on this ..If you like this please like us on the facebook

...