Facebook Open Graph Protocol Full Integration Walkthrough

As Facebook becomes an ever increasing influence on the internet and it’s users, webmasters all around the world in every market are trying to find ways to better connect with Facebook users on their sites. Facebook has come a long way in a short time, and is now at a point where a very deep integration with Facebook is available to webmasters through the Facebook Open Graph Protocol. With a full Facebook integration you will enhance your Facebook marketing effectiveness.

We are going to take you step by step through a full integration of Facebook into your WordPress blog or website. We will focus on using the social plugins which utilize XFBML markup and Javascript SDK. Using a full Facebook Open Graph Protocol integration with your site will allow you do such things as:

• Add a like button. The like button will allow users to add comments and a picture to their wall feed when they like content from your site. With a full Like button integration your content becomes it’s own “Page” on Facebook that can be accessed along with the other Pages you are an administrator on. You get full access to the Page’s analytics data and sharing capabilities. You will be able to share updates to users that have liked your content as well as target ads at them. This is much better than using the old crappy Iframe like button!
• Activity Feed. The activity feed allows a webmaster to show personalized content about the user and or their friends when they are logged into Facebook and visiting your site. If they are not logged in, you will be able to show recommendations from your site. This is a handy plugin to get users engaged in your site with little effort on your part.
• Recommendations. This plugin allows you to share recommended content with visitors from any site you wish whether they are logged in or not. It shows interactions the user’s friends have had with your site to help them find what they may be interested in as well.
• The Like Box. This box allows visitors to become a fan of your Facebook Page with one click from your site or blog. It showcases fans and content from your Facebook Page to entice your visitors to become a fan. The like box is the quickest way to grow your Facebook Page following with the least amount of effort. If you are offering quality content on your main site, you are greatly increasing the chances of gaining more followers on your fan page with a Like Box implementation.
• Login Button. The Facebook login button will allow your visitors to see any of their friends that have already signed up for your site using the Facebook login button. Your visitors will be able to login as well. One thing that prevents people from registering on sites is that it’s too time consuming Confirmation emails and spam prevention make it too tedious to sign up, but a Facebook login integration will solve those problems for your users.
• Registration. The Facebook registration will allow visitors to register for your site using their Facebook profile. If they are logged in already the form will be pre-filled out with their information for them. Using the API you will be able to gather information outside of the normal Facebook fields.
• Facepile. This one is purely for showing off. You can display the faces of Facebook users that have registered or liked your page. Show off your social skills with a Facepile of Facebook users! Yes the name is corny and it doesn’t have much functional usage for your site, but in some cases it may give you more credibility and trust to show that a users friends are already liking your site.
• Comments. Allow logged in Facebook users to comment on your site using the Facebook comments. They will also be like-able and shareable on Facebook walls and feeds. I do like that Facebook comments make it easy for users to participate in a conversation, but the downfall is that comments are not indexable at this time, so from an SEO perspective it has little value.
• Live Stream. This plugin will allow Facebook visitors to communicate in real time by sharing activities and comments. If your running a real time event, Live Stream may be just what your looking for to keep your visitors connected.

Ok, now that you have an idea of what you can do using a true Facebook integration on your site, lets get down to the nitty gritty.

Creating Your Facebook App

The first thing your going to need to do is head on over to the Facebook Developers page where you will need to setup your very own Facebook App. From this page you will be able to see all of your existing Facebook Apps on the right side of the page. On the upper right hand side of the page you will want to click on the “Setup New App” button.

On the next page you will need to enter your App name and agree to the terms and conditions.

Moving right along you will find yourself able to edit all of the details about your new App. While much of the information here is not required, you can feel free to fill it out in as much details as you may like. You will find six menu items on the left side consisting of: About, Website, Facebook Integration, Mobile and Devices, and Credit.

Click on the website tab where you will see your Facebook Application ID and Secret code. You will be needing these for your Facebook Open Graph Protocol integration, so make a note of them! You can always get them at any time in the future by returning to the Facebook Developer’s Page and viewing or editing your existing Facebook Apps.

Make sure you enter the full website URL on the “site URL” field. For example http://www.mysite.com. The field below is asking for the “site domain”. This is the actual domain such as mysite.com. It will allow Facebook to authorize authentication on this domain and all subdomains, so do it!

This is really all that is required to get us going, so we won’t go into much more detail. Feel free to scan through all the advanced options you can set for your App. Also feel free to upload logos and avatars for your new App. Again, none of that is required, but it won’t hurt you to do so.

Implementing the Open Graph Protocol On Your Website Or Blog

It’s time to get down to some dirty work. You will be editing the code of your site, so make sure you have a backup you can fall back on just in case you make any mistakes. For the purposes of serving the masses, we will use WordPress as the platform we are integrating Facebook into. Remember that this will work for any website integration, it’s not just for WordPress.

Lets start by declaring the Facebook document types in your header.  Right below the document type declaration you will want to insert the following code:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">

Now we need to add all the meta information that will inform Facebook about the content of your page. It’s important to include as much of this information as possible, so don’t skip any Open Graph Protocol meta tags if you can help it. Paste the following code before the closing </head> tag. I like to make them the first bit of code after the opening head tag myself:

    <meta property="og:title" content="<?php the_title() ?>"/>
    <meta property="og:fb:app_id" content="1111111111"/>
    <meta property="og:type" content="movie"/>
    <meta property="og:url" content="<?php the_permalink() ?>"/>
    <meta property="og:image" content="<?php echo catch_that_image() ?>"/>
    <meta property="og:site_name" content="<?php bloginfo('name') ?>"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description"
          content="A group of U.S. Marines, under command of
                   a renegade general, take over Alcatraz and
                   threaten San Francisco Bay with biological
                   weapons."/>

<?php function og_meta_desc() {
global $post;
$meta = strip_tags($post->post_content);
$meta = str_replace(array("\n", "\r", "\t"), ' ', $meta);
$meta = substr($meta, 0, 200);
echo "<meta property=\"og:description\" content=\"$meta\"/>";
}
og_meta_desc();
?> 

Now you’ll need to paste the following code into your functions.php file. This is required so that it will automatically populate the first image of your post as the one to be used when someone shares your content with a like. as you can see, you can also define a default image if you wish just in case there is not one on the post:

function catch_that_image() {
 global $post, $posts;
 $first_img = '';
 ob_start();
 ob_end_clean();
 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
 $first_img = $matches [1] [0];

 if(empty($first_img)){ //Defines a default image
 $first_img = "/images/default.jpg";
 }
 return $first_img;
}

Now lets take a brief look at what we’ve done here. We’ve given you all the dynamic calls you will need to pre-populate all the Facebook Open Graph Protocol meta tags with data from each new post you make on your blog! There is no maintenance required at this point.

• og:title: Title of the post. We are dynamically pulling in the WordPress post title for this tag.
• fb:app_id: insert whatever the Facebook App ID is you received earlier in the post.
• og:type: The type of content of the page. For blogs the type is typically “article”
• og:site_name: Name of the blog
• og:url: Permalink to the post. In this case we are dynamically pulling the permalink to your WordPress post and populating this meta tag with that data.
• og:image: The code above allows you to dynamically pull the first image of the post and populate this meta tag with that image. It also allows you to define a default image that can be used in the event that there is no image on the post. This saves you alot of time and headaches updating this meta tag with each new post.
• og:description: This is a description of the post. We are dynamically pulling in the description from the Post excerpt for you.

Now you will need to add the Javascript SDK code to your site so that you can being utilizing social plugins using the API. In order to add the Javascript SDK code to your site, simply paste the code below directly after the opening body tag:

<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>

This code is loading the Javascript Asynchronously so that it doesn’t block any other elements of the page from being loaded. We have your back . Make sure you replace “your app ID” with your actual Facebook App ID you put in the meta tags above.

At this point you have successfully implemented the Facebook Open Graph Protocol on your site and your now ready to begin using it to enhance your blog with the aforementioned social plugins. Read our other posts to learn how to implement a Facebook Like Button or Facebook Like Box to your blog! we will be writing further walk through’s about how to enhance your blog with other Facebook integration features soon.