Apr
21

Facebook Like Button

View More: Tutorials: All,Tutorials: Web Design -- 6 Comments

Connecting the entire world of Facebook users to your blog post in a matter of seconds using the new Facebook “like” button. We’ve all used the like button on comments, photos, and video on Facebook, but now you can use it on your own website! In this screencast tutorial let’s look at how to get the new Facebook “Like” button up and running on your cool WordPress blog and/or website. This will make you the hippest hipster ever!

WordPress – paste this code where you would like the button to appear.

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode(get_permalink()); ?>
&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>

Other websites – paste this code where you would like the button to appear and
replace “http://yourwebsiteaddress.com” with the URL of your page.

<iframe src="http://www.facebook.com/plugins/like.php?href=http://yourwebsiteaddress.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>

Add the CSS to your main stylesheet.

iframe#facebook-like { border:none; overflow:hidden; width:450px; margin: 0 0 -100px 0; padding: 0; }

Like Button Creator Tool

Facebook Social Plugins

Install the WordPress Plugin

  1. Daniel says:
    April 22, 2010 at 3:07 pm

    Hey Brandon,
    I was wondering if you knew how to add the “like” button to tumblr posts like you showed how to do in wordpress posts in this tutorial.

  2. Brandon Setter says:
    April 22, 2010 at 3:28 pm

    You could try replacing “http://yourwebsiteaddress.com” in the Other websites code with:
    {url}
    or
    {Permalink}
    Let me know if that works or doesn’t work…

  3. Todd says:
    April 22, 2010 at 8:14 pm

    I wrote a plugin that makes this much easier and offers a live preview in the wordpress settings while you play with the different options. http://bit.ly/awqa5C

  4. Yahya says:
    April 24, 2010 at 9:02 am

    Hey Brandon, I watched this video and the php coding really helps. Just one question.

    Have you seen those like button that after you like it and you hover the button, a small pop up appears allowing you to type something.

    It’ll be great if you can have a video tutorial on how to achieve that. You can take a look at Flixster.com to see the effect.

    Look forward to your next video and thanks again! =D

  5. ivo julyanov says:
    June 23, 2010 at 3:03 pm

    I think the space in the bottom of the iframe is because there is true value of the show-faces variable. This shows avatars of Facebook profiles under the Like button.

  6. Ben says:
    July 21, 2010 at 9:03 am

    This is such a great way to get some extra traffic, and because Facebook is so big it just makes it even better! Thanks for the share buddy :-)

Your turn...


« | »