Tipps & Tricks
Tracking, Social Media, CSS, YouTube
Youtube, Social Media, CSS
1. Firefox Anti-Tracking Mozilla hat angekündigt, Tracking durch Websites stärker zu unterbinden. Die ersten Features sind in der aktuellen Version von Firefox angekommen.
Über Tracking im Internet machen sich nur wenige Gedanken, denn es läuft unsichtbar im Hintergrund. Beim Cross-Site-Tracking können Benutzer sogar über mehrere Websites hinweg verfolgt werden; so kann der Tracking-Dienst recht genaue Profile mit den Interessen einzelner Nutzer erstellen. In einem Blog-Beitrag hat das Firefox-Team angekündigt, seinen Ansatz beim Anti-Tracking zu ändern und dabei drei Punkte hervorgehoben: Laut einer Studie von Ghostery werden im Durchschnitt 55,4 Prozent der gesamten Ladezeit einer Webseite benötigt, um langsame Third Party Tracker zu laden. In einer späteren Firefox-Version sollen solche langsamen Tracker blockiert werden. Beim zweiten Punkt geht es darum, das erwähnte Cross-Site-Tracking zu unterdrücken. Dieses Feature ist ab der aktuellen Version 63 bereits in Firefox enthalten. Allerdings müssen Sie es extra einschalten. Dazu klicken Sie in den Einstellungen auf Datenschutz & Sicherheit. Im ersten Abschnitt Seitenelemente blockieren können Sie Einstellungen vornehmen, um Ihre Privatsphäre besser zu schützen. Um Tracker möglichst umfassend zu blockieren, setzen Sie einen Haken bei Alle erkannten Elemente zurAktivitätenverfolgung und wählen dort Immer. Dann setzen Sie einen Haken bei Cookies von eingebunde-
nen externen Inhalten („Drittanbieter“) und wählen eine der beiden Optionen. Entscheiden Sie sich für Alle Cookies von eingebetteten externen Elementen („Drittanbieter“), kann es passieren, dass einige Websites nicht mehr funktionieren. In diesem Fall klicken Sie in der URL-Leiste auf das Icon mit dem – und darüber – bzw. – . Wie zuvor können Sie in den Einstellungen auch festlegen, dass Firefox immer eine Do Not Track- Information sendet. Der dritte Punkt betrifft schädliche Praktiken, etwa das Browser Fingerprinting. Dabei merken sich Tracker einen Besucher nicht über Cookies, sondern über eindeutige Einstellungen wie die IP-Adresse, den verwendeten Browser, das Betriebssystem, Schriftarten oder Auflösung. Wenn Sie selbst testen möchten, wie einzigartig Ihre spezielle Kombination dieser Daten ist, können Sie das unter amiunique.org ausprobieren. Künftig möchte Firefox solche und andere Praktiken, etwa Crypto-Miner, automatisch unterdrücken.
2. Facebook Basisdaten für Open Graph Selbst bei kleinen Websites kann es sein, dass der Link auf einem Social-Media-Kanal geteilt wird. Dann sollte die Vorschau des Links ordentlich aussehen.
Sobald Sie einen Link auf Facebook teilen, versucht das Netzwerk, aus den Daten der betreffenden Webseite eine möglichst sinnvolle Vorschau zu erstellen. Diese Vorschau besteht aus einem Teaserbild, der Domain, dem Titel und einem kurzen Teaser. Sie können Facebook konkret sagen, welche Daten Sie gerne in der Vorschau sehen möchten. Dazu notieren Sie die entsprechenden Daten gemäß dem Open-GraphProtokoll im <head> der Webseite. In der einfachsten Form sieht das wie folgt aus:
Sie können sehr viel mehr Daten übertragen, je nachdem, worum es auf dieser speziellen Webseite geht. Eine entsprechende Liste finden Sie unter ogp.me. Wenn die Daten auf einer Webseite nicht vorhanden sind, sucht sich Facebook selbst entsprechende Inhalte zusammen. So wird etwa für den Titel der Vorschau der <title> der Webseite übernommen, für das Bild das erste Bild, das Facebook auf der Seite findet und geeignete Maße hat, und für die Beschreibung der erste Text, den Facebook im Inhaltsbereich findet oder dort vermutet. Manchmal ist die Vorschau auch ohne Angabe der Open-Graph-Daten schon gut genug, so dass Sie nicht unbedingt den Aufwand betreiben müssten, Open Graph zu ergänzen. Das kann aber auch etwas suboptimal aussehen. So etwa bei der aktuellen Vorschau der Website gameforge.com (siehe Abbildung unten). Im Quelltext der Seite wird zwar sogar noch ein Bild für Open Graph übergeben, aber in den falschen Maßen. Newsportale oder Magazine sorgen über ihr ContentManagement-System dafür, dass die einzelnen Artikel entsprechende Open-Graph-Daten enthalten. Aber grundsätzlich ist es auf jeder Website sinnvoll, ein paar Daten zu übertragen. Wer weiß schon, ob der Link nicht in irgendeiner Diskussion geteilt wird? Dann sollte die Vorschau auch entsprechend aussehen. Auch wenn es für die meisten Content-Management-Systeme entsprechende Plugins geben wird: So etwas muss natürlich erst einmal eingerichtet und gepflegt werden – und macht damit Arbeit. Wenn es für Ihre Website nicht sinnvoll ist, verschiedene Teaser für alle möglichen Seiten zu pflegen, können Sie zumindest eine reduzierte Version der Daten übergeben, beispielsweise: Dann übergeben Sie zumindest ein festes Bild und eine feste Beschreibung, und überlassen es Facebook, sich den Titel und die URL aus dem geteilten Link zu holen. Diese beiden Zeilen lassen sich auch fest im Template einer Website notieren. Das ist zwar nicht ideal, aber besser als eine Vorschau ohne Bild.
3. Facebook Teaser neu generieren lassen Manchmal wollen Sie auf Facebook eine Webseite mit aktualisierten Open-Graph-Daten teilen, aber das Netzwerk benutzt weiterhin die alten Daten.
Das liegt daran, dass Facebook die Vorschau-Daten einer Webseite zunächst einmal nur dann abruft bzw. erzeugt, wenn der Link zum ersten Mal auf der Plattform geteilt wird. Diese Daten legt Facebook in einem Cache ab und nutzt dann diese Daten. Wenn Sie danach die Open-Graph-Daten ändern, bekommt Facebook davon nichts mit. Also müssen Sie Facebook irgendwie mitteilen, dass es aktualisierte Daten gibt. Das klappt mit dem Sharing Debugger unter developers.facebook.com/tools/debug/sharing. Dort geben Sie einfach eine Webseite ein, deren Daten Sie aktualisieren möchten. Facebook prüft dann die Daten und zeigt dabei Fehler an. Wenn Sie möchten, dass
Facebook die Daten neu abruft, klicken Sie in der Zeile Letztes Scraping auf Erneut scrapen. Eventuell müssen Sie das zweimal tun, bis Facebook die neue Vorschau auch korrekt anzeigt. Teilen Sie diesen Link danach, wird Facebook die neuen Daten benutzen.
4. Webstandards CSS Variables Ein Vorteil von Präprozessoren wie Sass ist die Tatsache, dass Sie dadurch Variablen benutzen können. Mittlerweile unterstützen alle modernen Browser auch CSS Variables.
In Sass ist es recht einfach, Variablen einzusetzen. Sie können zum Beispiel schreiben: Sass wird zu CSS kompiliert und an den entsprechenden Stellen steht dann statt der Variablen jeweils die gewünschte Farbe. Ändert sich die Highlight-Farbe müssen Sie auf diese Weise nur eine einzelne Zeile ändern. In modernen Browsern klappt das auch direkt, ohne Präprozessoren. Mit CSS Variables erreichen Sie den gleichen Effekt über: Das klappt zwar auch im Browser Edge ab Version 16, allerdings nicht in einem der alten Internet Explorer oder im Opera Mini. Wenn Sie diese Technik dennoch in Ihren Projekten einsetzen möchten, finden Sie unter github.com/aaronbarker/css-variables-polyfill ein Polyfill, der das gewünschte Verhalten in älteren Browsern über JavaScript nachbildet.
5. PHP Metadaten von YouTube-Videos Wenn Sie auf Ihrer Website Metadaten von YouTubeVideos benötigen, können Sie sich die benötigten Daten über entsprechende Schnittstellen besorgen.
Wollen Sie auf einer Website Videos zeigen, werden diese oft zunächst auf YouTube hochgeladen und dann auf der Website eingebettet. Manchmal benötigen Sie im Content-Management-System noch andere Daten, die zum Video gehören, etwa den Titel oder die Dauer – ohne gleich schon das Video zu zeigen. Nun könnten Sie diese Daten direkt über das CMS eingeben. Einfacher wird es, wenn ein Redakteur nur die URL zum YouTube-Video einträgt, und Sie alle benötigten Daten direkt von YouTube abfragen. Ein paar grundlegende Informationen können Sie mit ein paar Zeilen PHP über eine offene oEmbedSchnittstelle abrufen. Das Ergebnis erhalten Sie im JSON-Format, etwa:
können Sie über die YouTube Data API v3 abrufen. Sie brauchen ein Google-Konto, können dann über console.developers.google.com ein Developer-Projekt anlegen, um einen API-Key für den Zugriff auf YouTube zu generieren. Dann reichen wieder ein paar Zeilen: Darüber erhalten Sie deutlich mehr Informationen, unter anderem die Länge des Videos, das Datum der Veröffentlichung, die Tags, Links auf verschiedene Größen der Thumbnail-Bilder und Statistiken wie die Anzahl der Views, Likes, Dislikes, Kommentare. Entsprechend mit dem CMS verknüpft, reicht es nun, wenn ein Redakteur für ein Video nur die ID einträgt, und ein Skript beim Speichern alle benötigten Daten über die Schnittstelle abfragt und direkt mit im CMS abspeichert. Für den Fall, dass Sie generell alle Videos eines bestimmten Kanals auf Ihrer Website anzeigen möchten, können Sie auch alles automatisieren und die API nutzen, um zunächst den Channel und dann die einzelnen Videos abzufragen. Nicolai Schwarz