Add Facebook Like Button to your website

Facebook Like button provides user with the option to interact with (Like) your webpage and share it with their friends. You can easily set this up for your website.

Go to this page Like Button - Facebook Developers. At the bottom of the page you will find Like Button widget generator as shown below.

Facebook Like Button widget generator

As you can see Facebook provides you with some options to customize your Like Button widget -

  • URL to Like
  • Layout Style - standard or button_count
  • Show Faces
  • Width
  • Verb to display - like or recommend
  • Font
  • Color Scheme - light or dark 

By using this widget generator you will be able to install Like Button only on a single webpage as you can enter only one URL in URL to Like textbox at a time. Well this problem can be easily solved. Leave the URL to Like button blank for now and customize your Like Button widget by changing rest of the settings. Once you are done with this click on Get Code button.

Like Button

Getting Facebook Like Button Code

Copy the iframe code from the Your Like Button plugin code window and click on Done. Now lets analyze this iframe code - 

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;
layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;
colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

In this iframe source code there is a href parameter. All we need to do is set the value of this href parameter to the URL of the page for which we want to activate Like Button plugin. Replace the default value of the href parameter (http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike) by whatever URL you wish to.

But obviously we don't want to hard-code any specific URL as value of the href parameter rather it would be wonderful if it picks the current URL of the webpage by itself. To do this simply replace the default value of the href parameter (http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike) by this -

<?php echo rawurlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?> 

The above code gives you the URL of the current page. So the complete modified code will be -

<iframe src="<?php echo rawurlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&amp;
layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;
colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
 

And now you can directly use this script on all the webpages of your website. 

 

Tags: