How to add Facebook’s Open Graph social plugins to your site
I just finished my initial integration with Facebook’s Open Graph Social plugins for both this blog based on wordpress and my photo blog which is based on PixelPost.
Facebook’s documentation is definitely in it’s early stages because it’s very sparse in some areas, and lacks good cross-links to make the content easy to dig through. Most of their documentation doesn’t even include a link to their Application center which is required to even get some of the social plugins to work since they require you to have an AppID.
Here’s a quick guide on what I did to get this running for the Like and Comments plugins for my photo blog. For wordpress, it was far easier since there are plugins for it. I ended up using the FBLike plugin.
Create an AppID
Create an “application” for your site at http://developers.facebook.com/setup/. Most of the settings can be left at their default, as we really only care about the AppID.
Asynchronously load the Facebook Javascript SDK
You have a couple of options for integration, using either iframes or their XFMBL based on their Javascript SDK. I opted for their javascript SDK as it gave more flexibility. Just put this anywhere in your <body>.
The only change you have to make to the above is to insert your AppID where it says “your app id”.
Add the Like Button
The Like Button is definitely going to be the most popular of all the social plugins and is the one I started with first. You can use their code generator to spit out the XFMBL code you need or just use this format:
<fb:like href="http://your-page-goes-here.com" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />
The key part of this is to have “http://your-page-goes-here.com” match the actual URL that the Like button will appear on. This is the URL that is shared and should be unique on your site. For my photoblog, I used built in functions in PixelPost to generate the URLs dynamically (e.g. the token <SITE_URL><IMAGE_ID> results in http://www.trevinchowphotography.com/blog/index.php?showimages=88). If you’re using WordPress, you can use the function get_permalink() if you opt not to use a plugin to generate the Like button.
The other options such as show_faces, and color scheme are described on the code generator page. I couldn’t figure out how to right justify the text in the Like Plugin. That’s why the layout looks so hokey on myphoto blog with it not correctly aligned to the right of the images.
Comments Plugin
The comments plugin allows you to embed a comments widget on your pages to allow people to Like as well as add and view comments about the item. The syntax is:
<fb:comments xid="<ID>" numposts="10" width="420" />
where xid the ID that uniquely identifies your page, numposts controls the # of comments a user can see in your widget, and width is, well, the width.
This ended up being the biggest pain in the butt because Facebook didn’t give complete information in their documentation. It seems that xid can only contains numbers, letters and underscores, despite their code generator taking in any character. What’s worse is that xid can be left blank and it defaults to the page’s current URL, so I’m assuming the FB Javascript SDK does some sort of encoding.
When xid is set to an invalid value, there is no visible error string/code thrown — the comment module just doesn’t display. You’re better off just omitting xid and leaving it to the default unless you have some specific reason to override it with your own unique ID.
Note: The comments plugin doesn’t have the same display customizations the Like button has. For example, there is no color scheme support. I ended up changing the background colors on the comments field to better accommodate their lighter colors UI.
Adding Open Graph properties to your pages
While it doesn’t seem like it’s required, Facebook’s documentation stats that you need to add meta data to your pages to “turn them into Open Graph objects”. This is done using <meta> tags.
The basic ones I included on every page are:
<meta property="og:site_name" content="Trevin Chow"/>
<meta property="og:locality" content="Seattle"/>
<meta property="og:region" content="WA"/>
<meta property="og:type" content="blog" />
<meta property="og:country-name" content="USA"/>
<meta property="fb:admins" content="trevin"/>
<meta property="fb:app_id" content="1234"/>
Change 1234 to your actual AppID, fb:admins is your Facebook username/ID and “blog” can be changed to any of their supported types.
There are a set of other Open Graph properties with values that will be based on the pages they are describing.
<meta property="og:title" content=" FOO"/>
<meta property="og:url" content="URL"/>
<meta property="og:image" content="IMAGE_URL"/>
The above property values need to be dynamically generated based on your content. This blog is based on WordPress and I tried to find a plugin that would inject the properties for me, but I couldn’t find anything yet. So I manually added this to the section of the header.php file:
<?php if ( is_single() ) {
echo '<meta property="og:title" content="' . get_the_title(get_the_ID()) . '" />';
echo '<meta property="og:url" content="' . get_permalink() . '" />';
}
?>
All the above code does is identify where it’s a single post page, then set the title and URL Open Graph properties to right values by calling into the wordpress functions.
For my photo blog, I added the “image” property, which is what is used for the content sharing back to facebook (instead of facebook guessing which image to use). The code you’ll use will vary, but since I use PixelPost, this is what I ended up using:
<meta property="og:image" content="<SITE_URL>images/<IMAGE_NAME>"/>
That’s it!
That’s all you need to do to get up and running. You’ll spend more time on formatting and integrating it into your site’s theme. Facebook current offers 6 other social plugins that you can integrate as easily as the Like and Comments plugins.
Pingback: Facebook Social Plugins & Their Impact on Your Website » The Molstad Consulting Blog