Add Facebook “Like” to your Website in One Step [Super Quick Guide]

April 23, 2010


I was pretty Much Excited to Hear the News that Facebook has started the Concept of “Universal Like”.

Universal “Like”??
As The Name Suggests, You could like anything and everything on Web.. The Best Part here is Whatever you “like” on Website will be Streamed into your Facebook News Feed! What’s More! You could share things even without logging into Facebook account.. “Like” it??

Integrating Facebook “like” feature in your WordPress Blog.

I Visited Facebook’s developer page to Check out how to integrate the Like button to my Website.. Though in that OpenGraph page they have explained very neatly, I was Searching for a Very Simpler way to add a Like Button to Website.. Here Goes the details..

If you are a WordPress User Just Copy the below IFRAME Code.. Go to Your Themes and find the single.php and dump it where you would like to have the button ( before the post / after the post)

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:530px; height:60px"></iframe>

On Successfully inserting the above code in single.php you could see the facebook like button on every individual posts. If some one likes your post, the title of post is posted in their Facebook’s News Feed. Its all due to power of get_permalink() in the code!

For Thesis Themes on WordPress
Are You Using Thesis Theme, and Cannot Find single.php to insert Facebook like code?

Just add this code at the end of custom_functions.php file

function add_like() {

if (is_single()) { ?>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:530px; height:60px"></iframe>
< ?php
}
}
add_action('thesis_hook_before_headline', 'add_like');

I have Used the thesis hook thesis_hook_before_headline to make appear the like button below headlines of every post...
Other Suggested hooks are
thesis_hook_after_headline
thesis_hook_before_headline
thesis_hook_after_post_box
thesis_hook_before_post_box

To Learn More about Like button customization and to generate like button of your choice check facebook like plugin page..

Hope the Post was helpful... Let Me know if you have any Doubts in Integrating facebook like button for your web page. Tweet me @che2on

Similar Post:
  • How To: Embed a Facebook Subscribe button on your Website
  • How to Add/Enable Extensions in Google Chrome: A Step by Step Guide
  • Amazing Facebook link? NO!
  • 2 Updates on Facebook : Shuts Down Lite Version and ‘Become a Fan’ changes to ‘Like’ Button
  • Facebook adds Application Privacy Settings
    • http://blinkky.com blinkky

      It would be more easier if there is plugin for this =)
      .-= blinkky´s last blog ..Free Video Converter – Next Video Conveter =-.

      • http://www.madrasgeek.com Srivathsan

        You have a wordpress plugin too. Check my blog post :)
        .-= Srivathsan´s last blog ..Desktop Based Simple To-Do List Application =-.

        • http://chaaps.com Chethan Thimmappa

          checked it bro.. quite good plugin

    • http://www.blogsolute.com Rohit Langde

      I read about it on many blogs but here I saw the implementation. Well, after Liking, it doesn’t publish any update on my account that “Rohit likes on Chaaps. This feature should be added I think.
      .-= Rohit Langde´s last blog ..F-Secure Internet Security 2011 Preview Free Download valid for 6 Months =-.

      • http://chaaps.com Chethan Thimmappa

        hey it already exists.. and its perfectly working .. it will be shown in your “Recent Activity” …let me know if you didn’t find

    • http://www.whizfactory.com Scott

      Hi, thx dudu, will apply it to my site as well, thx…
      .-= Scott´s last blog ..Change Your WordPress Smilies With Very Pleasing Gifs Pack =-.

    • shweta

      Hi, i’m trying to implement facebook “like” button in my blackberry application. if anyone has any idea plz do reply asap…

    Previous post:

    Next post: