Shop Mobile More Submit  Join Login
×

More from DeviantArt



Details

Submitted on
October 15, 2010
Link
Thumb

Stats

Views
5,987 (2 today)
Favourites
1 (who?)
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:
panzi Featured By Owner Dec 7, 2011
You return the type "file" instead of "photo" for some reason. "file" is not defined by the oembed standard.
Reply
:iconthaina:
Thaina Featured By Owner Nov 29, 2011
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:
panzi Featured By Owner Dec 7, 2011
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:
Thaina Featured By Owner Dec 8, 2011
I see... so it really just encoding formular from 10 based to 36 based

Thank you very much
Reply
:iconmagic3w:
Magic3W Featured By Owner Sep 1, 2011
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 Featured By Owner Aug 1, 2011  Hobbyist Artisan Crafter
Why cant i use [link]
or just the ID?
Reply
:iconnippey:
Nippey Featured By Owner Aug 1, 2011  Hobbyist Artisan Crafter
thx for turning it into a link ^^
http : / / deviantart . com / deviation / #DEVIATIONID
Reply
:iconrandomduck:
randomduck Featured By Owner Nov 23, 2011
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 Featured By Owner 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:
panzi Featured By Owner Feb 13, 2011
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
:iconpanzi:
panzi Featured By Owner Feb 13, 2011
Oops, is see for the "photo" type the "html" attribute is not required.
Reply
:iconpanzi:
panzi Featured By Owner Feb 13, 2011
PS: Also why do you disallow callback names with dots in it? I like to put my callbacks in a special callback object to keep the global scope clean.
Reply
:iconrandomduck:
randomduck Featured By Owner Mar 9, 2011
sorry, just some parsing rules restrictions on the server. i'll see if can loosen that, not sure
Reply
:icondavecheesefish:
Davecheesefish Featured By Owner Oct 22, 2010  Hobbyist Artist
deviantART API :excited:

</nerdgasm>
Reply
:iconspyed:
spyed Featured By Owner Oct 18, 2010  Hobbyist General Artist
awesome post. thanks sasha ;)
Reply
:iconyumeruby:
yumeruby Featured By Owner Oct 16, 2010  Hobbyist General Artist
Sweet. What type of embed do you use for lit deviations?

Now, if only Tumblr would support oEmbed...
Reply
:iconwolffoetowtech:
wolffoetowtech Featured By Owner Oct 16, 2010  Hobbyist General Artist
interesting
Reply
:icondrfrankenstein90:
DrFrankenstein90 Featured By Owner Oct 15, 2010
This is very promosing. :D
Reply
:iconpyritie:
Pyritie Featured By Owner Oct 15, 2010  Hobbyist Digital Artist
DIFI TIME NEXT
Reply
:iconphotofroggy:
photofroggy Featured By Owner Oct 15, 2010  Hobbyist Artist
Interesting, but I'm more interested in an API that would allow third party applications to interact with other parts of the website. Utilising DiFi would be awesome, and has potential, but I guess security might be an issue there.
Reply
:iconoggyb:
oggyb Featured By Owner Oct 15, 2010
Does this mean we can now have video quality that's fit for purpose? Because otherwise this whole service will be a way to allow millions more people to get tired of crappy data reduction and mono audio.
Reply
:iconkishan-bagaria:
Kishan-Bagaria Featured By Owner Oct 15, 2010
Are you guys going to make another API which lets developers do different things like devWATCH/+fav/get messages from dA message center?
Reply
:iconpyritie:
Pyritie Featured By Owner Oct 15, 2010  Hobbyist Digital Artist
That's what DiFi is.
Reply
:iconkishan-bagaria:
Kishan-Bagaria Featured By Owner Oct 16, 2010
What's the full form of it?
Reply
:iconpyritie:
Pyritie Featured By Owner Oct 16, 2010  Hobbyist Digital Artist
We don't know, that's why we're asking :lol:
Reply
:iconrandomduck:
randomduck Featured By Owner Oct 16, 2010
"Even I forget what it stands for" -Andrew McCann, 2006
Reply
:iconpyritie:
Pyritie Featured By Owner Oct 16, 2010  Hobbyist Digital Artist
:lmao:
Reply
:iconkishan-bagaria:
Kishan-Bagaria Featured By Owner Oct 16, 2010
I think it's deviantFIDELITY. ;P
Reply
:iconelectricjonny:
electricjonny Featured By Owner Oct 15, 2010  Hobbyist Photographer
Hmm, I'm still waiting for some documentation on DiFi? Or is that asking too much? :lol:

I will have to check this all out, and read all the documentation, but I'm mostly interested in this for making GM scripts and whatnot, so yeah, not sure how helpful this will be to me :B
Reply
:iconrandomduck:
randomduck Featured By Owner Oct 15, 2010
Difi is a private ajax-type API. it is not likely to be documented as it is not intended to be used by anything except deviantart application and be changed with that application needs. Publicly available APIs, like this one will receive full documentation, support, versioning and stable frozen interfaces as they become available.
Reply
:iconelectricjonny:
electricjonny Featured By Owner Oct 15, 2010  Hobbyist Photographer
Ah I see. I'd be interested in reading more about this one, once the documentation comes out (unless it's all just in the oembed.com site?) :)
Reply
:iconrandomduck:
randomduck Featured By Owner Oct 15, 2010
Yes, the formal API documentation is on oEmbed specification page - [link]
This blog post is usage example, how-to and information specific to deviantART implementation such as urls
Reply
:iconvsconcepts:
VSConcepts Featured By Owner Oct 15, 2010  Professional Interface Designer
T..w...i.t..t.e..r... :?
I still fail to understand the allure of that site/service.
Call me when when we can embed media into our journals. :yawn:
Reply
:iconananasjihad:
ananasjihad Featured By Owner Oct 15, 2010  Hobbyist General Artist
:eager:
Reply
:iconsparkzbolt:
SparkZBolt Featured By Owner Oct 15, 2010  Hobbyist Digital Artist
Sweet. That's awesome.
Reply
Add a Comment: