ich mag einbettungen eigentlich nicht. auch wenn der einbettcode, den zum beispiel twitter vorschlägt, gar ncht mal so schlecht ist:


<blockquote class="twitter-tweet" lang="en">
<p lang="de" dir="ltr">
Ich benutze das alte und das neue Twitter noch parallel.
<a href="https://t.co/jAKxoZ2x7S">
pic.twitter.com/jAKxoZ2x7S
</a>
</p>
— Ahoi Polloi (@ahoi_polloi)
<a href="https://twitter.com/ahoi_polloi/status/661589305576550401">
November 3, 2015
</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js"
charset="utf-8"></script>


der code rendert ein zitat (<blockquote>) mit einer urheberangabe und einem link zum original. damit ist er auch in RSS-feeds lesbar, bzw. ohne javascript. das javascript das an den code unten gehängt ist, reichert das zitat mit CSS-stilen und dem bild an, so dass aus dem hier

Ich benutze das alte und das neue Twitter noch parallel. pic.twitter.com/jAKxoZ2x7S

— Ahoi Polloi (@ahoi_polloi) November 3, 2015

das hier wird:

zwei dinge gefallen mir an dem offiziellen embedcode von twitter nicht: die links sind nicht im klartext, sondern per t.co-gekürzt und eventuell an den tweet gehängte bilder fehlen. deshalb habe ich mir meinen eigenen einbettcode gebaut, der diese beiden nachteile ausbügelt. so sieht eine solche einbettung dann aus:

(ursprünglich veröffentlicht am 01.12.2015 10:25)

* * *

der vorteil des offziellen twitter-embedcodes ist natürlich seine einfachheit. das HTML-geraffel oben muss man in modernen CMS gar nicht kopieren und einsetzen, in der regel reicht es aus, die tweet-URL zu kopieren und in den CMS-editor einzusetzen. das CMS holt sich dann bei twitter den einbettcode und wandelt die URL selbst um. das funktioniert mit den meisten plattformen so, instagram, youtube, tumblr und, seit wordpress 4.4, auch mit x-beliebigen wordpress-blogs.

wenn ich beispielsweise diese url (http://notizblog.org/2015/12/07/10-jahre-notizblog/) in den wordpress-4.4-editor kopiere, macht wordpress das hier draus:

technisch ist das alles das gleiche, nämlich oembed. das CMS schaut in einer liste oder auf der seite selbst nach, ob die site einen oembed-endpunkt hat und fragt den dann nach dem einbettcode.

medium.com hat sich hier übrigens eine extrawurst gebraten, sie bieten echte, native embeds nur für twitter an, bzw. benutzt für youtube einen etwas modifizierten player, der bei aktivierter do-not-track-anweisung im browser erst einen OK-klick benötigt, bevor er nativ geladen wird.

für alle anderen embeds benutzt medium.com einen eigenen einbettmechanismus, der sich titel, artikelbild und die kurzbeschreibung direkt bei der eingebetteten URL holt. damit funktioniert die einbettung im prinzip von jeder beliebigen webseite.

* * *

wie gesagt, ich benutze auf wirres.net, so gut es geht, eigene einbettcodes, die man zum beispiel auf meiner favoritenseite sehen kann. das html erzeuge ich mir automatisch oder semi-automatisch, vor allem, damit einbettungen auch ohne javascript und ohne das laden von trackern oder scripten der originalseiten funktionieren — und vor allem auch im RSS-reader anständig angezeigt wird. das gilt auch für alle youtube-videos, die ich hier einbette (ähnlich wie bei medium.com, siehe oben) und funktioniert analog zu oembed: ich frage, wie oembed, alle möglichen APIs ab, nutze aber eben deren vorgeschlagenen, tracker- und script-infizierten einebttcodes nicht, sondern selbstgebaute.

trotzdem möchte ich aber beim einbettspiel mitspielen, vor allem jetzt, wo wordpress mit der 4.4-version das so einfach gemacht hat eigene inhalte einbettbar zu machen und beliebige andere inhalte (von wordpress 4.4-nutzerinnen) einzubetten.

also hab ich mir gestern einen oembed-endpunkt selbst geschrieben (code hier auf github) — auf wirres.net läuft ja bekanntlich kein wordpress.

das script funktioniert mit allen vielen sites, die mf2-microformate benutzen, indem es die seite nach microformaten absucht und aus den daten eine oembed-antwort, bzw. einen embedcode baut. beispiele:

• http://wirres.net/article/articleview/8827/1/49/ → oembed-antwort → embed
• http://aaronparecki.com/notes/2015/12/04/1/esripdx-bubblewrap → oembed-antwort → embed
• http://notizblog.org/2015/12/07/10-jahre-notizblog/ → oembed-antwort → embed

weil im kopf aller wirres.net-artikel diese zeile steht, können oembed-fähige clients (CMS) den oembed-endpunkt selbst finden:


<link rel="alternate" type="application/json+oembed" href="http://wirres.net/oembed/?url=http://wirres.net/article/articleview/8788/1/6/"/>


damit klappt dann im prinzip auch das einbetten von wirres.net-artikeln in wordpress ≥ 4.4

* * *

wordpress traut x-beliebigen blogs allerdings nicht über den weg. nur oembed-anbieter die in der wordpress-eigenen weissen-liste stehen, dürfen iframes nutzen die auch links ausserhalb ihrer selbst öffnen dürfen. wordpress sandboxed aus sicherheitsgründen iframes von allen oembed-anbietern, die nicht in der liste sind. damit, wusste ich vorher auch nicht, sind viele features wie popups oder einfache links ins aktuelle, obere fenster („_top“) nicht mehr möglich. wordpress umgeht das, indem es iframes mit einem „secret“, also passwort versieht und wenn der iframe dieses secret auslesen kann, können sich der iframe und die einbettende seite nachrichten schicken. so kann dann via javascript wieder auf links in den eingebetteten iframes geklickt werden. allerdings mit der einschränkung, dass nur auf die domain auf der der iframe liegt gelinkt werden darf. deshalb habe ich in meinen iframe javascript-code aus dem wordpress-core kopiert, der diese kommunikation mit der einbettenden seite übernimmt und den gesanboxten embed erst klickbar macht.

hört sich kompliziert an und isses auch. im prinzip könnte jede website (mit microformaten) meinen oembed-endpunkt benutzen und sich von ihm embeds und iframes mit einem teaser erzeugen lassen, aber diese wären dann (in wordpress) nicht klickbar, weil der wordpress-code darauf besteht, dass iframe-quelle und link-ziel auf der gleichen domain liegen. wer also kein wordpress hat und meinen oembed-endpunkt benutzen will, muss ihn sich also auf der eigenen site installieren.

das auseshen der embeds orientiert sich (offensichtlich) an den twitter-cards, die twitter gelegentlich unter tweets anzeigt, um eine vorschau auf einen link zu visualisieren. das HTML und CSS ist grösstenteils von twitter ausgeliehen, bis mir eine bessere lösung einfällt.

der code ist alles andere als elegant und ist stark verbesserungswürdig. es soll aber auch nicht mehr als ein erster versuch, eine kleine studie sein.