I previously mentioned how simple it would be for Twitter to use OpenGraph to grab images off Instagram to restore the user experience removed when Instagram stopped posting image meta data to twitter.
The OpenGraph protocol is quite simple. It provides all the data required to summarise a web page. This means that when you share a page on Facebook (they are the major proponents of the protocol) it will first check for OpenGraph to fill in the blanks. You’ll have seen the way Facebook loads in a “random” image and text from a page sometimes. OpenGraph lets a website’s owner determine what gets posted. The required fields are:
og:title, og:type, og:image, og:url, og:site_name
Image is not required, but it’ best to include one. To make the page validate, use must include the og namespace in the HTML prefix attribute. Sample from IMDB.
<html prefix="og: http://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
A quick example, using the standard OpenGraph Ruby library.
$ gem install opengraph Fetching: hashie-1.2.0.gem (100%) Fetching: nokogiri-1.4.7.gem (100%) Building native extensions. This could take a while... Fetching: opengraph-0.0.4.gem (100%) Successfully installed hashie-1.2.0 Successfully installed nokogiri-1.4.7 Successfully installed opengraph-0.0.4 3 gems installed
The gem is installed, load up the ruby shell (irb) to test it out, and include the opengraph gem.
$ irb 1.9.2p290 :001 > require 'opengraph'
Using the URLs you chose before and the basic api mentioned in the documentation load up the page and you can then inspect + use the data.
// fetch a page insta = OpenGraph.fetch('http://instagram.com/p/LkoJrdFF-e/') => #<OpenGraph::Object description="djlowry's photo on Instagram" determiner="a" image="http://distilleryimage6.s3.amazonaws.com/865c70c4b09a11e180d51231380fcd7e_7.jpg" site_name="Instagram" title="" type="instapp:photo" url="http://instagram.com/p/LkoJrdFF-e/"> // now you can ask for the image URL insta.image => "http://distilleryimage6.s3.amazonaws.com/865c70c4b09a11e180d51231380fcd7e_7.jpg" // fetch a profile profile = OpenGraph.fetch('http://instagram.com/djlowry') => #<OpenGraph::Object image="http://images.instagram.com/profiles/profile_996302_75sq_1344293203.jpg" title="djlowry on Instagram" type="profile" url="http://instagram.com/djlowry"> // now you can use the profile image profile.image => "http://images.instagram.com/profiles/profile_996302_75sq_1344293203.jpg" // and the title + canonical URL for that profile profile.title profile.url => "http://instagram.com/djlowry"
You could use this in a similar fashion to grab information on a movie (IMDB uses OpenGraph)
If you’re implementing OpenGraph with Facebook in mind, check out David Walsh’s blog post (he’s the mootools guru) summarising the data types involved and a few tips regarding best practices [a.k.a ‘SEO’].