Deviant Login Shop  Join deviantART for FREE Take the Tour
×

More from deviantART



Details

Submitted on
October 15, 2010
Link
Thumb

Stats

Views
5,269
Favourites
0
Comments
35
×
Embedding deviantART Media in Your Applications Made Easy


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. And 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 oEmbed API makes it simple for application developers to embed media from deviantART from having just a link to a deviation page. For example, a request like this:

http://backend.deviantart.com/oembed?url=http%3A%2F%2Ffav.me%2Fd2enxz7
Will return you this JSON response:
{"version":"1.0",
"type":"photo",
"title":"Cope",
"url":"fc04.deviantart.net/fs50/f/200…",
"author_name":"pachunka",
"author_url":"pachunka.deviantart.com",
"provider_name":"DeviantART",
"provider_url":"www.deviantart.com",
"thumbnail_url":"th03.deviantart.net/fs50/300W/…",
"thumbnail_width":300,
"thumbnail_height":450,
"width":448,
"height":672}

All that the application developer needs to do is to read the desired values from this response, be it thumbnail or preview url or author name, and output an image tag or text on the webpage.



Calling this API from Your Applications

By far the simplest way to use our oEmbed API is from client-side javascript using jQuery. Your application would need to recognize that a link in status post is to a deviation page at deviantART and use this JSONP (JSON with padding) format oEmbed API call:


Of course, you can choose to use the 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. And needless to say, if you choose to embed media from deviantART 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 the services.



Who Uses deviantART oEmbed API?

Some of 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 that the URL present in the status update is a link to a deviation on deviantART, hits our API JSONP endpoint, reads the response and displays the preview image.





API Documentation
See oEmbed API  specification page
deviantART provider implementation:
API JSON endpoint is: http://backend.deviantart.com/oembed
API XML  endpoint is: http://backend.deviantart.com/oembed?format=xml
API JSONP  endpoint is: http://backend.deviantart.com/oembed?format=jsonp&callback=yourCallback
<dl>
<dt>URL scheme for url parameter is:</dt>
    <dd>http://*.deviantart.com/art/*
    http://fav.me/*
    http://*.deviantart.com/*#/d*
</dd></dl>


Add a Comment:
 
:iconpanzi:
You return the type "file" instead of "photo" for some reason. "file" is not defined by the oembed standard.
Reply
:iconthaina:
I'd like to ask

Are there any API to get fav.me URL from full URL?

Is fav.me URL always static?

I have some idea for some kind of application. I want to keep only static ID to target URL and that ID must not change or expire
Reply
:iconpanzi:
I took a quick look at the URL scheme and it looks like you can get the fav.me URL from the long URL using this JavaScript code. The reverse is of course not possible without DB access, because deviation URLs contain the deviation title. But you can use a HTTP HEAD request in order to resolve the URL like this.
Reply
:iconthaina:
I see... so it really just encoding formular from 10 based to 36 based

Thank you very much
Reply
:iconmagic3w:
Hi!

I've been reading through this and think it's really interesting, though I personally find it would be wise to escape the # character for this kind of requests.

Most browsers use it to indicate the part of the site you want to see, or to trigger JS functions (so does dA as far as I know).

This way the URL http:// backend.deviantart.com/oembed?url=http:// magic3w.deviantart.com/#/d3195xw can lead to the APi to return:

404 Not Found ([link]) The URL [link] is not a deviation URL

Because the browser doesn't send any of the URL to the server as it doesn't consider it relevant. As far as I know the correct escaped version would look like this:

http:// backend.deviantart.com/oembed?url=http:// magic3w.deviantart.com/%23/d3195xw

This will lead the APi to return the correct response.



I also felt so free to think of a HTML5 Script that allows inserting images from Deviantart into Websites and Blogs with no further scripting need:

<script>
/* Magic3W - [link]
_da = new function() {

this.storeData = function (data)
{
this.loadImage(data);
}

this.loadImage = function(data)
{
var i = this.current;
this.current++;
var imgs = this.imgs;
if (!imgs[i].getAttribute) return;
if (imgs[i].getAttribute('data-embed-size') && imgs[i].getAttribute('data-embed-size').toLowerCase() == 'thumb')
{
imgs[i].src = data.thumbnail_url;
imgs[i].width = data.thumbnail_width;
imgs[i].height = data.thumbnail_height;
}
else
{
imgs[i].src = data.url;
imgs[i].width = data.width;
imgs[i].height = data.height;
}

this.readJSON(this.current);
}

this.readJSON = function (index)
{
if (index >= this.imgs.length) return;
if (this.imgs[index].getAttribute('data-embed').toLowerCase() == 'deviantart')
{
var jsonSrc = this.imgs[index].getAttribute('data-embed-src').toLowerCase().replace(/#/g, '%23') + '&format=jsonp&callback=_da.storeData';
var t = document.createElement('script');
t.setAttribute('type', 'text/javascript');
t.setAttribute('src', jsonSrc);
t.async = 'false';
document.getElementsByTagName('head')[0].appendChild(t);
}
}

this.imgs = document.getElementsByTagName('img');
this.current = 0;
this.readJSON(0)
}
</script>


Using the Script is really simple. Just create an img tag like this for Full Sized Image:
<img data-embed="deviantArt" data-embed-src="[link]" />

This for the Thumb version (which is a really big thumb I guess:
<img data-embed="deviantArt" data-embed-src="[link]" data-embed-size="thumb" />


You can also use fallback images for browsers not compatible
<img data-embed="deviantArt" data-embed-src="[link]" data-embed-size="thumb" src="youshouldupdateyourbrowser.png" />

If you need help with it just feel free to contact me via Note.
Reply
:iconnippey:
Nippey Aug 1, 2011  Hobbyist Artisan Crafter
Why cant i use [link]
or just the ID?
Reply
:iconnippey:
Nippey Aug 1, 2011  Hobbyist Artisan Crafter
thx for turning it into a link ^^
http : / / deviantart . com / deviation / #DEVIATIONID
Reply
:iconrandomduck:
you can. just put www. before domain and trailing slash

http : // www.deviantart.com/deviation/xxxx/

links in that format are long gone, but we still support them
Reply
:iconnippey:
Nippey Nov 24, 2011  Hobbyist Artisan Crafter
Great, thank you!

I wanted to fetch some infos from the DA-servers, which have urls with those ID's, so it is benefical to use the same ID for the oEmbed interface ;)
Reply
:iconpanzi:
Very nice, but you miss the required "html" attribute which should contain the embedding code you get under "Embed" from a deviations view page.
Reply
Add a Comment: