Update 8/6/10: This article has been modified from its original version to what (this content) was adapted to for the ASPNix.com blog – which turned out to be better received than the original way I wrote this.
So at some point I will give a general ‘why social media and why you should care’ story, but let’s not waste time with that now. Let’s get right into the thick of things. Have a WordPress blog or WordPress-powered website? Want to add a ‘like’ button? Ok, let’s get down to business. The first thing you’ll want to do is change the namespace of your HTML document. Get into the header.php file of your theme. Typically located in /wp-content/themes/[themename]/header.php - You’ll find these lines of code right at the top of this file. We want to change the attributes of the HTML tag.
<?php
/**
*
* @package WordPress
* @subpackage DeptofAwesome
*/
?>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?> >
We’ll want to change the xmlns (XML Name Space) of our HTML document. Note that changing the header.php file will update all pages that use this include file will be affected. We want to add the Open Graph protocol and the Facebook protocol like this:
<?php
/**
*
* @package WordPress
* @subpackage DeptofAwesome
*/
?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"
<?php language_attributes(); ?> >
Adding the following code attributes to your <html> tag allows for Open Graph and Facebook objects to work on your site:
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"
Now to add the ‘Like’ button to your posts. The button is based on a page’s URL. If you have a blog that’s showing multiple posts, we just have to define the button to pull the URL for each post. A simple and standard button code looks like this:
<?php
/**
*
*/
?>
<fb:like href="yourlinkhere" show_faces="false"
width="300" font="arial"></fb:like>
There are additional configuration options, little tweaks to the button to try and match the motif of your design, but we’re just keeping things simple for now. You’ll want to now go into your main index template found in /wp-content/themes/[themename]/index.php – there’s a tag that’ll have a class of id named ‘postmetadata’ that we care about. In this example, the post meta data (tags, links, comment count, etc) are all contained in a custom function called ‘othergoodness’ – which we can ignore for now. Add your ‘Like’ button code within the tag labeled ‘postmetadata’ and immediately after all other functions are called (you can change placement later). It should look something like this:
<p class="postmetadata">
<?php othergoodness(); ?>
<fb:like href="<?php the_permalink() ?>" layout="standard"
show_faces="false" width="450" action="like" colorscheme"dark"
style="padding-top:10px;"></fb:like>
</p>
Note there are a few extra parameters for this example, just trying to show a little more detail and how you can control some display elements.
Our link, defined by the href attribute, utilizes the permanent link for that particular post. So on a page of 3 posts, each post has unique meta data and a unique link associated with it, we are piggy-backing on that predefined info by calling the_permalink() function for our link.
You’ll also want to add the like button to your single-post and page templates. You can use the same code snippet from your main index template on both of those pages. I recommend you place the code near your comments-template declaration. If you have comments turned off within WordPress, still add your like button near where the comments would be. In our example, the single post page, typically found at /wp-content/themes/[themename]/single.php becomes:
<fb:like href="<?php the_permalink() ?>" layout="standard"
show_faces="false" width="450" action="like" colorscheme"dark"
style="padding-top:10px;"></fb:like>
<?php comments_template(); ?>
Adding the button to a page will work the same way. Find your page template and drop the same code. Page template is typically at /wp-content/themes/[themename]/page.php – and you can place it just before the comments template again. I add it after any admin-specific functionality that’d be relevant to post content to keep interaction elements (likes, comments, etc) separate when visually editing the front-end of the site.
<?php edit_post_link('Edit this entry.','<p>','</p>'); ?>
<fb:like href="<?php the_permalink() ?>" layout="standard"
show_faces="false" width="450" action="like" colorscheme"dark"
style="padding-top:10px;"></fb:like>
<?php comments_template(); ?>
And that’s pretty much it, now the Facebook ‘Like’ button will be on all of your relevant pages and posts. The ‘fb:like’ tag works like any other ‘a’ tag where you can add it to just about anything.
The key to everything with the like button is the URL. What we learned here was how to just go in, drop some open graph and FBML code to dynamically pull the URL per-post or per-page so you don’t have to worry about it. On static sites, naturally you’ll have to add the button to every page with the appropriate URL. There are other methods to add meta data and social interaction to pages and posts, but we can cover that at a later date.
Due to goofy glitches, I cannot add the code within this post (hence the images) I have, however, put together each snippet into a text file, which you can grab here. Use the code at your own risk, etc – feel free to post comments or questions here or in the forums if you get stuck.
