Got a spare minute? Learn about our me, Cat, and our site in Google's latest video »

Browsing Facebook Schemas

I’ve been working a lot with the Facebook Open Graph on Cut Out + Keep to push favorites, comments and projects back to the Timeline and Ticker. Trying to get it setup isn’t always straightforward though, so it’s great to see how larger sites have configured their objects and actions.

If you’ve worked with adding Open Graph tags to web pages, you might have noticed the prefix="..." attribute to add to the <head> of your page.

What’s interesting though, is what’s behind the tags.

Example

http://ogp.me/ns/fb/[namespace]

Will redirect to

http://graph.facebook.com/schema/og/fb/[namespace]  

At the foot of the document, you’ll notice:

"subtypes": [
  {
     "describe": "pinner",
     "properties": {
        "following": {...},
        "followers": {...},
        "boards": {...},
        "pins": {...},
        "about": {...}
     }
  },
  {
     "describe": "pinboard",
     "properties": {
        "category": {... },
        "pins": {...},
        "followers": {...},
        "pinner": {...}
     }
  },
  {
     "describe": "pin",
     "properties": {
        "source": {... },
        "price": {...},
        "likes": {...},
        "repins": {...},
        "comments": {...},
        "actions": {...},
        "pinboard": {...},
        "pinner": {...}
     }
  }
 ]

It’s a JSON representation of the app’s Open Graph setup. So, Pinterest’s OG Schema page shows the pins, boards and pinners that they’ve set up in the Developer app.

It works for Open Graph actions too - just replace /schema/og with /schema/opengraphaction