oembed, wordpress 4.4 und mein eigener endpunkt

felix schwenzel in artikel

ich mag ein­bet­tun­gen ei­gent­lich nicht. auch wenn der ein­bett­code, den zum bei­spiel twit­ter vor­schlägt, gar ncht mal so schlecht ist:

der code ren­dert ein zi­tat (<block­quo­te>) mit ei­ner ur­he­ber­an­ga­be und ei­nem link zum ori­gi­nal. da­mit ist er auch in RSS-feeds les­bar, bzw. ohne ja­va­script. das ja­va­script das an den code un­ten ge­hängt ist, rei­chert das zi­tat mit CSS-sti­len und dem bild an, so dass aus dem hier

Ich be­nut­ze das alte und das neue Twit­ter noch par­al­lel. pic.twit­ter.com/jAKxoZ2x7S

— Ahoi Pol­loi (@ahoi_pol­loi) No­vem­ber 3, 2015

das hier wird:

zwei din­ge ge­fal­len mir an dem of­fi­zi­el­len em­bedcode von twit­ter nicht: die links sind nicht im klar­text, son­dern per t.co-ge­kürzt und even­tu­ell an den tweet ge­häng­te bil­der feh­len. des­halb habe ich mir mei­nen ei­ge­nen ein­bett­code ge­baut, der die­se bei­den nach­tei­le aus­bü­gelt. so sieht eine sol­che ein­bet­tung dann aus:

Ich be­nut­ze das alte und das neue Twit­ter noch par­al­lel. pic.twit­ter.com/jAKxoZ2x7S

Ahoi Pol­loi (@ahoi_pol­loi) 03.11.2015 18:02

(ur­sprüng­lich ver­öf­fent­licht am 01.12.2015 09:25)

der vor­teil des off­zi­el­len twit­ter-em­bedcodes ist na­tür­lich sei­ne ein­fach­heit. das HTML-ge­raf­fel oben muss man in mo­der­nen CMS gar nicht ko­pie­ren und ein­set­zen, in der re­gel reicht es aus, die tweet-URL zu ko­pie­ren und in den CMS-edi­tor ein­zu­set­zen. das CMS holt sich dann bei twit­ter den ein­bett­code und wan­delt die URL selbst um. das funk­tio­niert mit den meis­ten platt­for­men so, in­sta­gram, you­tube, tumb­lr und, seit word­press 4.4, auch mit x-be­lie­bi­gen word­press-blogs.

wenn ich bei­spiels­wei­se die­se url (http://no­tiz­blog.org/2015/12/07/10-jah­re-no­tiz­blog/) in den word­press-4.4-edi­tor ko­pie­re, macht word­press das hier draus:

tech­nisch ist das al­les das glei­che, näm­lich oem­bed. das CMS schaut in ei­ner lis­te oder auf der sei­te selbst nach, ob die site ei­nen oem­bed-end­punkt hat und fragt den dann nach dem ein­bett­code.

me­di­um.com hat sich hier üb­ri­gens eine ex­tra­wurst ge­bra­ten, sie bie­ten ech­te, na­ti­ve em­beds nur für twit­ter an, bzw. be­nutzt für you­tube ei­nen et­was mo­di­fi­zier­ten play­er, der bei ak­ti­vier­ter do-not-track-an­wei­sung im brow­ser erst ei­nen OK-klick be­nö­tigt, be­vor er na­tiv ge­la­den wird.

für alle an­de­ren em­beds be­nutzt me­di­um.com ei­nen ei­ge­nen ein­bett­me­cha­nis­mus, der sich ti­tel, ar­ti­kel­bild und die kurz­be­schrei­bung di­rekt bei der ein­ge­bet­te­ten URL holt. da­mit funk­tio­niert die ein­bet­tung im prin­zip von je­der be­lie­bi­gen web­sei­te.

wie ge­sagt, ich be­nut­ze auf wir­res.net, so gut es geht, ei­ge­ne ein­bett­codes, die man zum bei­spiel auf mei­ner fa­vo­ri­ten­sei­te se­hen kann. das html er­zeu­ge ich mir au­to­ma­tisch oder semi-au­to­ma­tisch, vor al­lem, da­mit ein­bet­tun­gen auch ohne ja­va­script und ohne das la­den von tra­ckern oder scrip­ten der ori­gi­nal­sei­ten funk­tio­nie­ren — und vor al­lem auch im RSS-rea­der an­stän­dig an­ge­zeigt wird. das gilt auch für alle you­tube-vi­de­os, die ich hier ein­bet­te (ähn­lich wie bei me­di­um.com, sie­he oben) und funk­tio­niert ana­log zu oem­bed: ich fra­ge, wie oem­bed, alle mög­li­chen APIs ab, nut­ze aber eben de­ren vor­ge­schla­ge­nen, tra­cker- und script-in­fi­zier­ten ein­ebtt­codes nicht, son­dern selbst­ge­bau­te.

trotz­dem möch­te ich aber beim ein­bett­spiel mit­spie­len, vor al­lem jetzt, wo word­press mit der 4.4-ver­si­on das so ein­fach ge­macht hat ei­ge­ne in­hal­te ein­bett­bar zu ma­chen und be­lie­bi­ge an­de­re in­hal­te (von word­press 4.4-nut­ze­rin­nen) ein­zu­bet­ten.

also hab ich mir ges­tern ei­nen oem­bed-end­punkt selbst ge­schrie­ben (code hier auf git­hub) — auf wir­res.net läuft ja be­kannt­lich kein word­press.

das script funk­tio­niert mit al­len vie­len sites, die mf2-mi­cro­for­ma­te be­nut­zen, in­dem es die sei­te nach mi­cro­for­ma­ten ab­sucht und aus den da­ten eine oem­bed-ant­wort, bzw. ei­nen em­bedcode baut. bei­spie­le:

weil im kopf al­ler wir­res.net-ar­ti­kel die­se zei­le steht, kön­nen oem­bed-fä­hi­ge cli­ents (CMS) den oem­bed-end­punkt selbst fin­den:

da­mit klappt dann im prin­zip auch das ein­bet­ten von wir­res.net-ar­ti­keln in word­press ≥ 4.4




word­press traut x-be­lie­bi­gen blogs al­ler­dings nicht über den weg. nur oem­bed-an­bie­ter die in der word­press-ei­ge­nen weis­sen-lis­te ste­hen, dür­fen if­rames nut­zen die auch links aus­ser­halb ih­rer selbst öff­nen dür­fen. word­press sand­bo­xed aus si­cher­heits­grün­den if­rames von al­len oem­bed-an­bie­tern, die nicht in der lis­te sind. da­mit, wuss­te ich vor­her auch nicht, sind vie­le fea­tures wie po­pups oder ein­fa­che links ins ak­tu­el­le, obe­re fens­ter („_top“) nicht mehr mög­lich. word­press um­geht das, in­dem es if­rames mit ei­nem „se­cret“, also pass­wort ver­sieht und wenn der if­rame die­ses se­cret aus­le­sen kann, kön­nen sich der if­rame und die ein­bet­ten­de sei­te nach­rich­ten schi­cken. so kann dann via ja­va­script wie­der auf links in den ein­ge­bet­te­ten if­rames ge­klickt wer­den. al­ler­dings mit der ein­schrän­kung, dass nur auf die do­main auf der der if­rame liegt ge­linkt wer­den darf. des­halb habe ich in mei­nen if­rame ja­va­script-code aus dem word­press-core ko­piert, der die­se kom­mu­ni­ka­ti­on mit der ein­bet­ten­den sei­te über­nimmt und den ge­san­box­ten em­bed erst klick­bar macht.

hört sich kom­pli­ziert an und is­ses auch. im prin­zip könn­te jede web­site (mit mi­cro­for­ma­ten) mei­nen oem­bed-end­punkt be­nut­zen und sich von ihm em­beds und if­rames mit ei­nem teaser er­zeu­gen las­sen, aber die­se wä­ren dann (in word­press) nicht klick­bar, weil der word­press-code dar­auf be­steht, dass if­rame-quel­le und link-ziel auf der glei­chen do­main lie­gen. wer also kein word­press hat und mei­nen oem­bed-end­punkt be­nut­zen will, muss ihn sich also auf der ei­ge­nen site in­stal­lie­ren.

das aus­es­hen der em­beds ori­en­tiert sich (of­fen­sicht­lich) an den twit­ter-cards, die twit­ter ge­le­gent­lich un­ter tweets an­zeigt, um eine vor­schau auf ei­nen link zu vi­sua­li­sie­ren. das HTML und CSS ist gröss­ten­teils von twit­ter aus­ge­lie­hen, bis mir eine bes­se­re lö­sung ein­fällt.

der code ist al­les an­de­re als ele­gant und ist stark ver­bes­se­rungs­wür­dig. es soll aber auch nicht mehr als ein ers­ter ver­such, eine klei­ne stu­die sein.