Joomla + OpenGraph + Twitter + Facebook +
Heute spendiere ich euch mal einen kleinen Inside-View, es geht um die neuesten Integrationen auf meinem Joomla-Projekt hirnschwund.net :)
Neulich habe ich mir gedacht, dass es wertvoll wäre, wenn meine User die Newsartikel und Videos auf ihrer Lieblingscommunity posten können – und zwar so, dass sie dort in ihrer Wall, dem Buschfunk etc. auch mit Bild und Beschreibung angezeigt werden. Auch Twitter ist ein sehr populärer Dienst, den ich auch integriert wissen wollte.
Für die Verbreitung von Meta-Informationen wie Bildern, Stichwörtern und kurzen Beschreibungstexten verwenden Facebook und die verschiedenen VZ-Netzwerke ein eigenes System: OpenGraph.
OpenGraph ist nichts weiter als eine andere Art, um Metatags in die eigene Webseite einzubinden. Dieses System ist in einem gewissen Sinne auch völlig hirnlos. So gibt esbereits seit Urzeiten, dafür jetzt einen neuen Tag einzuführen, der genau das Gleiche macht, aber og:description heißt, will mir einfach nicht einleuchten.
Allerdings hat das Ganze auch seine guten Seiten, so kann man mithilfe von og:image eine oder mehrere Bild-Links angeben, die dann auf Facebook oder VZ angezeigt werden. Wobei VZ da mal wieder mächtig Scheiße baut und das System nur billig von Facebook kopiert hat. Aber dazu später mehr, nun zu einer kleinen Anleitung für OpenGraph und Like-Buttons mit Joomla:
Zuerst wollte ich unter meinen Artikeln natürlich die entsprechenden Buttons haben. Twitter, Facebook-Share und VZ-Share. Dort stieß ich schonmal auf das erste Problem: Niemand weiß, dass VZ einen Like-Button hat ;D So schnappte ich mir das Joomla-Plugin ITP-Share, welches schonmal Twitter und Facebook integriert. Den VZ-Button bastelte ich frech in den Code des Plugins mit ein, direkt unter dem Code für Facebook-Share:
itpshare.php, Zeile 178:
Danach editierte ich noch die style.css von ITP-Share, wer das nachmacht, wird sehen, dass das selbsterklärend ist. ;) Das Ergebnis konnte sich schonmal durchaus sehen lassen:
Nun traten die nächsten Probleme auf: Ich hatte für alle Artikel keine Metatags eingegeben, was dazu führte, dass keine Beschreibung auf Facebook und VZ angezeigt wurde. Auch das Bild wurde in den meisten Fällen nicht erkannt, da der Metatag og:image fehlte.
Also ging es weiter: Als Nächstes fügte ich in die index.php meines Templates folgende statischen Informationen ein (vor )
Damit lege ich fest, dass hirnschwund.net eine Webseite ist und kein Blog, dass die URL kein www hat, gebe meine User-ID von Facebook an (wichtig für die Fanseite) und lege ein erstes allgemeingültiges Logo mit og:image fest. Dieses wird nun immer angezeigt, wenn jemand einen Link von hirnschwund.net bei Facebook eingibt. Oder bei VZ.
Allerdings war das noch nicht perfekt – ich brauchte nun noch Metatags, und zwar die normalen und die OpenGraph-Metatags. Kurzer Check auf extensions.joomla.org – nichts zum Thema OpenGraph.
Also selber ran: Mein nächster Streich bestand darin, das Plugin MetaGenerator für Joomla herunterzuladen. Dieses erzeugt für Artikel automatisch Metatags, allerdings keine im OpenGraph-Format. Facebook war nun zufrieden, denn Facebook ist wirklich sehr gut durchdacht: Falls es keine OpenGraph-Tags findet, nimmt es die normalen Description und Title-Metatags und zeigt diese an. VZ allerdings nicht, dieses ignoriert diese seit Jahren standardisierten Tags und nimmt nur die neuen OpenGraph-Tags an. Super gemacht, ihr Deppen! Ich habe ja sonst nichts zu tun als ein und denselben Content mehrmals in verschiedenen Standards zu posten. :/
Also wieder editieren, diesmal das Plugin MetaGenerator.
metagenerator.php, Zeile 158-159:
$document->setDescription($metadesc);
$document->addCustomTag(“);
Nun zeigte sich auch VZ zufrieden und stellte im Buschfunk brav meine Artikel mit Beschreibung dar. Was zu guter Letzt noch fehlte, war der og:image-Tag für jeden einzelnen Artikel. Ohne diesen wird nur das Bild angezeigt, welches ich über og:image in der index.php meines Templates dargestellt habe, also das statische Logo.
Dazu habe ich ein kleines Joomla-Plugin umgeschrieben. Dieses sucht automatisch das erste Bild in einem Artikel und schreibt dessen Link als og:image-Tag in den Header der Seite:
Update! Version 1.1 behebt ein Problem mit relativen Pfaden:
Da ich og:image aber schonmal definiert habe, und zwar in der index.php meines Templates, ist der Hinweis, die statischen OpenGraph-Informationen vor zu schreiben, sehr wichtig. Ansonsten nimmt VZ das letzte Bild, welches dort definiert ist und dieses wäre dann mein Standardlogo und nicht das Bild in meinem Artikel. Facebook zeigt sich auch hier wieder vorbildlich und zeigt mir beide og:image-Bilder in einer schicken Auswahlbox an, sodass ich selber wählen kann, welches ich meinen Freunden präsentieren möchte.
Das wars:
So funktioniert eine grundlegende OpenGraph-Integration mit Joomla-Artikeln. Andere Komponenten, die ebenfalls Metatags erzeugen, umzurüsten, ist relativ einfach. Dort funktioniert dies nach demselben Prinzip.
[…] more from the original source: Joomla + OpenGraph + Twitter + Facebook + VZ » Schmatzler's Blog Medien zum Thema Medien by […]
Welches ist das Plugin rechts ? Das brauche ich auch!
Welches, das Kommentarmodul hier auf dem Blog?
Ist es nicht ungünstig die eigene user-id zu veröffentlichen?
Nicht wirklich, diese steht ohnehin in den Metatags der Webseite und kann dort von jedem gelesen werden.
Mit der User-ID kann man auch nicht viel machen, sie linkt nur auf mein Profil, wenn jemand einen Link postet oder eine Fanseite zu der Webseite erstellt.
Hallo,
Danke für das Plugin! Habe es gerade auf meiner Seite im Test. War auch zu blöd, dass Facebook vorher immer (zufälligerweise) das Bild aus dem Bannerbereich genommen hat.
Hallo Christian,
ich habe das Plugin gerade eben aktualisiert. So wandelt es auch Bilderpfade wie „../images/bild.jpg“ in die vollständige Adresse um. 😉
Super 🙂
Den Fall hatte ich gestern nämlich und übergangsweise die URL einfach per Hardcode in das Plugin verfrachtet.
Vielen Dank für den hilfreichen Beitrag.
Wurde bei FB etwas geändert?
Bei einen „Gefällt mir“ erscheint auf der FB Seite nur noch das im Template hinterlegte og:image, was eigentlich nur genommen werden soll, wenn kein Image im Beitrag enthalten ist. (Galeriebilder ausgenommen)
Stimmt, jetzt wo du’s sagst – Facebook scheint sich ähnlich wie VZ zu verhalten und nur noch ein og:image zu schlucken. Mal sehen, ob ich das Plugin irgendwie umschreiben kann, so dass es das erste Bild entfernt.
Edit: Mmh, das passiert komischerweise nur bei ein paar Artikeln bei mir – da kommt auch der schicke „Ladebalken“ von FB nicht und er nimmt einfach nur das Seitenlogo. Bei allen anderen funktioniert es noch wie gehabt. Da bin ich überfragt, das scheint ein Problem auf Facebook zu sein.
Könnte natürlich auch sein, dass diese Seiten noch im Facebook-Cache sind – und wenn die Artikel damals noch kein og:image hatten, zieht sich Facebook das nicht nochmal neu.
Hallo Ronny,
ich habe dein Plugin installiert und auch aktiviert. ITP-Share nimmt jedoch immer noch das Bild aus dem Besucherzähler wie schon vor der Plugin-Installation. Ich habe mir auch den Seitenquelltext anzeigen lassen, dort tauchen aber die Open Graph Tags auch nicht auf.
Was habe ich falsch gemacht?
Hier noch die Seite: http://www.demitz-rockt.es
Viele Grüße
Robin
Hallo Robin,
benutzt du Joomla 1.5 oder Joomla 1.6? Ich habe das Plugin nur mit Joomla 1.5 getestet, da ich 1.6 selbst noch nicht verwende.
Hast du auch die Reihenfolge beachtet, sodass es möglichst vor allen anderen Plugins geladen wird?
Hallo!
Ich habe das Plugin in Betrieb welches an sich tip top funktioniert…
Leider scheint es ein Problem mit der Blog Darstellung zu geben. Mit eingeschaltetem Plugin (Version 1.1) erhalte ich auf der URL
http://www.lehrmittelperlen.net/perlen/blog.html?start=30
diese Ansicht:
http://awesomescreenshot.com/0e9gwi65d
Die Bilder fliegen mir wörtlich um die ohren 🙁
Wenn nötig gebe ich gerne einen Zugang zum gespiegelten Testserver weiter.
Besten Dank für einen kurzen Feedback!
Gruss
Hallo X-Bit,
Sieht aus als hättest du das Problem gelöst. Wäre nett, wenn du uns noch sagst, wie es zu dem Fehler gekommen ist 🙂
Bei mir existiert das von X-Bit angesprochene Problem nach wie vor, allerdings nur auf einer Seite. Dort werden auch die Bilder des Contents nochmal über allem dargestellt. Komisch…
Wäre auch um Rat dankbar.
Gruß,
Flo.
Genau das was du hier beschreibst würd ich mir auch für meine Site wünschen!! Wenn ich jedoch alle angeschprochenen Modifikationen in den PHP’s mache gibt der mir nur Syntaxfehler aus… 🙁
Beachte, dass WordPress die Anführungszeichen durch diese stilistischen Teile ersetzt hat. Das habe ich letztens bei Copy&Paste auch feststellen müssen.
Also einfach alle Anführungszeichen durch richtige austauschen und es sollte klappen. Tuts bei mir ja auch 😉
Thx
Bin auch schon weiter gekommen jedoch hab ich immernoch einige Probleme:
1. Egal was ich in die Style.css eintrage die Positionen bleiben ohne sich einen px zu verschieben
2. FB und SVZ nehmen immernoch das falsche Bild für den Artikel (liegt aber sicherlich an der Struktur meiner Site…)
3. SVZ erscheint ohne Textintro
4. FB schreibt nur die Beschreibung meiner Site und bezieht sich erst garnicht auf irgendeinen Artikel…
Ich habe nur sehr wenig Erfahrung im coden deshalb las bitte etwas Nachsicht walten ^^
Wird das Plugin noch gepflegt? Ich habe es auf Joomla 2.51 installiert. Die Installation klappte und aktiviert ist es auch aber passieren tut dadurch nichts?
Ich hätte erwartet das ich ich Quelltext eine Änderung sehe?
Grüße
Hallo,
ich nutze noch Joomla 1.7 – da funktioniert es perfekt. Kann natürlich sein, dass das auf 2.5 nicht mehr der Fall ist. Wenn ich irgendwann wechsle, kümmere ich mich darum 😉
Hi ich habe eine seite auf joomla 1.5 und kann sie nicht updaten. Da es nicht immer neuer erweiterungren gibt die ich brauche –
jetzt meine frage funtioniert der plugin auch auf joomla 1.5?