Walker News

How To Add Facebook Like Button On WordPress Post Page?

The trick of to add FB Like Button on WordPress post dynamically.It’s easy as falling off a log if you need to add a fancy Facebook Like Button to WordPress post pages without using yet another plugin that might slower down your blog hosted on a shared server.

Personally, am not favor installing too many WordPress plugins, especially those providing simple tweak that can be achieved easily by adding simple PHP codes to functions.php file in an active theme folder.

So, if you’re adventurous and interested to dirty hands with some simple PHP coding, please allow me to show you how to get job done for this subject:

1) Log in to WordPress hosting account and open functions.php file in active theme directory for editing. If this file doesn’t exist on your active theme folder, then create the template file initialized with these two lines:
<?php
?>

2) Insert this block of PHP code after the <?php line:
add_filter('the_content','wfblike');

function wfblike($incontent){

  $FbLike = '<div style="margin-top:5px;width:500px;height:25px;background-color:#CACACA;"><iframe src="http://www.facebook.com/plugins/like.php?href=' . rawurlencode(get_permalink()) . '&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=25" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:450px;height:25px;" allowTransparency="true"></iframe></div>';

  if ($post->post_parent || is_single())
    $incontent = $incontent . $FbLike;
  return $incontent;
}
  • The red color block of code is getting from the official Facebook social plugin page. Please refer there for the updated code, if there is one.
     
  • The blue color code is a standard PHP function called to convert or encode the current page URL to RFC 1738 format that is required by Facebook social plugin.

That block of code (above) will append the Facebook Like Button to each of the post content as well as the zoom-in image rendered by image.php (redirected from Image Gallery).

Now, where is the Facebook Like Button for this page? Well, at this time of writing, I don’t use it here, except the Share This Link on Facebook (bottom of page) and WalkerNews.net Fan page (right pane).

UPDATE:
Just added the FB Like Button to bottom of page as matter of personal preference (not because of this trick doesn’t work for this WordPress theme of WalkerNews.net – I assure you the trick does work!).

Additional notes:

1) Please change the CSS properties of DIV tag used in the block of code (above) to suit your theme, or just drop the DIV tag entirely if you want to.

2) Please refer to FB social plugin page (link at above) to update the red color block of code. FYI, the Iframe version of FB Like Button using “standard” layout with a width of at least 400 pixels allows visitor to add comments after click the Like button.

Custom Search

2017  •  Privacy Policy