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

Facebook Social Context

Another unreleased social plugin is called Social Context.

Social Context Screenshot

It takes a list of keywords, finds related Facebook brand pages, and renders a list of friends who like that brand.

For cola:

<fb:social-context keywords="cola"></fb:social-context>

or books:

Interestingly, the plugin uses the keyword to find the most definitive page for the category. For cola, Coca-Cola, or books, Harry Potter.

Obviously, the pages returned will depend on your social circle. I’m not entirely sure of the use case for this yet. Along with keywords, the plugin can use URLs, or a Facebook object_id, although these don’t appear to show any results.

I’ll keep exploring the possibilities of this plugin.

Facebook Want Button

Here’s an example of the Facebook Want button.

Currently, publishing want actions is disabled, though the button does render.

<fb:want href="..."></fb:want>

The plugin error is

App ... is not allowed to create actions of type product:product.wants for user ...

It’s likely Facebook can then built a universal wishlist that could be queried by other apps through the Graph API.

Currently, querying the me/wants connection on the Graph API shows a blank list, rather than any error.

Update: Interested in other unreleased Facebook plugins?

Update 2: Facebook have since removed the code from the SDK. I’m using an older copy of the code, and the button still works.

Update 3: Facebook have disabled the Want button code. I’ve put up some images of how it looked!

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