Facebook's new Open Graph protocol is now official, having been announced and launched this past Wednesday at the Facebook f8 Conference. It is the successor to Facebook Connect which will be slowly phased out, and it is a big improvement, making it much easier to "socialize" your Web pages into Facebook's hyper-expanding social network.
I must admit it was hard to sit still at the f8 conference after Mark Zuckerberg made the announcement in his keynote address and I attended a couple sessions that delved deeper into the Social Plugins and the Open Graph protocol. As soon as possible, which happens to be today, I decided to start experimenting by adding some social plugins to my WordPress blog.
I decided I could save others a lot of time if I wrote up a tutorial. So here it is....
Adding the Facebook Social Plugins to your Web Page or Blog — XFBML or iFrame?
Facebook offers two methods to add their social plugins to your Web page or blog posts:
- A simple iframe which can be easily dropped into the Web page code;
- The <fb:like> XFBML tag, which requires that your page/post make a call to the JavaScript SDK and that your page be set up as a Facebook application (quite easy).
I decided to go the XFBML route which, although a bit more complicated, is more feature rich than the iframe method. For example, after clicking on your Like/Recommend button, the user can add a comment to the profile post. With the XFBML Like button, the post on the user's personal profile looks like this (if, and only if, they add a comment):
With the iFrame Like button (or if the user doesn't add a comment with your XFBML version), the post on a user's profile shows up like this:
New WordPress Plugins for Facebook Social Plugins
If you'd be happy with the simpler iframe method, there are already several WordPress plugins to add the Like button. And here's a good post on adding the iframe Like button. But, remember, with the iframe method you can't use the extended features such as the user being able to add a comment when "liking" your post or blog. There is also a WordPress plugin that will add the XFBML social plugins to your blog, by Otto.
Create an Application - Tell Facebook Your Website, Web Page or Post is an Application
The Web page or blog post to which you will add Facebook's social plugins or other features that interact with Facebook's Graph API will be viewed by Facebook as an "application," which allows the page or post to use the JavaScript SDK. Here is the drill:
While logged in to Facebook, go to Create an Application page. You will see this:
- Enter the "Site name" value — it will be the name of the application. Just give it a short descriptive title (I used "HyperArts Blog");
- Under the "Connect" tab in your new application, enter the full URL to the website or Web page (I used "http://www.hyperarts.com/blog/" - but individual posts will have a specific URL directly to the post via some PHP code in the Like button code, as described below.)
NOTE: Make sure the Connect URL exactly matches your site URL
- Select the appropriate locale;
- Enter the CAPTCHA characters, and click through, and viola! There's your application.
The "Application ID" value is the one you'll want for our purposes in this post. You can always access this "application" by going to the Developer Dashboard:
With your Web page or blog set up as an application with an app ID, you can now use the JavaScript SDK. There are many other things you can do with your application via the Facebook Graph API, but this is outside the scope of this post.
Add 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://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>
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="Blog" /><?php
} else {
?><meta property="og:title" content="<?php the_title_attribute( $args ); ?>" /><?php
}
?>
<?php if (is_home())
echo '<meta property="og:url" content="YOUR-APP-URL" />';
else echo '<meta property="og:url" content="'.get_permalink().'" />';
?>
fb:admins
Replace YOUR-ADMIN-ID with your Facebook User ID. To easily get your Facebook User ID, you can use another aspect of the social graph: http://graph.facebook.com/timware (substitute your username for "timware"). This will pull up the information that is publicly available for that user. You'll want the "id" value for our purposes here.
fb:app_id
Replace YOUR-APP-ID with the Application ID assigned to your website when you set it up on Facebook, as described above.
og:title
For the "og:title" attribute, you'll want this to return the title for your 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 "Recommended" a blog post:
The green 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 "SEO for 2010 - Easier & Harder!" is the comment I added when I used the "Recommend" link on the post. The commenting feature can be used only if you use XFBML instead of iframes for the Like button, as mentioned earlier in this post.
And that takes care of the meta tags. There are a number of additional social graph meta tags you might want to check out.
Adding the Like Button to your Individual WordPress Posts
The below code includes the call to the JavaScript SDK mentioned earlier and the Like button XFBML code. To add the Like button to each post, you will need to edit the single.php file (wp-content > themes > YOUR THEME > single.php). For our blog's theme, I put the following code just before the closing tag of the <div class="postbody entry"> ... </div>:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:like action='recommend' colorscheme='light'
layout='standard' show_faces='true' width='500'/>
Adding the Like Button to your Individual WordPress Pages
For WordPress Pages, the only difference from the above code is the URL in the <fb:like> tag. 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='recommend' colorscheme='light'
layout='standard' show_faces='true' width='500'/>
The only thing you need to change in the above code for both posts and pages is YOUR APP ID, to the value you get from your application's page on the Facebook Developer dashboard, as described earlier.
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 changed the "Like" button to be a "Recommend" button, simply by changing the "action" attribute in the <fb:like> tag from "like" to "recommend". "Recommend" is also more appropriate when someone wants to share a page on, say an environmental disaster, and clicking "Like" isn't really appropriate.
I then added, via an iframe, the "Recommendations" social plugin which shows our blog posts that people have recommended via the button, and how many times each post was recommended.
Finally, I added the "Like Box" social plugin which displays a box that displays Fan Page data to select from, including connections (with pictures) and the stream. I just opted for the connections.
If anyone has any more insight into this, please comment....
Facebook Social Plugins 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
Static FBML Code Templates for Sale!
#1 by Aaron Johnson - August 2nd, 2010 at 14:07
When I fill in the information to "Create an Application" and hit the "create application" button, a blank, white page is the result. Nothing to fill in. I've done this numerous times and even added a / mark at the end of my blog's domain. I use the full address including the http:// and nothing. My blog runs on WP and I've updated the version.
What up?
#2 by fareed | editthesis - August 7th, 2010 at 23:42
thank you for a great guide its working
#3 by DJ - August 14th, 2010 at 19:10
Installed "fbog-ilike-button" plug-in using i-frame setting for buttons to appear on posts & pages and it shows up, but what about Admin options?
Implemented FB Like button on other pages on website using Open-Graph meta tags & can "manage pages" through FB admin. Is it possible to add Open-graph tags on WordPress blog? If not on all posts, at least on pages ... in order to see page in FB "manage pages"?
#4 by Alex Priest - August 18th, 2010 at 08:27
Hi Tim!
Thank you so much for the great guide--it's been a huge help making it this far and familiarizing myself with the Facebook social plugins.
That said, I'm having a few issues I was hoping you might be able to help me with, if you have time!
First, I'm having issues getting the meta tags to work on my site. My goal is to have the "like" button on each post both on the front page of the site AND on each individual post page--then when users click the "like" button on the homepage, it "likes" only the article they clicked the button on. I've installed the Twitter button like this and it works perfectly--the "tweet" button tweets only the post that the button is associated with on the homepage.
I can't get this to work with the Facebook "like" button. I tried tweaking your line of php in the metadata in the header for the button to share the URL of the permalink (like I have for the Twitter button) but no matter what I try it always just "likes" my homepage, not the individual post.
Any idea how to fix that? I've used the
href="<? the_permalink() ?>"in the Facebook like button code for now as a workaround, but it would be nice to get it to work with the metadata.On the other end of things, I've installed the button on individual post pages using the same workaround (with the href), but it won't give users the option to comment on the "like". On the homepage, it pops up the window where users can add a comment, but on individual post pages it won't. I took a look at how you've set it up in this post, for example, and here you can add the comment, but I can't get it to work on my blog for some reason.
FINALLY (sorry for the long comment and so many questions!), whenever someone "likes" one of my posts it shares both the post title and then adds on my site name at the end of it, which is redundant (since Facebook also adds "on alexpriest.com" to each "like"). In other words, when someone likes one of my posts, it shows up on Facebook as:
____ liked [post title] | alexpriest.com on alexpriest.com
Anyway, once again sorry for the long post, but I would GREATLY appreciate any help/tips you could provide!
Best,
Alex
#5 by sol - August 19th, 2010 at 09:52
well, after reading alllllllllll about face like button in internet, I found this tutorial the best one, but.....in aplication facebook page nothings happens, it has error, those plugins also seems not to be working in my blog.
So, because there are many people out there with working I like it button, my question is if they put it before wordpress 3.1 ? or if you know some new solution or some other way to implement this aplication in it post?
Thanks for this great extensive tutorial, sol
#6 by Laura James - August 25th, 2010 at 13:02
Great post - much more helpful than the Facebook official guides.
I've adapted it and created my own post about how to do it for Zen Cart if you're interested
http://blog.kineticpulse.co.uk/2010/08/add-facebook-like-button-to-individual.html
(BTW I also had the blank screen problem after creating an application - but the app was there when I went to my applications home page in Facebook)
#7 by MJDeMarco - August 27th, 2010 at 12:46
Not sure if anyone else is having an issue creating an application and receive errors or blank pages, but in that case, FB creates the application but doesn't give confirmation. I tried to create the APP about 12 times and when I was about to give up, I noticed that FB created the app 12 times! Anyhow, I deleted the extras and implemented this code which worked to PERFECTION. Thanks for the post ... priceless!
#8 by Eric B - September 1st, 2010 at 07:45
Every one of these that I try winds up saying that people like my site, and not the post. Any ideas?
#9 by Dustin - September 1st, 2010 at 15:33
Where do I find my Admin ID? I do not know what this is.
#10 by timware - September 1st, 2010 at 16:35
The Admin ID is the profile ID of the user who is a Page admin. If you have a vanity URL for your personal profile (eg http://www.facebook.com/timware), then go to this URL:
https://graph.facebook.com/YOUR-VANITY-URL
Or go to your personal profile and click on your avatar picture in the top left corner. Your ID # will be the string of numbers in the address bar of the browser after "id=".
#11 by Neil Barlow - September 2nd, 2010 at 14:51
How does one go about creating a "Like" button that unlocks material to people who click it. For Example: then band Matt & Kim make their new single available to anyone who "Likes" their fan page. The stream is locked though to anyone who has not "Liked" the page. How do you create this??
#12 by timware - September 2nd, 2010 at 15:54
Hi Neil. I don't think you can do that with XFBML which is the FBML used on non-Facebook pages. You might consider doing this on your Fan Page, creating a custom tab with Static FBML app and using the Fans-only FBML: fb:visible-to-connection.
Here's our tutorial on using the Fans-only FBML.
If you discover a way what you request CAN be done, please share it here. Cheers!