A simple way to add a Facebook like button to your website

With over 500 million active users, Facebook is a giant in the Internet sphere. It’s not surprising to see more and more websites and blogs placing Facebook like buttons on their sites to get more visitors and exposure. Placing a Facebook like button on your web page allows people to like your page and share it with their Facebook friends. It’s pretty simple to add one to your site and I’ll show you how to do it in a few simple steps.

facebook like button code

This is what your button will look like. Firstly you need to figure out where you would like to place your button on your web page. You then copy and paste the following code snippet into your HTML and be sure to replace the sample URL with your own web page URL.

<iframe src="http://www.facebook.com/plugins/like.php?href=http://sample.com
&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light"
scrolling="no" frameborder="0" allowTransparency="true" id="facebook-like">
</iframe>

If you have a WordPress blog then you could replace the sample URL with the following code which will get the current URL of your page.


<?php echo rawurlencode(get_permalink()); ?>

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , , ,

  • Share
  • Stumbleupon Cre8ive Commando

    1. imran khan on August 18, 2010

      Good one Adham!!! i “Like” it =)

    2. facebook templates on August 26, 2010

      Great tip Adham. Smart and simple. BTW you have a small problem with a code plugin in wordpress. In chrome it looks a bit strange.

    3. Lewis on March 3, 2011

      Its a nice little feature to have on your site this Adham only problem is i want the text to align to the right and not the left as it does, any idea how i can change it?

    4. Agne on June 17, 2011

      Hi it would be nice to get i right code to my page for like button,as many codes i was trying to add,when you press like it become grey and not comes out to normal again. Not working.

    5. John Bills on November 25, 2011

      I think the most handy way to add this “like” button to your site is to use the official code generator by Facebook 🙂

    Trackbacks

    1. […] This post was mentioned on Twitter by Adham Dannaway, Adham Dannaway, Inv Amigo, Andrew Mathison, Nigel No Mates and others. Nigel No Mates said: A simple way to add a Facebook like button to your website: With over 500 million active users, Facebook is a gian… http://bit.ly/c4ibeC […]


    0

    Have your say!