A few months ago, Facebook team uncovered a new major addition of the Facebook API: the support of the Open Graph protocol. Open Graph is not new but the possibility to use it to connect your website to Facebook certainly help it to get more popular.
To put it simple, by adding different meta tags into the head of your page, you give out information about the specific content you deliver, and all Facebook services, such as the share feature or the Like button, will make good use of this information. In the same way, Facebook uses these tags into profile pages, fan pages and applications.
What are the necessary tags to add to your page ?
Here are all the tags needed:
- Title: speaks fr itself, it is the title of your page or your article. This title will appear as title when people will share your article on Facebook, or like it.
- Description: this part will appear as the default description text when people will share your article on Facebook. In WordPress, the best is here to use different descriptions according to the page you are browsing.
- Type: this defines the category of the information you provide on your site. Types are defined in the Open Graph protocol, and for websites three types exist: Blog, Article, Website. In order to be precise, one solution is to define a different type if you are on the homepage or if you are browsing articles
- URL: also speaks for itself – the URL of the page.
- Image: this image will be added to the content when people share or add a comment using the FBML like button.
- Site_name: speaks for itself, it is the name of your website.
To implement it within your WordPress theme, locate the header.php among your theme files, and edit it with the following variables.
Before to edit the files, you will need the facebook admin id, which can found in the Facebook insights page, when clicking the “insights for your domain” button on the top right. You can also specify your app id, if you are using the like button for example (see paragraph below).
You will also need to know the path to the main logo appearing in the header of your site. If you do not have any, I encourage you to create one, and to add into the images folder of your WordPress theme.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" <?php language_attributes(); ?>>
<?php if (have_posts()):while(have_posts()):the_post();endwhile;endif;?>
<!-- Facebook Opengraph -->
<meta property="fb:app_id" content="your_app_id" />
<meta property="fb:admins" content="your_admin_id" />
<meta property="og:url" content="<?php the_permalink() ?>"/>
<?php if (is_single()) { ?>
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
<?php } else { ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:image" content="<?php bloginfo('template_url') ?>/path/to-your/logo.jpg" />
<?php } ?>
Then we will add the like button to your site, to show an example of the use of Open Graph data.
How to add the like button to my WordPress blog?
After adding the previous information into your header, we will need to decide of a place for the Facebook like to appear, and call Facebook Javascript SDK in order to connect our website and Facebook.*
Before that, you will need to create a Facebook application: no need to be afraid, it can be done in a few steps:
- Go to http://www.facebook.com/developers/createapp.php
- Give a name to your app, validate,
- Copy the app ID that is given to you
- In the Connect tab, fill in your blog’s homepage URL in the Connect URL field, and save.
Next step will be to integrate the like button to our articles. For this locate and open single.php in your theme files, and add the following where you want the button to appear. If you want it to appear right after your article content for example, locate the_content fonction, and add it after:
<fb:like href="<?php the_permalink() ?>" layout="button_count" show_faces="false" width="450" action="like" colorscheme="light"></fb:like>
You can change the layout of that button by changing some of the parameters: have a look at the Facebook like plugin page for more information.
Then, in order to connect the like button to Facebook, we will need to add the reference to Javascript SDK to the footer of our theme*. For that, locate your functions.php file, and add the following line to it:
<?php
// load facebook API
add_action("wp_footer", "werewp_facebook_api");
function werewp_facebook_api()
{
$fbapi = "your_app_id"; // Your application ID
echo
"<div id=\"fb-root\"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: $fbapi, 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>
";
}
?>
*As a sidenote, if you are already using some Facebook features on your site, such as a badge for example, you will have to make some changes to that badge and use only FBML code in there, as Facebook Connect is already called now.
And you’re done! The necessary information is now in the header among the other meta data, the Facebook connection is made through the Javascript SDK, and the facebook like button is added with FBML code. That’s it, nothing else is needed!
Let me know if it works, and share it with us in the comments! Thank you, and don’t forget to follow me on Twitter! ;)
I’ve tried this and keep getting:
Error: b is undefined
Source File: http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php
Line: 13
Do you have any other social plugins implemented on your site already? They may be the ones causing the issue.
In order to avoid any conflicts, if you have more than one social plugins implemented on your blog, you only need to call the connect script once.
Wow… great job putting this together. I was trying to implement Open Graph on my blog, but the code wasn’t nearly as elegant as your is.
I’m getting an error though when I use this code. Everything works except for the og:image line for single posts… it causes my single post pages to crash out.
Do you have any ideas what might be crashing? The index page loads fine.
Thanks!
Cary
Weird, I don’t know what could cause this.
I see it looks ok on your own blog, it seems you’ve managed to find the issue. Could you let me know what the cause was, so that I can update my post if necessary?
Thanks, well yes and no, I finally got it to work, but only indirectly… leaving the code in for og:image continued to give me an error no matter what I did.
I finally discovered a function called catch_that_image() ( http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it ) and installed that in my functions.php file. Then I was able to make a call to that function to get the url for the first image in the post.
It’s not a thumbnail, but it works! Thanks for getting back to me! I’m still using the rest of your code, and it’s just what I needed. :)
Oh thanks for the heads up! Now I know what went wrong with the function for og:image. It will only work if you theme uses the_post_thumbnail function that was introduced with WordPress 2.9. If not, then there won’t be any thumbnail displayed, and depending on your WordPress version, you may get an error message indeed.
I have got to edit my article to correct that problem then!
Thanks ALOT, I’ve been searching endlessly trying to find a way to incorporate OGP into WP! :-)
I’ll use this info later to make one of those websites like ‘golikeus’ to build an enormous amount of fanpages for possible cpa monetization later!
Cheers,
Jason
I was wondering, do you need to link to the FB Javascript SDK in your pages if all you want to use is the Open Graph meta tags in your header? The reason is, I don’t want any like buttons or friends displayed on my site, however I think it’s a great idea to provide the a universal meta data such as Open Graph for websites like Facebook that may use this should someone post my URL to their FB account. Does that make sense? Thanks!
Hi Jeremy,
Great article. One thing I didn’t get though – if I have a blog and I don’t have a corresponding facebook page for it, can I still connect that blog to open graph? What id do I send in the relevant part in the header?
Thanks.
Yuval
Sure, you can integrate only the meta info without the Like button. I think that’s a clever idea if you want to control the way your blog info is displayed on Facebook, without adding new elements to your website!
If you want to integrate the Like button like I explained in that article, you do not need to have a Facebook page. However, you will need to create a Facebook application (which is not public, only you will see it) in order to use the Javascript SDK. That’s this app ID that you will specify in the header.
Thanks Jeremy, Hopefully I will manage from here on.
Jeremy, great post my friend! Thank you so much for sharing this. I’m not the Facebook guru and some things here are new to me as well. Unfortunately I missed the F8 conference and didn’t catch all the new stuff that Facebook yelled that day, but yeah, the Open Graph Protocol seems quite interesting, and Facebook integrating it definitely a step forward.
What’s more interesting (in my opinion) is the Facebook Graph API, and that picture I posted yesterday was mainly based on that, which might give you a little bit more control over what Facebook posts and what it doesn’t. Besides semi-automatic (automated) posting is also an option, and as you might remember I have a project called Twibots ;)
Anyways, thanks again for the post and cheers!
~ @kovshenin
Thanks! I will stay posted on your articles about the Graph API then! ;)
Jeremy,
THANK YOU for explaining all of this. I am still trying to wrap my head around this open graph thing. Your post certainly helped!!!
Maybe you can explain the one thing I don’t seem to be able to find an answer to.
We have been running a blog since 2007 (www.theapplepress.com). About a year ago we created a facebook page (http://www.facebook.com/TheApplePress) for the blog. We are about to relaunch our website with an all new design and I’d like to integrate Open Graph and the like button at the same time.
Now, the thing I really don’t understand is how I would integrate open graph with our existing page. I understand that if I enter my admin_id that a new page would be created, correct? Is there any way I can just use my existing page? Or is that not how this open graph thing works? Just seems kind of silly to me to not be able to use an already existing Facebook page.
Also, would I still need to create a Facebook app or is it possible to just use my page_id for the like button as well?
It’s all just so confusing to me. lol
Anyway, thanks so much for putting this together. I’m about to grasp it all, I think!
@Philipp You’re welcome! :)
To answer your 2 questions:
- For Facebook insights, you can use your existing page, no need to create a new one. So you can add property=”fb:admins” content=”474225375569″ in your header.
- In order to use the FBML version of the button like I explained in my tutorial, you have to create an application and add property=”fb:app_id” content=”your_app_id” to your header. However, no need to worry about that application, it takes one minute to create (just follow the steps I have described), and you’ll never have to worry about that application again.
Thanks once again!!! With your advice I will go and try to implement the open graph header as well as a like button for every page! May hit you up with another question at some point. ;)
Also, if you’re ever in Los Angeles, will you hit me up so I can take you to dinner or something? Really appreciate the advice!
Hi Jeremy,
So I integrated the code as suggested and the “like” button shows up on the bottom of every page! I’m not 100% sure that it works correctly, however.
As a default the button always shows the like button without any numbers. When I “like” it myself to test the function, it shows as a thumbs up with “1 person” in it. However, once I refresh the page it usually changes to “2 people” all of a sudden. On the post below it even changed to “6 people” after reloading the page.
http://www.theapplepress.com/2010/08/30/ios-4-bluetooth-audio-issues-exposed-video/
It also show a much plainer version of the “like button” than the example from facbook: http://tap4.us/qar .Faces don’t show up either, even though I changed that value to “true”. Also, how are these likes getting connected to my page? I don’t see a difference.
When I publish the like to my wall by adding some text, it often also grabs the default gravatar picture instead of the featured image from the post. For this post, for example:
http://www.theapplepress.com/2010/09/03/apple-tv-price-apps-content-expectation-vs-reality/
I added all the code as you suggested. Besides I wasn’t able to find the “connect tab” in my application settings. My tabs look different than the ones in your screenshot as well. Here’s what I got:
- About
- Web Site
- Facebook Integration
- Mobile and Devices
- Advanced
So I just entered the address under URL in the web site tab instead.
Do you know what’s going on here? Did I make a mistake?
Here’s the code that went into my adsense.php (the section that shows up under each post):
<fb:like href="” layout=”button_count” show_faces=”true” width=”450″ action=”like” colorscheme=”light”>
The first part is from a twitter plugin. Unfortunately I can’t get those two to show up next to each other, but that’s a different problem.
Do you have any thoughts?
Would really appreciate it!
Thank you!
Philipp
Jeremy,
Please ignore the comment I posted 15 minutes ago! I made a php error. I think I got it to work for the most part. Thank you for this amazing blog!!!
Just have a few questions left:
As a default the like button usually shows 0 likes. When I hit “like” it shows with a thumbs up and 1 person liking it, as expected. However, once I refresh the page it usually changes to “2 people” all of a sudden. On the post below it even changed to “6 people” after reloading the page.
http://www.theapplepress.com/2010/08/30/ios-4-bluetooth-audio-issues-exposed-video/
It also show a much different (plainer) version of the “like button” than the example from facbook: http://tap4.us/qar.
I added all the code as you suggested. Besides that I wasn’t able to find the “connect tab” in my application settings. My tabs look different than the ones from your screenshot. Here’s the tabs I’ve got in my app settings:
- About
- Web Site
- Facebook Integration
- Mobile and Devices
- Advanced
So I just entered the address under URL in the web site tab instead. Was that the right thing to do? Why do my app settings look so different?
Here’s the code that went into my adsense.php (the section that shows up under each post):
<fb:like href="” layout=”button_count” show_faces=”true” width=”450″ action=”like” colorscheme=”light” ref=”post_bottom”>
The first part is from a twitter plugin. Unfortunately I can’t get those two to show up next to each other (no matter what I try they show up below each other), but that’s a different problem, I guess.
Do you have any thoughts? Have I done everything correctly? I just don’t see any likes being connected to my page. Am I supposed to?
Thanks a million!!!
Philipp
Hm! This is very strange! It seems as if the code
<fb:like href="” layout=”button_count” show_faces=”true” width=”450″ action=”like” colorscheme=”light” ref=”post_bottom”>
posted in my adsense.php gets executed as an iframe! However, when I add it through a hook before my title’s for example, it seems to be executed as xfbml.
I have both enabled right now so you can see the difference.
@Philipp:
I have had a look at your site, I’d have a few remarks:
- you will want to correct the way you inserted the code I mentioned in the head: the tag has to be used once only, so you should replace your old tag by the one I provided you.
- Unfortunately, the like button will always be hosted on Facebook site, so you have limited power over the look of it: Facebook is currently switching from the old styled button to the new one.
- About the number of likes: do not be surprised if some of your pages have more than 1 Like, it simply means that people already shared this page on facebook, before you included the Like button. The counter in fact counts both Likes and Shares.
- If you do not see the faces of the people who liked the page, it may be due to different reasons: either the faces could be there, but your div is not big enough to display it, or either of these people are your friends on Facebook, and you do not have access to their profile pictures, either you need to change the like button parameters to standard layout.
I hope that helps!
Thanks for the tutorial, very well done. Your approach for the meta tags is awesome! In my setup before, I struggled with getting all the post information outside of the loop so my and the php with it were very messy. Line 2 of your example blew me away… so simple “A caveman could do it”, yet it never occurred to me :) So now for the most part, I’ve adopted all your examples and things work great.
I’ll be bookmarking you to explore another day.
Cheers, Lee
Thanks for the comment! I am happy I could help!
Thank you Jeremy! I cleaned up the code!
This part:
is now right before the tag.
The rest of your code is within the tag. Is that correct or should I also place this before the head tag?
So excited that his is working! :)