Creating a Facebook App with the new Open Graph Part 1

Part 1 - Creating the FB Application

So I attended the Facebook F8 Conference last year and got really excited about the expanded open graph and authored this byline in Mediapost (click here). I think Facebook and social media is in its early stages of development. The expansion of the Open Graph will continue and I think there are many great opportunities for businesses to expand their social media footprint to drive traffic and grow! But enough with all of this marketing speak, let's get to it!

Being a former developer I thought I would give it a shot with my blog using the new action "read" and the object "website". This blog post highlights the learnings and challenges I faced creating (Part 1) and adding the application (Part 2) to my Google Blogger blog. Hint: adding the application to my blog was WAY harder than creating the application.

Facebook actually makes this easy (click here for the steps), but I'm going to walk you through specifically what I did.

Step #1 - Create your application

This is actually the easiest step. Since this was a FB app for my website I put in the URL for my blog for the "app domain" and "site URL" fields. The site URL must begin with an http or https. I made up a namespace (which must be at least 7 characters long) and a name. The key here is to make sure you copy and paste your App ID. Trust me you will need it later for Part 2. For this type of application you don't need to host it anywhere so don't get confused by the Hosting URL or Cloud Services section of the page. I also would recommend selecting your image an logo at this step.

Step #2 - Define your Actions and Objects 

Click here for a great explanation. Essentially these are the nouns on which your actions (e.g. verbs) will act. For my blog, the object is a website. As you type in the 2nd text field, you'll see the website option appear. 

Here's what you should see now (expect for a different title at the top)

For some reason I was able to create an object type of Website with an action of Read, but now Facebook is forcing you to have an Object Type of Article if you pick Read as your Action. My guess is that they changed this between the time I originally created the application and the now. You can also create custom object types, but for now we'll stick to the predefined object type of Article.

Now let's dig a little bit deeper into the Article Object Type by clicking on the Article link.

Once you do that you'll notice some object properties. It should look something like the picture to the right. These are the properties of the object that you can/should specify so that when the user reads the article they and others will have information about what they read.  You can see a preview of this on the same page.

Step #3 - Define your Aggregation

At this step your are defining how you want the information to be displayed on the FB timeline. For example do you want to show the title and description, or the title and time it was read, etc. You are essentially determining the UI for how it will be shown on the timeline. The Object Properties you defined earlier can be used to help provide additional details about what was read. You can see the screenshot below which is a default aggregation.

The sample data is there so that when Facebook prompts the potential app user the first time for permissions they have an idea of what will appear on their timeline. For now I just left mine blank. If you click the Read Aggregation you'll see what I did as noted below:

As you can see the aggregation will appear as a list sorted by the most recent article first. The title I specified isn't too descriptive, but good enough for now (you can always change it later). The Caption Lines are the most important part. In this case I'm saying that I want the title and author to appear in the aggregation.

Now the fun really begins...creating your object page and publishing your actions. This is when integrating with Blogger got challenging. Stay tuned for an upcoming blog post (Part 2) on that step!

Let me know if you have any tips, the more folks that comment and respond, the more likely I'll finish part 2 sooner :)