WereWP

Lately on the Blog

How to: integrate Facebook Open Graph Protocol into your WordPress theme

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:

Connect URL

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! ;)

Update: Following a comment from Mike, here is an extension of that tutorial to include descriptions and custom images for pages.
Lee H also pointed out a solution for those of you who use an old version of WordPress, since the above tutorial makes use of the_post_thumbnail function introduced with WordPress 2.9.

Liked it? Why not sharing it on Twitter?

76 Responses to How to: integrate Facebook Open Graph Protocol into your WordPress theme

Shahran says: April 30, 2011 at 3:07 am

above all other tuts i found, yours are more detail than the other. thanks for that. i dont understand what/how this open graph things work. try again and again from different tuts to the other, still i cant post to my wall with image.

fyi, i created app for Add Link to Facebook plugin to work but unfortunately i found that there is no image at all to any of my blog page. it’s only post title, excerpt/description. currently i disabled all social plugins but still have no luck.

can u guide me briefly what should i do now, somehow like “integrate Facebook Open Graph Protocol into your WordPress theme for Dummies”
=) maybe u gonna ask me to delete this and that, no worry, i’ll do it.

url to my blog: http://www.shahransams.com/blog
im using wordpress 3.1.0

hope u can help me.

Renji says: July 22, 2011 at 8:18 pm

I have an external image on a post, for that Facebook displays the first image found on the whole page. Instead how can I make it select that particular embedded image?

Thanks.

Renji says: July 23, 2011 at 7:23 pm

I will try to be a bit more clear. Does “og:image” property work if I have an external image on a post? I mean one which I have not uploaded with the WordPress uploader, but one that is on Picasa.

I had used the code as you said here, but when someone “like” the post always some random image from the page such as logo or something else is shown on their Facebook profile along with the link. Every other open graph property works fine.

Check this url – http://goo.gl/vfRH1. Currently I am using a code that was shown on WPbeginner to catch the first image on a post, but I guess that doesn’t help as well.

Jeremy says: July 23, 2011 at 7:44 pm

Understood. Unfortunately, if you don’t upload the image, this is not going to work properly. An image that is simply added to your post without any link to the post is not stored in the db as attached to that post, so there is no simple way to make this work I am afraid.

Renji says: July 23, 2011 at 8:07 pm

Ok. Thanks. Is it possible to do that by defining the image link with “thumbnail” in “Custom Fields,” or are you aware on any other method?

Jeremy says: September 8, 2011 at 7:57 am

Could you give me the URL of the page where it happens? I’ll have a look at it and let you know what causes the issue. Without it, it is a bit difficult to guess.

Mike Rizzo says: September 9, 2011 at 3:18 am

Thanks Jeremy. I removed the open graph code for now, because of the white bar that appeared at the top of the header, so it’s not there right now. My url is panachic.com.

David says: October 7, 2011 at 4:39 am

This post definitely cleared some things up for me, thank you. I’m in a bit of a different situation. I built my blog posts using custom fields and am wondering the best way to add a like button on the main/category pages so that users can share the content contained within a certain custom field.

One of my fields is lyrics, and I would like people to be able to share these lyrics on facebook,Is this extremely difficult to do?

Jeremy says: October 7, 2011 at 3:10 pm

It is not extremely difficult, no. You will only have to change your Open graph meta data to pull values from your custom fields instead of pulling values from your post. See my other post for example; there, I pull the og:description and the og:image from custom fields.

Simply replace metadescription with the name of your custom field to have the description coming from there.

I hope that can help!

Brian Biddulph-Krentar says: January 1, 2012 at 3:48 pm

Hello and Happy New Year! Your article seems very clear, but I still get a message about no admin data found. I added the code to my masterpage, but I have also tried to my index page. Below is the code I have. I am not a web developer by any stretch, but I am doing my best. This is a little side project I am working on.

HIT Healthcare Information Technology Group

.style4
{
font-size: xx-small;
}

function linkMouseOver(id) {
document.getElementById(id).style.color = “#f78a23″;
}
function linkMouseOut(id) {
document.getElementById(id).style.color = “#525252″;
}

Jeremy says: January 2, 2012 at 1:45 pm

I am afraid I won’t be able to help you much. The code you posted is not related to Facebook at all, so I am not sure what you tried to achieve with this code, sorrY.

Tommy White says: January 5, 2012 at 5:04 pm

I have an issue which I’m not sure how to fix. I use a plugin for reviews, which generates a global ranking table on my category pages. breaks my category pages and causes my ranking table to parse first at the top of my site, outside the template.

I don’t program so… Would there be an issue in moving around the data directly below this code? or removing that code would have what effect?

Tommy White says: January 5, 2012 at 6:27 pm

Just noticed it stripped out the code in my last post.

php if (have_posts()):while(have_posts()):the_post();endwhile;endif;

Shannon Cox says: January 8, 2012 at 7:38 am

Hi, I love the information you gave in this article. I am trying to find a bit of help with facebook coding and have no idea where to look? I basically have a wordpress site (chocfudge.com.au) that I currently publish individual articles automatically onto a facebook group page using “Add link to Facebook” wordpress plugin. Works a treat except it has my name as the referrer rather than the author’s. Spoken to the plugin author who couldn’t help. Any ideas where to go to to get professional help? Thanks again

Chhaya says: January 10, 2012 at 2:25 pm

Hi, I want to achieve something like IMDB site (https://developers.facebook.com/docs/opengraph/) has done… If user like product on my site I want them to list it under users Activities and interest section on user profile … I tried some examples but if I click Like button they simply post my data to FB wall but didn’t list the data under Activities and Interest section.. Can you suggets some thing??? Thanks.

Or leave a Reply!

Your email address will not be published. Required fields are marked *

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>