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.
Primer
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_nameImage 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" />Example
A quick example, using the standard OpenGraph Ruby library.
Pick an Instagram image page or profile page
Install the opengraph gem and its dependencies. I do this inside of RVM.
$ 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)
Also
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’].