Add a Facebook Like Button at the Bottom of Each WordPress Blog Post


Are you ready to let your WordPress users "Like" your posts on their Facebook page? Here is an easy way to add a Facebook Like button at the end of each WordPress blog post!

This blog post assumes that you are experienced in manually editing your WordPress php files, understand the importance of keeping track of all changes should you need to restore your blog or update your blog theme, OR - better yet - that you are using the Child Theme method for manually customizing your WordPress Blog. (WordPress has several great tutorials on using Child Themes).

Also, this method works on the themes we work with, but with the gazillion themes out there, your theme may be quite different.

So ... to add a Facebook Like Button after each WordPress blog post, after logging in to WordPress admin, click "Editor" under "Appearance." Click on the index.php file.

Find the section that begins with <div class="postentry"> and find the ending </div>. (The div after the insertion area is <div class="postmetadata"> for most WordPress themes.)

Insert the Like Button code as shown below in red. Naturally, the commends are not part of the actual code, but we recommend you add comments when modifying the WordPress code as shown:

<!-- Like button code-->

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

<!--end of Like button code-->

If you would like to have the Facebook Like Button display on the WordPress blog post when someone clicks on the post title (permalink), follow the same steps above regarding adding the code but edit the file single.php instead.

If you would like to have the Facebook Like Button display on the WordPress blog post when someone is viewing the post from the archive as well, follow the same steps above regarding adding the code but edit the file archive.php instead.

Hope this works for you as it does for us. Cheers!

No comments:

Post a Comment