Embed DeviantArt media in your apps and websites with oEmbed

One of the most frequent activities in social applications is link sharing. Wouldn't it be nice if your application could display an image thumbnail or some info from the linked resource? Normally developers would use clunky proprietary APIs, if those are available at all, or resort to screen scraping the pages to extract bits and pieces of information. Plus they'd have to do it differently for each service. Needless to say it's a hassle.

oEmbed solves this common problem nicely.

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

Many large services such as YouTube, Flickr, Hulu, Vimeo, Viddler, Qik, MyOpera, and now DeviantArt support this API. Our implementation of the oEmbed API makes it simple for application developers to embed media from DeviantArt just by having a link to a deviation page.

For example, a request like this:

https://backend.deviantart.com/oembed?url=http%3A%2F%2Ffav.me%2Fd2enxz7

Will return this JSON response:

{
  "version": "1.0",
  "type": "photo",
  "title": "Cope",
  "url": "https://fc04.deviantart.net/fs50/f/2009/336/4/7/Cope_by_pachunka.jpg",
  "author_name": "pachunka",
  "author_url": "https://pachunka.deviantart.com",
  "provider_name": "DeviantArt",
  "provider_url": "https://www.deviantart.com",
  "thumbnail_url": "https://th03.deviantart.net/fs50/300W/f/2009/336/4/7/Cope_by_pachunka.jpg",
  "thumbnail_width": 300,
  "thumbnail_height": 450,
  "width": 448,
  "height": 672
}

All that an application developer needs to do is to parse the desired values from this response, be it thumbnail or preview url or author name, and output a custom <img> tag or text on their webpage.

Calling oEmbed

By far the simplest way to use our oEmbed API is from client-side javascript using jQuery.

Your application should recognize that a given url leads to a deviation page at DeviantArt and then use this JSONP (JSON with padding) formatted oEmbed API call:

<script>
  var oembed_url = 'https://backend.deviantart.com/oembed?url=http%3A%2F%2Ffav.me%2Fd2enxz7&format=jsonp&callback=?';
  $.getJSON(oembed_url, function(data) {
    console.log('Deviation by: ' + data.author_name);
  });
</script>

Of course, you can also choose to use this API from the server side, parsing links and doing API calls when status updates are posted or possibly formatted for display. In that case, you would probably choose to use JSON or XML format.

The oEmbed API specification page lists a variety of libraries for most popular languages and frameworks that simplify an implementation. Needless to say, if you choose to embed media from DeviantArt by using this API, it's a very small step to provide the same integration with many other services that support it, such as Flickr and YouTube. Only the link format detection and url endpoints are specific to each service.

Who uses the DeviantArt oEmbed API?

You may have heard that DeviantArt was one of several launch partners for the new version of Twitter. A big part of that announcement was the ability to display images and videos in the Twitter stream. Content from DeviantArt was there from day one.

How did they do it? By using our publicly available oEmbed API, Twitter detects when a URL in a tweet is a link to a deviation on DeviantArt. Then they make a call to our JSONP API endpoint, read the response, and display the preview image.

Specifications and endpoints

We comply to the official oEmbed specifications. Our endpoints are:

JSON: https://backend.deviantart.com/oembed
XML: https://backend.deviantart.com/oembed?format=xml
JSONP: https://backend.deviantart.com/oembed?format=jsonp&callback=yourCallback

The URL scheme for the url parameter is:

https://*.deviantart.com/art/*
http://fav.me/*
https://sta.sh/*
https://*.deviantart.com/*#/d*