Content von anderen Seiten, z.B. YouTube, Flickr, Slideshare auf die eigene Seite einzubetten ist auf den ersten Blick immer nur schwer möglich. Insbesondere wenn man dies “automatisiert” anhand der URL machen möchte. Wie die Einbettung erfolgt hängt stark vom Content ab – bei YouTube und co. muss ein Videoplayer zum Einsatz kommen, Slideshare und co. nehmen Flash/JS für die Präsentationen. Allerdings gibt es einen Standard, welche genau diesen Fall abdecken möchte: oEmbed.
Ziel von oEmbed
oEmbed soll eine einheitliche Schnittstelle sein, über den der eigene Content von anderen Seiten eingebettet werden kann. Es gibt einige große Namen, welche oEmbed unterstützen, darunter YouTube und Flickr:
Beispiel Flickr:
Der Client ruft diese URL auf:
http://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/bees/2341623661/
Und bekommt als Antwort:
{
"version": "1.0",
"type": "photo",
"width": 240,
"height": 160,
"title": "ZB8T0193",
"url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",
"author_name": "Bees",
"author_url": "http://www.flickr.com/photos/bees/",
"provider_name": "Flickr",
"provider_url": "http://www.flickr.com/"
}Beispiel YouTube:
Aufruf:
http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json
Antwort:
{
"version": "1.0",
"type": "video",
"provider_name": "YouTube",
"provider_url": "http://youtube.com/",
"width": 425,
"height": 344,
"title": "Amazing Nintendo Facts",
"author_name": "ZackScott",
"author_url": "http://www.youtube.com/user/ZackScott",
"html":
"<object width=\"425\" height=\"344\">
<param name=\"movie\" value=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"></param>
<param name=\"allowFullScreen\" value=\"true\"></param>
<param name=\"allowscriptaccess\" value=\"always\"></param>
<embed src=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"
type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
</object>",
}
Insbesondere bei dem YouTube Beispiel kommt die Idee zum Tragen: Im HTML Property steht der komplette Code zum Einbinden des YouTube Players.
oEmbed Rückgaben
Laut Standard kann als Ergebnis entweder XML oder JSON zurückkommen, allerdings ist heute JSON eher gebräuchlich. YouTube unterstützt aber z.B. beides.
jQuery oEmbed Bibliothek
Es gibt auch eine jQuery Bibliothek um diese Services abzufragen. Dabei wird auf JSONP zurückgegriffen.
embed.ly – oEmbed Hub
Durch oEmbed ist das Format vorgegeben, jedoch muss man trotzdem dutzende Provider einzeln anfragen und die entsprechenden URLs wissen. Mit dem Dienst embed.ly kann man auch auf eine Art “Hub” zurückgreifen. Embed.ly stellt einen oEmbed Endpunkt bereit und man kann “fast” jede Adresse an embed.ly senden und man bekommt meist eine passende Antwort.
embed.ly selbst kann einfach über das jQuery Plugin angesprochen werden.
embed.ly – Kostenpunkt
embed.ly hat allerdings auch einen Haken: Es ist nicht kostenlos. Es gibt allerdings einen kostenfreien Account-Typ (nach unten scrollen!). Über diesen Account kann man monatlich 10.000 Aufrufe machen. Danach sind die Preise gestaffelt.
Für wen ist embed.ly und oEmbed interessant?
Allen voran ist die offensichtlichste Nutzung bei “Link-Sharing” Seiten wie Digg.com etc. Allerdings bekommt man auch über die pure URL ein paar Meta-Informationen raus, sodass man sich u.a. auch die Anbindung an eine komplexe API sparen kann.
Selbst ausprobieren auf embed.ly
embed.ly stellt ein “Test-Client” bereit über den man ein Gefühl dafür bekommt, welche Ergebnisse man erwarten kann.
