Facebook like-/gefällt mir-Button in eigene Website einbauen

facebook likeFacebook hat soeben ein neues Featurepaket vorgestellt, welches es ermöglicht eine Reihe von Facebook-Komponenten in der eigenen Website zu verwenden (Bericht auf t3n). Die spontan spannendste Funktion ist wohl der „Like-Button“, der nun von jedermann auf der eigenen Website platziert werden kann.

Und weil das gar so einfach geht, wollen wir es gleich einmal machen. Begeben Sie sich dazu auf die Facebook Developer Seite http://developers.facebook.com/docs/reference/plugins/like, geben Sie die gewünschten Parameter wie z.B. den URL Ihrer Website ein und lassen Sie sich Ihren Code generieren. Das Ganze sieht dann etwa so aus:

Diesen Code können Sie nun einfach an die gewünschte Stelle ihrer Internetpräsenz einfügen und schon haben Sie einen „Like-Button“. Wie Sie sehen wird der Facebook Code über einen iframe geladen. Wenn Sie wollen, können Sie noch etwas am style-Tag ändern oder das Ganze einfach in einen div-Container packen und es schön zu positionieren.

Natürlich lassen sich auch dynamische URLs einfügen. Dazu müssen Sie nur den Teil zwischen „…href=“ und „&layout=…“ durch Ihren PHP-Code ersetzen. Beim Blog-CMS WordPress beispielsweise können Sie den Code in die datei /templates/IHRTEMLATE/single.php nach dem Content-Tag [sourcecode language=’php‘] < ?php the_content(); ?> [/sourcecode] einfügen. Als URL nehmen Sie den Permalink auf Ihren Blogeintrag: [sourcecode language=’php‘] < ?php echo urlencode(get_permalink($post-&amp;amp;amp;amp;amp;amp;gt;ID)); ?> [/sourcecode].

Update 23.02.2011:

Es gibt nun einen neuen, einfacheren Code namens „XFBML“ der wie bei Twitter über ein externes JavaScript eingebunden wird:

Open Graph Tags

Einen Schritt weiter gehen die sogenannten „Open Graph Tags“. Dies sind einfache Metatags, welche man in den Head Bereich der eigenen Webseiten einfügen kann. Sie beschreiben die Art der Seite, also ob es sich z.B. um einen Blog oder um einen Firmenauftritt handelt. Des Weiteren kann man den Titel und ein repräsentatives Bild, bspw. ein Logo angeben, welches die Site repräsentiert. Den gesamten Code kann man sich ebenfalls unter http://developers.facebook.com/docs/reference/plugins/like/ generieren lassen. Er sieht folgendermaßen aus:

Der Wert des Attributs „property“ enthält jeweils das Prefix „og“ für Open Graph.
Facebook nutzt die Werte der Open Graph Tags wenn ein User die Seite auf Facebook teilt (share) um so Sachen wie den Titel, das Bild, den URL, etc. zu übergeben.

Facebook like-/gefällt mir-Button in eigene Website einbauen
5 (100%) 1 vote

11 thoughts on “Facebook like-/gefällt mir-Button in eigene Website einbauen

    1. Hallo Lukas,
      ich habe mir diesen Generator gerade mal angesehen. Im Prinzip macht der eigentlich das gleiche wie der Facebook-eigene Generator: https://developers.facebook.com/docs/reference/plugins/like/
      Der einzige Unterschied ist, dass in dem generierten Code auch noch ein Link zu diesem Generator versteckt ist, den es eigentlich nicht braucht. So macht der Herr geschickt Werbung für seine Website. Wenn du also den generierten Code auf deiner Website einsetzt, platzierst du gleichzeitig einen Link zu gefaelltmirbuttoneinbinden.com
      Außerdem gilt der damit generierte Code immer nur für genau eine URL (eine einzelne Seite).

  1. ich habe es genau gewusst, dass die Seite am 15. Mai 2011 den letzten Eintrag hat. Wenn ich mal etwas wissen, will, was nicht funktioniert, dann hat die letzte deutschschreibende Seite auch noch geschlossen und es wird nur noch in Wirtschaftenglisch beschrieben.

  2. Hallo,

    ich habe diesen XFBML-Code eingefügt und wieder entfernt nur leider wird dieser Like-Button immer noch auf meiner Seite angezeigt?

    Schreibt der noch irgendwo etwas in die Seite rein, was man entfernen muss?

    1. Für die meisten Content Management Systeme gibt es inzwischen Plugins, die das übernehmen. Ansonsten basieren die CMS ja in der Regel auf Templates/Themes. Um es manuell zu machen müsstest du dann in das Template deines CMS gehen und den Code dort für die jeweilige Seite einbinden. Falls du den iframe direkt mittels Texteditor in die Seite einfügen willst, musst du zumindest in die HTML-Ansicht wechseln um den Code dort einzufügen. Aber es kann sein dass dein CMS iframes aus Sicherheitsgründen wieder rausschmeist, da sie ja quasi fremden Inhalt anzeigen.

Schreibe einen Kommentar

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