June 19, 2010

How To PHP To Create A Facebook Like Button For A Dynamic Wordpress Post Page URL

The Facebook Like Button is a very useful and rapidly popular social web marketing tool that can be applied to websites and webpages. By default, the Facebook's Like Button form will recommend a specific web page that is hard coded into the code snippet (which can be generated by Facebook's Like Button form).

Typepad users now have the Facebook Like Button embedded as a core application, which has helped to generate a lot of traffic to blog websites based on a recent report by Typepad.

It is possible to publish a Facebook Like Button that references a dynamic Wordpress Post page rather than just making recommendations to the website in general.

How to reference the URL for a single Wordpress post

On the Wordpress post page template, below the snippet: <div <?php post_class() ?> id="post-<?php the_ID(); ?>">, you can print the page URL with the following code:

&lt;?php the_permalink(); ?&gt;

The above code snippet, will print the URL of that post page. However, within the Facebook Button invocation, you will need to take a different approach. Below is an example of the Facebook iFrame code for publishing a button without Profile faces to the Wordpress dynamic URL post page. We indicated in bold the <?php ?> tag for printing the Wordpress dynamic page.

<iframe src="https://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80″ scrolling="no" frameborder="0″ style="margin-left: 30px; border:none; overflow:hidden; width:450px; height:30px;" allowTransparency="true"></iframe>

OR for printing HTML code version. Sorry, we will correct the output of quotes soon.

&lt;iframe src=&quot;https://www.facebook.com/plugins/like.php?href=&lt;?php echo urlencode(get_permalink($post-&gt;ID)); ?&gt;&amp;amp;layout=standard&amp;amp;show_faces=true&amp;amp;width=450&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;height=80&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;margin-left: 30px; border:none; overflow:hidden; width:450px; height:30px;&quot; allowTransparency=&quot;true&quot;&gt;&lt;/iframe&gt;