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:

plg_fblinkcontentimage_1.0

Update! Version 1.1 behebt ein Problem mit relativen Pfaden:

plg_fblinkcontentimage_1.1

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.

Comments (21)

  5. 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.

    Antworten

  8. 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)

    Antworten

    1. 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.

      Antworten

  9. 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

    Antworten

    1. 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?

      Antworten

  10. 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

    Antworten

  11. 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.

    Antworten

  12. 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… 🙁

    Antworten

    1. 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 😉

      Antworten

  13. 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 ^^

    Antworten

  14. 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

    Antworten

  15. 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?

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

An den Anfang scrollen