How To Add Facebook Like Button With Dynamic URL To Your WordPress Blog

The Facebook Like Button or Recommend Button code generated at http://developers.facebook.com/docs/reference/plugins/like will only bring Facebook users to your home page or whatever URL you provided to generate the code. If a Facebook user “Like”d your article posted on a specific URL, your home page will be displayed to all of his or her friends instead of the page “Like”d by the site visitor. If your web site visitor “Like”d a few articles from your sites, then your home page will be displayed to all of his or her friends instead of the web page that he or she “Like”d. Surely, Facebook members would get annoyed if the same URL appeared on their Facebook again and again. So how do you solve this problem?

How to create a Facebook Like button that could display the URL of the web page instead of the home page URL that you provided to generate the code at Facebook plugin site?

How to have a Facebook Like button with dynamic link?

If you’re using WordPress blog, you can follow the following steps.

1. Login to your WordPress admin account and click the “Appearance” link located on the left sidebar.
2. Click Editor.
3. Click on  Single Post (single.php) under Theme Files (Templates) section located on the right sidebar.
4. Look out for the following code <?php comments_template(); ?>
5. Copy the following code and place it on top of  <?php comments_template(); ?>  (i.e. the line before <?php comments_template(); ?>) :

The Standard layout code above will appear as below:

Facebook Like Button

If you don’t want faces to to be displayed, you should set the show_faces above to false i.e. change show_faces=true in the above code to show_face=false.

If you prefer the Button Count layout instead of the Standard layout as shown above, copy the following code and paste it to your WordPress Single Post template:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo 'http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];?>&layout=button_count&show_faces=true&width=450&action=like&font=arial&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>


Button Count layout will look like this:

If you want Facebook Recommend button to display, change action=like in the source code to action=recommend.

Facebook Like Button For Non-Dynamic & Static HTML Page

If you are not using PHP or your web page is static HTML page, you can add the following JavaScript code:

<script type="text/javascript">
document.write("<iframe src="http://www.facebook.com/plugins/like.php?href="+document.location.href+"&layout=standard&show_faces=true&width=450&action=like&font=arial&colorscheme=light\" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>");
</script>


If you need help with adding Facebook Like button to your WordPress blog, you can contact me by adding me as friend to your Facebook.