Home
Blog
Debugging in the Open Graph

December 12, 2011

Debugging in the Open Graph

By Jeff Sherlock

Over the past few months we've seen the launch of many interesting Open Graph apps. As developers have started to create their own Open Graph apps, we’ve heard questions about the best ways to debug and diagnose your implementation. Fortunately we have tools and error messages that simplify the debugging process, which we'll highlight in this post.

Debugging Actions

Within the Open Graph section of the developer app, developers specify which objects are connected to an action type. In this sample app, there is a cook action that is connected to a recipe object.

When posting an action to the Graph API, a url to an object is passed in the call. Facebook looks at the og:type of the object for instructions on how to interpret the object. If no og:type value is present in the meta data, the default type is website. Trying to post an action with an object that is NOT associated to the action type will produce an error message similar to this one:

curl -F 'access_token=...' \
-F 'recipe=http://example.com/og/recipe.php' \
'https://graph.facebook.com/me/jeffogtest:cook'
{
 "error":{
    "message":"(#3502) Object at URL http://example.com/og/recipe.php has og:type of 'website'. The property 'recipe' requires an object of og:type 'jeffogtest:recipe'.",
  "type":"OAuthException"
 }
}

To fix the error, the og:type meta tag at the url http://example.com/og/recipe.php needs to be updated to jeffogtest:recipe. The final tag would look like this:

<meta property="og:type"        content="jeffogtest:recipe" />

After fixing the og:type, the successful curl call returns an action id, 686386404271 in this example.

curl -F 'access_token=...' \
-F 'recipe=http://example.com/og/recipe.php' \
'https://graph.facebook.com/me/jeffogtest:cook'

{"id":"686386404271"}

If your call to post the action returns an id, then your action has been successfully posted. You can also verify that your action has been successfully posted by checking the Ticker on the right hand side of your newsfeed. NOTE: You only see your own actions in your ticker when you are listed as a tester, admin, or developer of the app posting the action, as defined in the "Roles" section of the developer app.

Debugging with the Activity Log

The Activity Log contains a record of all activity relating to a user's profile. Note that a user can only see his/her own activity log. This is a great tool to use when developing your Open Graph app because it contains an easy-to-use list of all activity for the user. If the actions are appearing in the Activity Log, then you know that Facebook has correctly registered the action you have posted. You can access your activity log by going to your own Timeline, and clicking on the "Activity Log" button. Within the Activity Log, you can filter actions by app as seen below.

Debugging Aggregations

One of the most exciting features for Open Graph apps are the aggregations. Aggregations allow you to show interesting information regarding the actions a user has taken in your app. Within the developer tool, there is the Preview tool that allows you to see a preview of your aggregation unit and input sample data for the preview.

After previewing the aggregations and posting sample data, developers should check the App Tab within a user's timeline that shows all activity and aggregations for an app. By default we show a Friends tab and a Photos tab, along with 2 bookmarked app tabs for a user. Clicking on the arrow on the far right hand side will show more app tabs for apps the user is using. In the picture below, I have 13 additional App Tabs that will appear.

From the list of App Tabs, I can bookmark an app to be in my list of highlighted apps that appear next to my Photos and Friends tabs. I can also click on the App Tab to access all the information and aggregations for the app. Developers should verify that aggregations are appearing as expected within their own App Tab.

Debugging Objects

To get a detailed look at how Facebook’s scraper is interpreting your Open Graph object, use the Facebook debugger. The debugger outputs a list of all the data and resources that Facebook pulls from your Open Graph object. If there are missing tags or other errors when trying to parse the object, the debugger will list the errors and warnings. Below is an example of a warning for a missing og:url value.

A list of other types of errors can be found at https://developers.facebook.com/tools/debug/examples

The output from the debugger includes the final, interpreted version that can be used to verify that your object is setup correctly.

Within the debugger, there is a link provided to see the raw data that we are pulling for the Open Graph object. This is especially useful if you are unsure what raw data the scraper is trying to interpret.

Updating Objects

When modifying Open Graph objects, you will need to tell Facebook’s scraper to rescrape your page to pull in the updated information. There are a couple different ways to have your object re-scraped.

  • Manually using the debugger at https://developers.facebook.com/tools/debug This will pull in a fresh copy of your page’s data if you are an admin or developer of the object, as determined by the fb:app_id or fb:admins meta tag.
  • More automated by using the "scrape=true" POST parameter. Make a POST call to https://graph.facebook.com/?id={id}&scrape=true where {id} is the object id or the url of the object. The response is a JSON object with the data scraped for the url.

Test user accounts

We recommend you create and use test accounts when developing Facebook apps, including Open Graph apps. Test user accounts allow you to create and authorize test accounts that can be used to test and debug your app. An application can create up to 500 test user accounts. Test user accounts can be created in the "Roles" section of the settings for your application, which will present the dialog seen in the image below.

You can also create test accounts via the API as documented at https://developers.facebook.com/docs/test_users/


Open Graph apps are an exciting opportunity for app developers. We've covered many different tools and concepts in this blog post to help you debug and improve your Open Graph app. In particular the Activity Log, Debugger, and Developer Tool are invaluable tools when debugging your Open Graph app. We hope you make full use of these tools when creating and debugging your Open Graph apps. We're committed to helping developers succeed on our platform and appreciate your feedback. We're looking forward to releasing more docs, tips & tricks, and help each week, so check back often.

Helpful links


TAGS

Get our newsletter

Sign up for monthly updates from Meta for Developers.

Sign up