Tipps & Tricks

Tracking, So­ci­al Me­dia, CSS, YouTube

PC Magazin - - Inhalt -

Youtube, So­ci­al Me­dia, CSS

1. Fi­re­fox An­ti-Tracking Mo­zil­la hat an­ge­kün­digt, Tracking durch Web­sites stär­ker zu un­ter­bin­den. Die ers­ten Fea­tu­res sind in der ak­tu­el­len Ver­si­on von Fi­re­fox an­ge­kom­men.

Über Tracking im In­ter­net ma­chen sich nur we­ni­ge Ge­dan­ken, denn es läuft un­sicht­bar im Hin­ter­grund. Beim Cross-Si­te-Tracking kön­nen Be­nut­zer so­gar über meh­re­re Web­sites hin­weg ver­folgt wer­den; so kann der Tracking-Di­enst recht ge­naue Pro­fi­le mit den In­ter­es­sen ein­zel­ner Nut­zer er­stel­len. In ei­nem Blog-Bei­trag hat das Fi­re­fox-Team an­ge­kün­digt, sei­nen An­satz beim An­ti-Tracking zu än­dern und da­bei drei Punk­te her­vor­ge­ho­ben: Laut ei­ner Stu­die von Ghos­te­ry wer­den im Durch­schnitt 55,4 Pro­zent der ge­sam­ten La­de­zeit ei­ner Web­sei­te be­nö­tigt, um lang­sa­me Third Party Tra­cker zu la­den. In ei­ner spä­te­ren Fi­re­fox-Ver­si­on sol­len sol­che lang­sa­men Tra­cker blo­ckiert wer­den. Beim zwei­ten Punkt geht es dar­um, das er­wähn­te Cross-Si­te-Tracking zu un­ter­drü­cken. Die­ses Fea­tu­re ist ab der ak­tu­el­len Ver­si­on 63 be­reits in Fi­re­fox ent­hal­ten. Al­ler­dings müs­sen Sie es ex­tra ein­schal­ten. Da­zu kli­cken Sie in den Ein­stel­lun­gen auf Da­ten­schutz & Si­cher­heit. Im ers­ten Ab­schnitt Sei­ten­ele­men­te blo­ckie­ren kön­nen Sie Ein­stel­lun­gen vor­neh­men, um Ih­re Pri­vat­sphä­re bes­ser zu schüt­zen. Um Tra­cker mög­lichst um­fas­send zu blo­ckie­ren, set­zen Sie ei­nen Ha­ken bei Al­le er­kann­ten Ele­men­te zu­rAk­ti­vi­tä­ten­ver­fol­gung und wäh­len dort Im­mer. Dann set­zen Sie ei­nen Ha­ken bei Coo­kies von ein­ge­bun­de-

nen ex­ter­nen In­hal­ten („Dritt­an­bie­ter“) und wäh­len ei­ne der bei­den Op­tio­nen. Ent­schei­den Sie sich für Al­le Coo­kies von ein­ge­bet­te­ten ex­ter­nen Ele­men­ten („Dritt­an­bie­ter“), kann es pas­sie­ren, dass ei­ni­ge Web­sites nicht mehr funk­tio­nie­ren. In die­sem Fall kli­cken Sie in der URL-Leis­te auf das Icon mit dem – und dar­über – bzw. – . Wie zu­vor kön­nen Sie in den Ein­stel­lun­gen auch fest­le­gen, dass Fi­re­fox im­mer ei­ne Do Not Track- In­for­ma­ti­on sen­det. Der drit­te Punkt be­trifft schäd­li­che Prak­ti­ken, et­wa das Brow­ser Fin­ger­prin­ting. Da­bei mer­ken sich Tra­cker ei­nen Be­su­cher nicht über Coo­kies, son­dern über ein­deu­ti­ge Ein­stel­lun­gen wie die IP-Adres­se, den ver­wen­de­ten Brow­ser, das Be­triebs­sys­tem, Schrift­ar­ten oder Auf­lö­sung. Wenn Sie selbst tes­ten möch­ten, wie ein­zig­ar­tig Ih­re spe­zi­el­le Kom­bi­na­ti­on die­ser Da­ten ist, kön­nen Sie das un­ter ami­uni­que.org aus­pro­bie­ren. Künf­tig möch­te Fi­re­fox sol­che und an­de­re Prak­ti­ken, et­wa Cryp­to-Mi­ner, au­to­ma­tisch un­ter­drü­cken.

2. Face­book Ba­sis­da­ten für Open Graph Selbst bei klei­nen Web­sites kann es sein, dass der Link auf ei­nem So­ci­al-Me­dia-Ka­nal ge­teilt wird. Dann soll­te die Vor­schau des Links or­dent­lich aus­se­hen.

So­bald Sie ei­nen Link auf Face­book tei­len, ver­sucht das Netz­werk, aus den Da­ten der be­tref­fen­den Web­sei­te ei­ne mög­lichst sinn­vol­le Vor­schau zu er­stel­len. Die­se Vor­schau be­steht aus ei­nem Tea­ser­bild, der Do­main, dem Ti­tel und ei­nem kur­zen Tea­ser. Sie kön­nen Face­book kon­kret sa­gen, wel­che Da­ten Sie ger­ne in der Vor­schau se­hen möch­ten. Da­zu no­tie­ren Sie die ent­spre­chen­den Da­ten ge­mäß dem Open-Gra­phPro­to­koll im <he­ad> der Web­sei­te. In der ein­fachs­ten Form sieht das wie folgt aus:

Sie kön­nen sehr viel mehr Da­ten über­tra­gen, je nach­dem, wo­rum es auf die­ser spe­zi­el­len Web­sei­te geht. Ei­ne ent­spre­chen­de Lis­te fin­den Sie un­ter ogp.me. Wenn die Da­ten auf ei­ner Web­sei­te nicht vor­han­den sind, sucht sich Face­book selbst ent­spre­chen­de In­hal­te zu­sam­men. So wird et­wa für den Ti­tel der Vor­schau der <title> der Web­sei­te über­nom­men, für das Bild das ers­te Bild, das Face­book auf der Sei­te fin­det und ge­eig­ne­te Ma­ße hat, und für die Be­schrei­bung der ers­te Text, den Face­book im In­halts­be­reich fin­det oder dort ver­mu­tet. Manch­mal ist die Vor­schau auch oh­ne An­ga­be der Open-Graph-Da­ten schon gut ge­nug, so dass Sie nicht un­be­dingt den Auf­wand be­trei­ben müss­ten, Open Graph zu er­gän­zen. Das kann aber auch et­was sub­op­ti­mal aus­se­hen. So et­wa bei der ak­tu­el­len Vor­schau der Web­site ga­mef­or­ge.com (sie­he Ab­bil­dung un­ten). Im Qu­ell­text der Sei­te wird zwar so­gar noch ein Bild für Open Graph über­ge­ben, aber in den fal­schen Ma­ßen. News­por­ta­le oder Ma­ga­zi­ne sor­gen über ihr Con­ten­tMa­nage­ment-Sys­tem da­für, dass die ein­zel­nen Ar­ti­kel ent­spre­chen­de Open-Graph-Da­ten ent­hal­ten. Aber grund­sätz­lich ist es auf je­der Web­site sinn­voll, ein paar Da­ten zu über­tra­gen. Wer weiß schon, ob der Link nicht in ir­gend­ei­ner Dis­kus­si­on ge­teilt wird? Dann soll­te die Vor­schau auch ent­spre­chend aus­se­hen. Auch wenn es für die meis­ten Con­tent-Ma­nage­ment-Sys­te­me ent­spre­chen­de Plug­ins ge­ben wird: So et­was muss na­tür­lich erst ein­mal ein­ge­rich­tet und ge­pflegt wer­den – und macht da­mit Ar­beit. Wenn es für Ih­re Web­site nicht sinn­voll ist, ver­schie­de­ne Tea­ser für al­le mög­li­chen Sei­ten zu pfle­gen, kön­nen Sie zu­min­dest ei­ne re­du­zier­te Ver­si­on der Da­ten über­ge­ben, bei­spiels­wei­se: Dann über­ge­ben Sie zu­min­dest ein fes­tes Bild und ei­ne fes­te Be­schrei­bung, und über­las­sen es Face­book, sich den Ti­tel und die URL aus dem ge­teil­ten Link zu ho­len. Die­se bei­den Zei­len las­sen sich auch fest im Tem­pla­te ei­ner Web­site no­tie­ren. Das ist zwar nicht ide­al, aber bes­ser als ei­ne Vor­schau oh­ne Bild.

3. Face­book Tea­ser neu ge­ne­rie­ren las­sen Manch­mal wol­len Sie auf Face­book ei­ne Web­sei­te mit ak­tua­li­sier­ten Open-Graph-Da­ten tei­len, aber das Netz­werk be­nutzt wei­ter­hin die al­ten Da­ten.

Das liegt dar­an, dass Face­book die Vor­schau-Da­ten ei­ner Web­sei­te zu­nächst ein­mal nur dann ab­ruft bzw. er­zeugt, wenn der Link zum ers­ten Mal auf der Platt­form ge­teilt wird. Die­se Da­ten legt Face­book in ei­nem Ca­che ab und nutzt dann die­se Da­ten. Wenn Sie da­nach die Open-Graph-Da­ten än­dern, be­kommt Face­book da­von nichts mit. Al­so müs­sen Sie Face­book ir­gend­wie mit­tei­len, dass es ak­tua­li­sier­te Da­ten gibt. Das klappt mit dem Sha­ring De­bug­ger un­ter de­ve­l­o­pers.face­book.com/tools/de­bug/sha­ring. Dort ge­ben Sie ein­fach ei­ne Web­sei­te ein, de­ren Da­ten Sie ak­tua­li­sie­ren möch­ten. Face­book prüft dann die Da­ten und zeigt da­bei Feh­ler an. Wenn Sie möch­ten, dass

Face­book die Da­ten neu ab­ruft, kli­cken Sie in der Zei­le Letz­tes Scra­ping auf Er­neut scra­pen. Even­tu­ell müs­sen Sie das zwei­mal tun, bis Face­book die neue Vor­schau auch kor­rekt an­zeigt. Tei­len Sie die­sen Link da­nach, wird Face­book die neu­en Da­ten be­nut­zen.

4. Web­stan­dards CSS Va­ria­bles Ein Vor­teil von Prä­pro­zes­so­ren wie Sass ist die Tat­sa­che, dass Sie da­durch Va­ria­blen be­nut­zen kön­nen. Mitt­ler­wei­le un­ter­stüt­zen al­le mo­der­nen Brow­ser auch CSS Va­ria­bles.

In Sass ist es recht ein­fach, Va­ria­blen ein­zu­set­zen. Sie kön­nen zum Bei­spiel schrei­ben: Sass wird zu CSS kom­pi­liert und an den ent­spre­chen­den Stel­len steht dann statt der Va­ria­blen je­weils die ge­wünsch­te Far­be. Än­dert sich die High­light-Far­be müs­sen Sie auf die­se Wei­se nur ei­ne ein­zel­ne Zei­le än­dern. In mo­der­nen Brow­sern klappt das auch di­rekt, oh­ne Prä­pro­zes­so­ren. Mit CSS Va­ria­bles er­rei­chen Sie den glei­chen Ef­fekt über: Das klappt zwar auch im Brow­ser Edge ab Ver­si­on 16, al­ler­dings nicht in ei­nem der al­ten In­ter­net Ex­plo­rer oder im Ope­ra Mi­ni. Wenn Sie die­se Tech­nik den­noch in Ih­ren Pro­jek­ten ein­set­zen möch­ten, fin­den Sie un­ter git­hub.com/aa­ron­bar­ker/css-va­ria­bles-po­ly­fill ein Po­ly­fill, der das ge­wünsch­te Ver­hal­ten in äl­te­ren Brow­sern über Ja­va­Script nach­bil­det.

5. PHP Me­t­a­da­ten von YouTube-Vi­de­os Wenn Sie auf Ih­rer Web­site Me­t­a­da­ten von YouTu­beVi­de­os be­nö­ti­gen, kön­nen Sie sich die be­nö­tig­ten Da­ten über ent­spre­chen­de Schnitt­stel­len be­sor­gen.

Wol­len Sie auf ei­ner Web­site Vi­de­os zei­gen, wer­den die­se oft zu­nächst auf YouTube hoch­ge­la­den und dann auf der Web­site ein­ge­bet­tet. Manch­mal be­nö­ti­gen Sie im Con­tent-Ma­nage­ment-Sys­tem noch an­de­re Da­ten, die zum Vi­deo ge­hö­ren, et­wa den Ti­tel oder die Dau­er – oh­ne gleich schon das Vi­deo zu zei­gen. Nun könn­ten Sie die­se Da­ten di­rekt über das CMS ein­ge­ben. Ein­fa­cher wird es, wenn ein Re­dak­teur nur die URL zum YouTube-Vi­deo ein­trägt, und Sie al­le be­nö­tig­ten Da­ten di­rekt von YouTube ab­fra­gen. Ein paar grund­le­gen­de In­for­ma­tio­nen kön­nen Sie mit ein paar Zei­len PHP über ei­ne of­fe­ne oEm­be­dSchnitt­stel­le ab­ru­fen. Das Er­geb­nis er­hal­ten Sie im JSON-For­mat, et­wa:

kön­nen Sie über die YouTube Da­ta API v3 ab­ru­fen. Sie brau­chen ein Goog­le-Kon­to, kön­nen dann über con­so­le.de­ve­l­o­pers.goog­le.com ein De­ve­l­oper-Pro­jekt an­le­gen, um ei­nen API-Key für den Zu­griff auf YouTube zu ge­ne­rie­ren. Dann rei­chen wie­der ein paar Zei­len: Dar­über er­hal­ten Sie deut­lich mehr In­for­ma­tio­nen, un­ter an­de­rem die Län­ge des Vi­de­os, das Da­tum der Ver­öf­fent­li­chung, die Tags, Links auf ver­schie­de­ne Grö­ßen der Thumb­nail-Bil­der und Sta­tis­ti­ken wie die An­zahl der Views, Li­kes, Dis­li­kes, Kom­men­ta­re. Ent­spre­chend mit dem CMS ver­knüpft, reicht es nun, wenn ein Re­dak­teur für ein Vi­deo nur die ID ein­trägt, und ein Skript beim Spei­chern al­le be­nö­tig­ten Da­ten über die Schnitt­stel­le ab­fragt und di­rekt mit im CMS ab­spei­chert. Für den Fall, dass Sie ge­ne­rell al­le Vi­de­os ei­nes be­stimm­ten Ka­nals auf Ih­rer Web­site an­zei­gen möch­ten, kön­nen Sie auch al­les au­to­ma­ti­sie­ren und die API nut­zen, um zu­nächst den Chan­nel und dann die ein­zel­nen Vi­de­os ab­zu­fra­gen. Ni­co­lai Schwarz

Falls Ih­re Ein­stel­lun­gen da­zu füh­ren, dass ein­zel­ne Web­sites nicht mehr rich­tig dar­ge­stellt wer­den, kön­nen Sie über das Icon in der Adress­zei­le schnell Aus­nah­men hin­zu­fü­gen.

In den Ein­stel­lun­gen kön­nen Sie fest­le­gen, ob und wie Fi­re­fox das Tracking un­ter­bin­den soll.

Mit Hil­fe von Face­books Sha­ring De­bug­ger über­prü­fen Sie die OpenGraph-Da­ten, die ei­ne Web­sei­te über­gibt.

Wenn kei­ne Open-Graph-Da­ten über­ge­ben wer­den, se­hen die ge­teil­ten Links in Face­book mit­un­ter et­was dürf­tig aus.

CSS Va­ria­bles wer­den von al­len mo­der­nen Brow­sern un­ter­stützt – aber lei­der nicht von al­ten In­ter­net Ex­plo­r­ern.

Über die oem­bed-URL kön­nen Sie ei­ni­ge Me­t­a­da­ten, wie den Ti­tel ei­nes YouTube-Vi­de­os, ab­fra­gen. Hier die Aus­ga­be Fi­re­fox.

Dar­über er­hal­ten Sie zwar Ti­tel und Tea­ser­bild, al­ler­dings fehlt ei­ne An­ga­be über die Län­ge. Mehr Da­ten

Um YouTu­bes API nut­zen zu kön­nen, müs­sen Sie zu­nächst ein De­ve­l­oper-Pro­jekt an­le­gen und ei­nen API-Key ge­ne­rie­ren.

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.