Der Like-Button ist wohl momentan das omnipräsenteste Symbol im Web. Jeder Artikel, jedes Video und jedes Bild ist mit dem blauen Facebook-Daumen versehen und macht es den Benutzern möglich ihre Meinung mit einem einfach Klick kundzutun.
Für einen frischen Webmaster-Neuling (für den ich mich immer noch halte) ist der Button natürlich ebenfalls eine Interessante Option, kann man doch prima nachvollziehen was den Besuchern der Website besonders gefällt und was eher nicht. Als erstes begnügt man sich mit einem der gefühlten 4563243 FB-Button-Plugins die auch nicht mehr machen, als den Button irgendwo hinzuklatschen und einem das Rumgesuche im eigenen Code zu ersparen. Der Nachteil dieser Anwendungen ist allerdings, dass man als Webmaster, ohne jetzt seine Nase auch noch in den Code des Plugins zu stecken, meist recht wenig Einfluss auf Design oder Ort des Buttons hat und sehr an die Vorgaben des Entwicklers gebunden ist. Mit der Zeit findet man sich also damit ab, sich mit den Tiefen von HTML und PHP herumschlagen zu müssen und sich eine neue Lösung für die wachsenden eigenen Anforderungen einfallen zu lassen.
Diese Punkt war bei mir vor ungefähr 3 Monaten erreicht. Seitdem ging es von Individualisierungsversuchen von Plugins über gesamtheitlichen Hass gegenüber dem Internet, bis hin zum Auseinandersetzen mit dem hauseigenen Developer Bereich von Facebook. Bei letzterem bin ich dann auch hängen geblieben. Da ich mir, HTML und PHP unerfahren wie ich bin, bei der Konfiguration und den daraus folgenden Problemen einen Wolf gegoogelt habe, wollte ich hiermit mal eine kleine Hilfestellung für diejenigen bieten, die auch keine bzw. wenig Web-Programmierkenntnisse haben, deswegen aber nicht auf die Unterstützung des sozialen Netzwerkes verzichten wollen.
Der Like-Button
Erstellen
Die Erstellung ist denkbar einfach. Wie durch schnelles Googlen herauszufinden ist, bietet Facebook selbst eine Developer Platform (durchstöbern lohnt sich!) an, auf der man sich mit seinen Daten den Code für den Like-Button automatisch erstellen lassen kann. Letztendlich sieht der Code in etwa entweder so aus, für iframe:
oder so, für XFBML:
Der genau Code ist natürlich davon abhängig, welches Layout und welche Größe etc. ihr in der Maske eingegeben habt.
Allerdings hat dieser Code noch ein kleines Problem. Er ist statisch, was bedeutet, dass der „Like“ der eingebunden und nur der eingebunden URL zugewiesen wird. Da man allerdings in einem Blogsystem keinen neuen Like-Button für jeden einzelnen Post erstellen kann muss eine andere, dynamische Lösung her.
Dazu benutzt man die Funktion
<?= $_SERVER[‚SERVER_NAME‘].$_SERVER[‚REQUEST_URI‘] ?>
und setzt diese in den Like-Button Code an der Stelle „HIER_KOMMT_DEINE_URL_HIN“ ein. Der dynamische Code sieht dann also so aus:
Notiz am Rande: ich habe hier im Blog bemerkt, dass die XFBML Version des Codes sich die URL der Seite selbstständig heraussucht, und damit dynamisch wird, wenn man einfach gar keine URL einbindet. Das sieht dann also so aus:
Klingt komisch, bei mir funktioniert es aber ;).
Einbinden
Das Einbinden des Codes ist keine Hexerei. Man sucht sich erst einmal das Template, welches für Darstellung einzelner Posts verantwortlich ist (meistens „single.php“). Im Code des Templates sucht man sich jetzt den Aufruf des Posts. Dieser sieht meistens so, oder so ähnlich aus:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Hier würde ich jetzt (sehr unprofessionell) zu ein wenig „Trial and Error“ raten. Einfach mal den Like-Button Code an verschiedenen stellen einsetzen (darauf achten, dass der sonstige Code unberührt bleibt) und schauen wo der Button angezeigt wird.
Facebook Open-Graph Tags
Und jetzt wird es ein wenig knifflig. Damit die Facebook-Buttons auch das tun was sie tun sollen, bzw. der volle Funktionsumfang der Buttons genutzt werden kann, sollte man sich doch einmal mit den Open-Graph Meta Tags von Facebook auseinandersetzen. Dabei handelt es sich um Meta Tags auf die Facebook bei der Darstellung zurückgreift, wenn Like- oder Share-Funktionen genutzt werden. Eingebunden werden diese in den „Kopf“ der Website (meistens header.php) einfach irgendwo zwischen <head> und </head>.
Unterschieden werden neun unterschiedliche Tags.
- og:title – Der Titel des Objekts wie er im Social Graph dargestellt werden soll, z.B. “The Rock”.
- og:type – Der Typ des Objekts, z.B. “movie”. Die komplette Liste der unterstützen Typen.
- og:image – Ein Image-URL, der im Zusammenhang mit dem Objekt im Graph dargestellt werden soll. Das Bild muss im Minimum 50×50px und ein Maximum Verhältnis von 3:1 aufweisen.
- og:url – Der Canonical-URL als permanente ID für das Objekt im Social Graph, z.B. http://www.imdb.com/title/tt0117500/.
- og:site_name – Ein durch Menschen lesbarer Name der Seite, z.B. “IMDb”
Zusätzlich zu diesen Basis-Angaben muss ein zusätzlicher Wert hinzugefügt werden, dass die Seite verbunden werden kann mit:
- fb:admins, fb:app_id, fb:page_id – eine kommagetrennte Liste der Facebook-Benutzer-ID’s oder der Facebook Plattform-Applikations ID welche die Seite administrieren.
Empfohlen wird auch, dass ein zusätzliche Wert für die Beschreibung oder diese zusätzlichen Werte hinzugefügt werden:
- og:description – eine Beschreibung der Seite in einem Satz oder zwei Sätzen.
Ich könnte jetzt noch weiter Inhalte von
Thomas Hutter klauen, aber erstens wäre das unfair und zweitens ist der Artikel so gut und verständlich geschrieben, dass ihr euch den wohl auch selber durchlesen könnt. Mir hat es sehr geholfen! Zu den OG-Tags gibt es allerdings auch noch eine
offizielle Facebook Seite.
Was mir allerdings fast noch mehr geholfen hat war
dieser Artikel von Peter Pfeufer. Hier findet der Suchende eine grandiose Funktion für dynamische OG-Tags welche einfach per Copy&Paste übernommen werden kann (lediglich das Image sollte man anpassen ;) ).
Das einzige was dann noch fehlt sind die Tags fb:admins, fb:app_id, fb:page_id welche für die Identifikation mit Facebook gebraucht werden. Ich habe diese abseits der Funktion von Peter Pfeufer in der header-php angegeben, allerdings dürfte es auch kein Problem sein diese einfach in der Funktion zu editieren.
In den meisten Beschreibungen steht, dass man für den „fb:admins“ Tag die ID der Administratoren braucht. Die eigene Facebook ID findet man z.B., wenn man eigene Fotos anguckt. Dort steht dann die eigene ID oben in der Adressleiste des Browsers hinter der ID des Fotos in der Form „http://www.facebook.com/photo.php?fbid=XXXXXXXXXXXXX&set=t.YYYYYYYYYY&type=1&theater“ wobei X =FotoID und Y = eigene ID ist. Bei mir funktioniert es allerdings auch wenn ich einfach mein Facebook Profil angebe. Wenn ich die URL meines Blogs dann durch den Facebook-Linter schickt, kriege ich zwar eine Information, dass ich nicht meine exakte ID eingetragen habe, aber es funktioniert, und das ist die Hauptsache ;).
Der Facebook-Linter wird auch zum größten Freund des Webmasters, wenn er sich mit Buttons und Tags auseinandersetzt. Wenn man die URL der Website in den Linter eingibt, bekommt man ein ausführliches Feedback über den Status der momentan im Facebook Cache liegenden Page. Nach Änderungen sollte man allerdings erst ein wenig warten, denn der Facebook-Cache erneuert sich nicht permanent ;). Ich hoffe ich konnte ein wenig helfen.
In diesem Sinne …
.. just my 2 cents ..
Die Facebook Buttons – Segen und Geißel [Teil 1 – der Like-Button]
Für einen frischen Webmaster-Neuling (für den ich mich immer noch halte) ist der Button natürlich ebenfalls eine Interessante Option, kann man doch prima nachvollziehen was den Besuchern der Website besonders gefällt und was eher nicht. Als erstes begnügt man sich mit einem der gefühlten 4563243 FB-Button-Plugins die auch nicht mehr machen, als den Button irgendwo hinzuklatschen und einem das Rumgesuche im eigenen Code zu ersparen. Der Nachteil dieser Anwendungen ist allerdings, dass man als Webmaster, ohne jetzt seine Nase auch noch in den Code des Plugins zu stecken, meist recht wenig Einfluss auf Design oder Ort des Buttons hat und sehr an die Vorgaben des Entwicklers gebunden ist. Mit der Zeit findet man sich also damit ab, sich mit den Tiefen von HTML und PHP herumschlagen zu müssen und sich eine neue Lösung für die wachsenden eigenen Anforderungen einfallen zu lassen.
Diese Punkt war bei mir vor ungefähr 3 Monaten erreicht. Seitdem ging es von Individualisierungsversuchen von Plugins über gesamtheitlichen Hass gegenüber dem Internet, bis hin zum Auseinandersetzen mit dem hauseigenen Developer Bereich von Facebook. Bei letzterem bin ich dann auch hängen geblieben. Da ich mir, HTML und PHP unerfahren wie ich bin, bei der Konfiguration und den daraus folgenden Problemen einen Wolf gegoogelt habe, wollte ich hiermit mal eine kleine Hilfestellung für diejenigen bieten, die auch keine bzw. wenig Web-Programmierkenntnisse haben, deswegen aber nicht auf die Unterstützung des sozialen Netzwerkes verzichten wollen.
Der Like-Button
Erstellen
Die Erstellung ist denkbar einfach. Wie durch schnelles Googlen herauszufinden ist, bietet Facebook selbst eine Developer Platform (durchstöbern lohnt sich!) an, auf der man sich mit seinen Daten den Code für den Like-Button automatisch erstellen lassen kann. Letztendlich sieht der Code in etwa entweder so aus, für iframe:
oder so, für XFBML:
Der genau Code ist natürlich davon abhängig, welches Layout und welche Größe etc. ihr in der Maske eingegeben habt.
Allerdings hat dieser Code noch ein kleines Problem. Er ist statisch, was bedeutet, dass der „Like“ der eingebunden und nur der eingebunden URL zugewiesen wird. Da man allerdings in einem Blogsystem keinen neuen Like-Button für jeden einzelnen Post erstellen kann muss eine andere, dynamische Lösung her.
Dazu benutzt man die Funktion
<?= $_SERVER[‚SERVER_NAME‘].$_SERVER[‚REQUEST_URI‘] ?>
und setzt diese in den Like-Button Code an der Stelle „HIER_KOMMT_DEINE_URL_HIN“ ein. Der dynamische Code sieht dann also so aus:
Notiz am Rande: ich habe hier im Blog bemerkt, dass die XFBML Version des Codes sich die URL der Seite selbstständig heraussucht, und damit dynamisch wird, wenn man einfach gar keine URL einbindet. Das sieht dann also so aus:
Klingt komisch, bei mir funktioniert es aber ;).
Einbinden
Das Einbinden des Codes ist keine Hexerei. Man sucht sich erst einmal das Template, welches für Darstellung einzelner Posts verantwortlich ist (meistens „single.php“). Im Code des Templates sucht man sich jetzt den Aufruf des Posts. Dieser sieht meistens so, oder so ähnlich aus:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Hier würde ich jetzt (sehr unprofessionell) zu ein wenig „Trial and Error“ raten. Einfach mal den Like-Button Code an verschiedenen stellen einsetzen (darauf achten, dass der sonstige Code unberührt bleibt) und schauen wo der Button angezeigt wird.
Facebook Open-Graph Tags
Und jetzt wird es ein wenig knifflig. Damit die Facebook-Buttons auch das tun was sie tun sollen, bzw. der volle Funktionsumfang der Buttons genutzt werden kann, sollte man sich doch einmal mit den Open-Graph Meta Tags von Facebook auseinandersetzen. Dabei handelt es sich um Meta Tags auf die Facebook bei der Darstellung zurückgreift, wenn Like- oder Share-Funktionen genutzt werden. Eingebunden werden diese in den „Kopf“ der Website (meistens header.php) einfach irgendwo zwischen <head> und </head>.
Unterschieden werden neun unterschiedliche Tags.
Zusätzlich zu diesen Basis-Angaben muss ein zusätzlicher Wert hinzugefügt werden, dass die Seite verbunden werden kann mit:
Empfohlen wird auch, dass ein zusätzliche Wert für die Beschreibung oder diese zusätzlichen Werte hinzugefügt werden:
Das einzige was dann noch fehlt sind die Tags fb:admins, fb:app_id, fb:page_id welche für die Identifikation mit Facebook gebraucht werden. Ich habe diese abseits der Funktion von Peter Pfeufer in der header-php angegeben, allerdings dürfte es auch kein Problem sein diese einfach in der Funktion zu editieren.
In den meisten Beschreibungen steht, dass man für den „fb:admins“ Tag die ID der Administratoren braucht. Die eigene Facebook ID findet man z.B., wenn man eigene Fotos anguckt. Dort steht dann die eigene ID oben in der Adressleiste des Browsers hinter der ID des Fotos in der Form „http://www.facebook.com/photo.php?fbid=XXXXXXXXXXXXX&set=t.YYYYYYYYYY&type=1&theater“ wobei X =FotoID und Y = eigene ID ist. Bei mir funktioniert es allerdings auch wenn ich einfach mein Facebook Profil angebe. Wenn ich die URL meines Blogs dann durch den Facebook-Linter schickt, kriege ich zwar eine Information, dass ich nicht meine exakte ID eingetragen habe, aber es funktioniert, und das ist die Hauptsache ;).
Der Facebook-Linter wird auch zum größten Freund des Webmasters, wenn er sich mit Buttons und Tags auseinandersetzt. Wenn man die URL der Website in den Linter eingibt, bekommt man ein ausführliches Feedback über den Status der momentan im Facebook Cache liegenden Page. Nach Änderungen sollte man allerdings erst ein wenig warten, denn der Facebook-Cache erneuert sich nicht permanent ;). Ich hoffe ich konnte ein wenig helfen.
In diesem Sinne …
.. just my 2 cents ..