UPDATED: Nov 24, 2011
Since Facebook introduced the Open Graph protocol and Social PluginsSocial Plugins at the April 2010 f8 Developers Conference, they have evolved the way these plugins are implemented.
This tutorial has been updated to reflect these changes.
NOTE: This does involve modifying the PHP files for your WordPress installation. Make sure you save the originals in case anything goes amiss.
If you’re not comfortable editing your WordPress source files, a number of WordPress plugins for Open Graph are available to handle this for you.
Step 1: Get an App ID for your WordPress CMS or Blog
To make your WordPress website or blog an “object” in Facebook’s Open Graph, you first need to get an App ID for your site or blog.
Read my tutorial on getting an App ID for your website or blog.
After you have successfully set up your blog as an application “object” in Facebook’s Open Graph, you then need to add the appropriate <html> and Open Graph meta tags to your site pages.
Step 2: Add Open Graph Meta Tags to your WordPress Blog Header File
You’ll need to add the meta tags to your “header.php” file located in your theme’s folder (wp-content > themes > [your theme] > header.php).
You’ll need to add a couple new values to the <html> tag of your header:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
And then add the following meta tags (taken from our blog) to your header.php:
<meta property="fb:admins" content="YOUR-ADMIN-ID"/>
<meta property="fb:app_id" content="YOUR-APP-ID" />
<meta property="og:type" content="article" />
<?php if(is_home()) {
?><meta property="og:title" content="My Blog Name" /><?php
} else {
?><meta property="og:title" content="<?php the_title_attribute( $args ); ?>" /><?php
}
?>
<?php if (is_home())
echo '<meta property="og:url" content="YOUR-BLOG-URL" />';
else echo '<meta property="og:url" content="'.get_permalink().'" />';
?>
fb:admins
Replace YOUR-ADMIN-ID with your Facebook User ID. Read these instructions on how to find a Facebook user’s numeric Facebook ID.
fb:app_id
Replace YOUR-APP-ID with the Application ID assigned to your blog when you set it up on Facebook, as described in this article (referenced above).
og:title
For the “og:title” attribute, you’ll want this to return the title for each blog post. As you can see from the above example, this simply involves a bit of PHP code that pulls in the post’s title.
og:type
As you see above, I utilized a PHP conditional statement in header.php to have the <meta property=”og:type” content=”blog” /> tag for the home page and the <meta property=”og:type” content=”article” /> for individual posts. This comes by way of Otto who has an excellent blog on WordPress, as well as a Facebook Connect plugin for WordPress. And this approach is also supported in this GitHub post.
As for the implications, in terms of Insights and the display of Pages in your “Home > Ads and Pages” section of your personal profile, we’ll have to wait and see.
You’ll also need to add the <fb:like> XFBML to your index.php file for your theme, as well as the call to the JavaScript SDK. I added it as the first content after the “main-content” DIV. You will then see the Admin Page option next to the Like button.
og:url
I used some PHP to set the URL for our blog’s landing page to the blog URL set in the application (YOUR-APP-URL). On the individual pages or posts, it will fill in the Permalink for the page/post. In “single.php” (for individual blog posts) and “page.php” (for pages), we omit the “href” value in the “Like” button code (fb:like).
og:description
The “og:description” meta tag: If you omit this meta tag, the value will be the “description” meta tag for the post, and that is what will show up as the description on a user’s Facebook profile when they “Recommend” or “Like” your post. (We use the WordPress SEO plugin Headspace which gives you the ability to create custom title and meta tags for each post. Highly recommended!)
og:image
This is simply the full/absolute URL to the image you want to have appear when someone “Likes” your page and it’s added to their personal profile stream. We omit this meta tag so that it uses the lead image from the blog post.
The below image is from my profile after I “Liked” this blog post:
The orange logo is the logo pulled in with the “og:image” meta tag (make sure you make this value the FULL URL to the image!).
The title of the post is linked in blue, and the description meta tag content is the description below the title. The “I like this post!” is the comment I added to the Like.
And that takes care of the meta tags. There are a number of additional social graph meta tags you might want to check out.
Step 3: Add the Like Button or other Social Plugins to your Individual WordPress Posts or Pages
First, as mentioned earlier, you must add a call to the JavaScript SDK, if you use the XFBML/HTML5 version of the social plugin (which I recommend).
You will add the below code right after the opening <body> tag, which is usually in “header.php”. In some WordPress themes, it may be in “single.php.” Yes, WordPress themes vary!
<div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR-APP-ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Adding the Like Button to your Individual WordPress Pages
Facebook generates the Social Plugins code for you, on its Social Plugins page.
You should choose one of the two flavors of XFBML, either HTML5 or XFBML. If you use the iFrame version, you won’t get user-interaction data via Insights, and users won’t be able to add a comment to the Like they make.
However, for users who can’t modify their WordPress code, either the iFrame method or the use of a WordPress plugin will be their only options.
The Social Plugins you can use on your blog are:
For each plugin you wish to add to your WordPress blog or CMS, simply visit the plugin page, add the parameters into the “configurator” (as Facebook calls it), then click the “Get Code” button.
Facebook now enforces your associating the plugin with an existing App ID that you admin. You will probably want to associate with the Facebook application you created for your site or blog to get an App ID, and your site should appear in the pull-down menu next to “This script uses the app ID of your app”.
Just add the code Facebook provides for your plugin where you want it to appear on your WordPress posts and/or pages. This will involve editing index.php and single.php.
To add a Social Plugin to each post (commonly the Like/Send buttons), you will need to edit the single.php file:
wp-content > themes > YOUR THEME DIRECTORY > single.php
For the HyperArts blog, I put the Like/Send Button code just before the <div class="entry"> ... </div>. (I created a new DIV to contain all the social buttons on our posts — Google+, LinkedIn Share, Twitter Button and the Like/Send Button.)
Add the Like button to Pages by adding the above code for Posts — but with the below code for <fb:like> tag where the only difference is the PHP code for the “href” value — to the page.php file (wp-content > themes > YOUR THEME > page.php). For our blog’s theme, I put the code just before the closing tag of the <div class="entry"> ... </div>:
<fb:like action='like' colorscheme='light'
layout='standard' show_faces='false' width='650' send="true"/>
After saving your changes to the “single.php” file, you should be ready to go.
“Like” or “Recommend”?
For our blog, which contains more how-tos and tutorials than editorial content, I originally used the “Recommend” button, but decided that users were more familiar with the “Like” so I settled on “Like.”
Further Resources
- Otto on WordPress Blog: How to Set Up Your Facebook Connection Application (Excellent!)
- Facebook | Answers to Your Questions on Personalized Web Tools
- Facebook Social Plugins Help Center
- Facebook Open Graph protocol
- Available Social Plugins
- Inside Facebook Reviews Facebook Social Plugins
- Facebook f8 Conference
- Facebook Graph API
- Like Button
- Facebook JavaScript SDK
- Facebook for Web Sites [sic]
- Facebook Platform Showcase
- Create a Facebook Application
- How to Programmatically Administer Off-Facebook Pages with the Open Graph API | Inside Facebook
- More on Open Graph from Inside Facebook
Pingback: Facebook Like Button – Non così facile!
Pingback: WordPressハッカーズ
Pingback: How To Add Facebook Social Plugins To Your Wordpress Blog | Holographic Life Mapping
Pingback: Multiple Facebook Like buttons on one page « Loemind!