Beim Teilen von Beiträgen in sozialen Netzwerken, werden in der Regel die entsprechenden Open Grahp Tags aus dem Quelltext ausgelesen, um eine kleine Vorschau zu erzeugen. Eine nützliche Sache, es sei denn, es handelt sich um einen Beitrag, der nur ein Video enthält. Hat man dann keinen Fallback festgelegt, so kann das entsprechende Netzwerk kein Bild auslesen und nimmt meist das erste Bild aus der entsprechenden Seite oder zeigt gar keins an. Diesen Umstand wollte ich beheben.
Wie bereits früher beschrieben füge ich meine Videos per Shortcode ein, da ich diese Lösung flexibler finde und sie sich leichter sowie rückwirkend optimal anpassen lässt. Nun ist es so, dass die YouTube-API es erlaubt, die Video-Thumbnails in verschiedenen Größen auszulesen. Dafür gibt es ganz simple URLs, die nur die Video-ID verlangen.
Nehmen wir zum Beispiel dieses Video:
- http://www.youtube.com/watch?v=Th2g4w46xA0
Um an die entsprechenden Thumbnails in Bildform zu kommen, benötigen wir folgende URLs. Klicken, um das Thumbnail zum obigen Video anzuzeigen.
- http://img.youtube.com/vi/VideoID/default.jpg
- http://img.youtube.com/vi/VideoID/hqdefault.jpg
- http://img.youtube.com/vi/VideoID/mqdefault.jpg
- http://img.youtube.com/vi/VideoID/maxresdefault.jpg
Ein entsprechendes Bild können wir nun beliebig im Beitrag nutzen, denn die ID des Videos brauchen wir ja sowieso. Ich habe zum Beispiel meinen Videoshortcode erweitert und lasse ein Thumbnail in einem „unsichtbaren“ DIV laden. Der Nutzer sieht so auf der Seite nur das Video, das Bild wird allerdings dennoch für den Open Graph ausgelesen und so passt auch die Vorschau in sozialen Netzwerken zum Inhalt. Schaut in meinem Fall in etwa so aus:
<span style="display:none;"><img alt="YT-IMG" src="http://img.youtube.com/vi/ID/mqdefault.jpg" /></span>Beispiel: Beitrag und Post bei Google+ mit passendem Thumbnail.
