May 18, 2012

Published on with

[Facebook Social Plugin, Add Facebook Like Button to Blog, Insert Facebook Like Box in Blog, Guide to Add Facebook Button into Your Blog, How to Add Facebook Button]


What Is Facebook "Like" Button?


Facebook is one of the largest social networking sites with 900 million users. And by far one of largest sites which can definitely promote blog, site or product. And the easiest way is to add Facebook "Like" button which lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user's friends' News Feed with a link back to your website.

Advantage of Having Facebook "Like" Button in Your Webpage


There are some sheer advantages when it comes to Facebook Like button:
  • Promote or advertise about almost anything to millions of people
  • Gain traffic for your blog or website
  • It shows an expression of affinity to a product or blog or website or any type of activities.

Step-by-Step Guide to Add Like Button


  • Step 1: Log in to your blog or site (if needed).
  • Step 2: Go to Design option to add a new HTML widget.
 For Blogspot, Design -> Layout -> Add a Widget -> select HTML/Java Script from Basic Tab
 For Wordpress, Appearance -> Widgets -> Text
 For your own site, go to site administrator mode and search a way to add HTML widget :)
  • Step 3: Add any of the following HTML codes and additional customization (see in the following sections) and save the widget.

HTML Codes for Various "Like" Buttons


Currently there are 3 main types of Like buttons available, i.e. standard, box count and button count. Choose anyone from these and apply as mentioned in Step 3 on previous section.

Furthermore, for each type you can have additional customization option such as showing faces, adding send button, font, background color (which I described in next section).



IMPORTANT
Replace <Your Blog-site URL without http>
 in the code with your blog/site URL without "http://"


Standard Button





<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2F<Your Blog-site URL without http>%2F&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>


Box Count



<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2F<Your Blog-site URL without http>%2F&send=false&amp;layout=box_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>

Button Count




<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2F<Your Blog-site URL without http>%2F&send=false&amp;layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>


Further Customization You May Like to Apply 


If you like, you can customize the look/settings of your "Like" button changing some additional fields. Those fields (hereafter mentioned as "Attribute" and current values (mentioned as "Value") are marked in Pink in above codes. Following table shows the highlighted attributes with their different values.

Attributes
Value
show_faces
false
true
action
like
recommend
colorscheme
light
dark
font
arial
lucida+grande
segoe+ui
tahoma
trebuchet+ms
verdana

For example, you choose standard button and set "action" value "recommend, "font" value "segoe+ui" and "colorscheme" as "dark" then following will be the like button:

 Congratulation! You Made It


If you have followed the steps, I guess you have successfully inserted "Like" button in your blog/site. Good job! Now your site/blog will have a better chance to reach more people and eventually you will be gaining lot more traffic.

If you have problem with the code or anything I mentioned not working, give me a shout! And if the article is useful for you, please feel free to like it and share it so that it may help some others. 

2 comments:

  1. whenever i am adding this way it is showing gadget name given by me only and not showing anything inside the text part

    ReplyDelete
    Replies
    1. Hi Ranjeet,
      which option you have opted for (standard,button,box)? Have you replaced the red marked words with your site/blog url without http?

      Delete