Home > Design, Tutorial, Wordpress > Insert Facebook Like Button to WordPress

Insert Facebook Like Button to WordPress

April 24th, 2010 Leave a comment Go to comments


Facebook Like Button
Taken from Cordobo.com, Integrate Facebook’s “Like” Plugin into WordPress.

The original code can be generated from Facebook’s Like Button generator. Here is how to insert the code.

Update: One of the WordPress social bookmark plugin, Digg Digg, now add Facebook Like Button.

Insert the Code

1. Edit your theme. Appearance -> Editor -> Single Post (single.php)
2. For example I insert the code after the content:

<div class="content">
<?php the_content(); ?>
<div class="fixed"></div>
<insert the code here>
</div>
<div class="under">

3. Here is the code to be inserted:

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

4. So the final code would be:

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

5. See the different from original code generated by Facebook?
Original:

href=http%3A%2F%2Fwheeqo.web.id%2F&amp;

Modified:

href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;
Delicious
1 save
Share

Related posts:

  1. Tips Insert Image in Joomla! There are many ways to insert image(s) in Joomla!. The...
  2. Fix RSS Feed Error in WordPress Recently I got error when I try to validate my...
  3. Non-System Web Font with HTML5 @font-face Syntax In this post I just want to try the new...
  4. Use Visibility Parameter and Define Attribute in Block AutoCAD tutorial: Use Visibility Parameter and Define Attribute in Block...
  5. Use Microsoft Access for Certificate Publishing Microsoft Access can be a tool to increase the productivity...

Related posts brought to you by Yet Another Related Posts Plugin.

Categories: Design, Tutorial, Wordpress Tags: ,
  1. PlF
    April 25th, 2010 at 12:23 | #1
    Reply | Quote

    Here’s the Facebook Like button plugin available from WordPress:
    http://wordpress.org/extend/plugins/like
    No coding necessary, you can customize the look and placement of the button in the settings interface

  2. R. Bambang Widiatmoko
    April 25th, 2010 at 18:55 | #2
    Reply | Quote

    thanks!

  1. No trackbacks yet.