Integrating Facebook Open Graph with your Website and Why you want to do this

We’re getting ready to launch the beta of the new awesome.net windows cloud hosting platform. I was showing the new awesome.net site to Will Strohl (DotNetNuke guru and all around good guy) and he said “Jess, make sure you get facebook on there and you integrate it with the open graph api so you can admin it and get analytics and stuff”. The URL he sent me to was: http://developers.facebook.com/docs/opengraph/.

Now before you go running off to awesome.net, If it’s not after 4/11/11 then you’re not going to see much, but if it’s after 4/11/11 then go ahead and sign up for a beta account, it will be FREE until sometime in September.

Anyway, Will gave me the pointer to the Open Graph but how to integrate it just wasn’t as straightforward as you’d hope so I wanted to give you a quick start guide with this blog post because I think this is something everyone should be doing with their websites.

Quick Intro to the Open Graph API

The Open Graph API allows you to integrate your Web pages into Facebook making it equivalent to a Facebook Page. This means, when someone clicks “Like” on your web page a connection is made between the user and your page and your page will show up in their likes and interests section on their profile.

Not only that but you can also push information on Facebook to people that have liked your web page.

Basically, Open Graph will allow the Web to marry Facebook and the two to become one.

You can learn more about Open Graph at: http://developers.facebook.com/docs/opengraph/

How To Integrate your Site

What we’re going to do is add a like box to your website so that when visitors like your page it will create a small post on their Facebook page so that their friends will hopefully visit your site and like it too!

The first thing you’ll want to do is visit the open graph URL and give it a read.

1. Pick Your Title

Let’s decide what the title of our page will be. This should be human readable text and t’s going to be the title on the post that people will see. In my case, I opted for “My Cloud is Awesome.net!” as seen below

so then I create meta tags in a text editor. It looks like this:

One note on the title. You’ll be able to change your title up until you have 50 followers and then it’s locked in for good. So make sure you’re happy with the title you picked (I may actually be changing mine soon).

2. Pick your Site Name

Pretty simple, what’s your website’s name? I opted for the domain name in this case so it looks like this:

3. Decide on your Type.

Now you’ll have a few options here depending on what your site is about, it could be about an actor, athlete, city, landmark, book, drink, food or it could be about a blog, website or company. In my case, it was about a company so I opted for company and the tag looks like this:

4. Define your URL

This is the URL that will be used to identify your site/object and will be used as it’s permanent ID. I decided to keep it simple and use the main page as the URL so my tag looks like:

The result:

5. Define an Image

Facebook is all about the images. So you’ll want to get an image that’s atleast 50 pixels by 50 pixels in size and post it on your site. In my case I used:

So the image shows here:

6. Define your Description.

This will be the text that shows up next your image and under the post title. I went with some marketing talk:

Similar to the title you’re able to change your title at any time but eventually you’ll get enough followers that your description will be locked in permanently. How many? 10,000 followers. Yes, 10,000. Let’s hope you hit that number (and please don’t do a Charlie Sheen to get there .. good actor, poor choices.).

Here’s how it came out:

7. Define your Admin

You’ll want to make yourself the administrator of your site. You have the option to allow an application to administer your site on facebook or you can have a person do it. I decided to do it myself. How do you pick the administrator? You have to know your Facebook User ID. No this is not your email address, it’s actually a numeric number. Here’s the easiest way to figure it out.

Log into facebook go to your profile and click on photos
Next select any album under your photos. in the url you’ll see something like this:
http://www.facebook.com/album.php?id=777777777&aid=269239
That number after id= is your facebook user id (in the above example it’s 777777777 and no that’s not really my User ID, I’m only using it as an example.

So your admin tag will look like this:

8. Define your Optional Data.

These you can find explained on the Open Graph API docs but I went with the following:

9. Add it all to your meta tags in your web page’s <HEAD></HEAD>

So once you have all of these ready, go ahead and copy and paste them into your web site’s source code inside of the <HEAD> section. Ideally, place it all just before </HEAD>.

10. Test Before you Like

Before you go liking your site. Make sure Facebook is reading everything on your site. The easiest way to do this is with the Facebook URL Linter at: http://developers.facebook.com/tools/lint/

Putting in http://www.awesome.net I get:

The reason this is important is that the first time I built my page, it didn’t pull my meta data correctly, I liked the page and then immediately had to remove the post from my facebook profile. So test first. Once you’re happy go ahead and like it.

11. Add the Like Code.

Next we need to add the like code to our site. In my case, I went with iframe code. Here’s a tidbit, when loading external javascript if you load it as a iframe it won’t slow down the site from loading in the event there’s a problem with the site you’re pulling the javascript from.

You can visit: http://developers.facebook.com/docs/plugins/ to see the different plugins you can integrate with your site. I used the like button builder: http://developers.facebook.com/docs/reference/plugins/like/ and copied in the iframe code to my site in the footer:

Why you’ll want integrate the Open Graph API

So you probably saw in the image above where I embedded I have links for an Admin Page and Insights. These are only visible if you’re an admin of your application and visit the site. Clicking on the Admin Page I can see:

So I can interact with my page there and if I go to my Wall I can post stuff that will show up to my fans, etc.

Next we’ll take a sneak peek at the insights page. Since this is a new app on facebook you won’t have any insights to display but it’s going to provide information like this:

Where to go next?

First I’m going to ask that you do me a favor and visit the www.awesome.net site and like the page (bottom left hand corner) next I’ll recommend you check out http://developer.facebook.com and start experimenting with what you can do there.

Oh and if you’re wondering who that was in my Facebook page, that’s Lyza from www.acutevisibility.com their company does online branding and marketing, if you’re not comfortable integrating the Open Graph API with your site or want to learn more about it, I’m sure they’d be happy to chat with you on it.

Posted in Web Applications, Web Tips & Tricks

About Jess Coburn

It's Jess's responsibility as CEO and Founder of Applied Innovations to set the direction of Applied Innovations services to ensure that as a company we're consistently meeting the needs of our customers to help drive their success. In his spare time, Jess enjoys many of the things that made him a geek to begin with. That includes sexy new hardware, learning new technology and even a videogame or two! When you can’t find him at the office (which admittedly is rare), you’ll likely find him at the grill or in front of his smoker getting ready for some lip-smacking ribs to enjoy with his wife and two kids.

View all posts by Jess Coburn →