Facebook-Like-Button in Website einbauen

Facebook verfolgt inzwischen neue Wege, um Besucher in ihr soziales Netzwerk zu locken. Nachdem der “Gefällt mir“-Button unter Bildern, PinnwandeinträgenGrafik mit dem von Facebook entwickelten "Gefällt mir"-Button und Anwendungen im internen Facebook-Benutzer-Bereich überaus populär wurde, begonn man für den Einbau des Like-Buttons in 3th Party Webseiten zu werben. Dies bringt insbesondere für Webmaster Vorteile.

  • Soziales Engagement
  • Verbreitung und Werbung der Website durch das Netzwerk
  • Statistiken durch “Gefällt mir”-Analysen


Ein Like-Button (bzw. “Gefällt mir”-Button) lässt sich einfach und schnell in eine Webseite einfügen. Man besuche die Entwickler-Seiten Facebooks und lasse sich von einem Generator den nötigen HTML-Code erstellen. » Like Button – Facebook-Entwickler «

Jedoch sind für den optimalen Einsatz weitere Code-Stücke einzusetzen, welche nicht generiert werden. Die wichtigsten Stelle ich vor.

Die erste Entscheidung, die zu treffen ist, ist…

FBML oder iFrame

Der Unterschied zwischen den beiden Einbindungsmöglichkeiten hält sich in Grenzen. In beiden Fällen wird eine JavaScript-Datei von Facebook eingebunden. Bei FBML (Facebook Markup Language) geschieht dies durch JavaScript selbst, bei der iFrame-Variante – wie der Name schon sagt – durch ein HTML-iFrame. FBML soll beim Laden der Daten eine bessere Performance hinlegen, weshalb ich diese Variante benutze.

JavaScript für FBML einbinden

Damit der Link/Button funktioniert, muss eine von Facebook gehostete JavaScript-Datei eingebunden werden. Dies geschieht mit dem HTML-script-Tag, welches in einem HTML-Dokument zwischen <head> und </head> eingefügt werden sollte.

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>

Diese JS-Datei wird einen englisch-sprachigen “Like”-Button erzeugen. Für einen in deutscher Sprache muss das Länderkürzel in der URL geändert werden:

<script src="http://connect.facebook.net/de_DE/all.js#xfbml=1" type="text/javascript"></script>

FBML-Code einfügen

Ein Facebook Like-Button wird durch ein fb:like-Element erzeugt.

<fb:like></fb:like>

Es besitzt acht Attribute, welche Aussehen, Aktionen und Links enthalten.

<fb:like href="http://blog.vitus-lehner.de/" width="500" layout="standard" colorscheme="light" action="like" font="verdana"></fb:like>

Attribute:

  • href: URL der zu gefallenen Webseite
  • width: Breite des Buttons in Pixel
  • layout: Layout der Buttons
    • standard: Button mit kurzem sozialen Text und Facebook-Profilfotos
    • button_count: Button mit Anzahl aller Klicks auf diesen
    • box_count: Button mit Anzahl aller Klickes auf diesen darüber
  • show_faces: Anzeige von Profilbildern (true/false)
  • action: Button-Text (recommend/like)
  • font: Schriftart des Textes (arial/lucida grande/segoe ui/tahoma/trebuchet ms/verdana)
  • colorscheme: Farbschema (light/dark)
  • weitere: FB-Developers

Dieser Code wird an einer beliebigen Stelle zwischen <body> und </body> im HTML-Dokument eingefügt.

Ziel konfigurieren

Alle Daten, welche durch das Tätigen des Facebook-Plugins generiert werden, werden an Facebook-Server gesendet, dort verarbeitet und gespeichert. Durch das sog. “Open Graph“-Protokoll von Facebook lassen sich die Inhalte einer Webseite beschreiben, sodass die Server diese besser verwalten können. Diese Konfiguration findet im HTML-Dokument der zu gefallenen Seite in Form von meta-Tags statt.

Die wichtigsten Tags sind…

<meta property="og:description" content="Beschreibung der Seite" />
<meta property="og:title" content="Titel der Seite" />
<meta property="og:site_name" content="Name der gesamten Internetpräsenz" />
<meta property="og:type" content="Typ des Inhalts" />
<meta property="og:url" content="URL zur zu gefallenen Seite"/>
<meta property="fb:admins" content="ID des Facebook-Accounts, dem die Seite gehört (Verwaltungszwecke)"/>
<meta property="og:image" content="URL zu einem Bild/Icon, welches die Seite gut beschreibt"/>

Alle verfügbaren Typen für Seiten (og:title) sind unter developers.facebook.com vorhanden: Open Graph Protocol – Facebook-Entwickler

Being social!

Das war es, der Facebook-”Gefällt mir”-Button ist nun einsatzbereit.

Dieser Artikel wurde vertaggt mit , , , , , , .
Kategorien: HTML, JavaScript, Mobilität, Tutorial, Webdesign

Hat Ihnen dieser Artikel gefallen? - Dann abonnieren Sie vlblog um über neue Themen rund ums Web informiert zu werden.

12 Kommentare zu “Facebook-Like-Button in Website einbauen”

  1. luke sagt:

    hi, echt nice, wie ihr das mit den einzelen typen von codes erläutert
    habe noch eine frage: http://www.gefaelltmirbuttoneinbinden.com – sagt dass ich das ganze in ein paar sekunden generieren kann.. ist das seriös? wäre natürlich nicht schlecht..
    danke für die antworten, luke

    • vitus37 sagt:

      Das Angebot kenne ich nicht. Rein äußerlich betrachtet empfinde ich den Funktionsumfang des offiziellen Facebook-Generators als ausgeprägter.

  2. Ingo sagt:

    Hallo, hoffe Sie können mir weiterhelfen. Habe auf meiner mobilen website (http://www.rachel-anna-urban.de) einen Gefällt mir Button eingefügt, der auch soweit funktioniert. Allerdings öffnet er auf dem mobilen Gerät (z.B. iPhone) ein neues Browserfenster und man muss sich einloggen….
    Frage: Wie kann man veranlassen, dass statt einem neuen Broswerfenster die auf dem mobilen Gerät installierte facebook-App geöffnet wird, statt eines Browserfensters? Sollte die App nicht installiert sein, dann soll natürlich weiterhin das Browserfenster geöffnet werden. Danke, habe bisher nirgends dazu was gefunden.

    • vitus37 sagt:

      Hallo Ingo,

      die Verarbeitung eines Likes liegt nur bei Facebook. Einfluss auf die Weiterleitungsprozedur kann man deshalb nicht nehmen. Das kann auch im Interesse von Handyherstellern sein, denn Websites sollten aus Sicherheitsgründen keinen Zugriff auf lokale native Programme haben.

      Da lässt sich leider nicht viel rütteln.

  3. ArminB sagt:

    Hallo,

    Auch wenn das jetzt nicht ganz zum Thema passt hätte ich eine Frage, undzwar habe ich auf meiner Homepage etwas eingebaut, worüber man auf Facebook Posts machen kann wo dann anstatt via Handy zB steht via Taschenrechner.. Aber ich habe das Problem, ich würde es gerne in ein Button oder in einen Text einbauen, dass wenn man draufklickt sich das Pop-Up fenster öffnet, und man nicht erst auf eine Weiße Seite weitergeleitet wird, wo dann Pop-Ups gesperrt sind.. kannst du da vielleicht helfen?

    LG
    ArminB.

  4. Silke sagt:

    Hallo
    ich habe dazu auch mal eine Frage. Den Like Button einfügen, fand ich jetzt nicht so schwer.

    Ich kämpfe mit meinen mangelhaften html wissen mit einem anderen Problem. Vielleicht könnt ihr mir helfen.

    Ich habe ein Programm, das mir den Code für ein Fotoalbum generiert. Diesem möchte ich den Like Button hinzufügen. Allerdings nicht nur für das Album an sich, sondern unter jedes Foto. Also ich will im Standard Code etwas mit einer VARIABLE stehen haben, dass der like Button sich automatisch auf das angezeigte Bild bezieht.
    Möchte allerdings nicht im fertigen Fotoalbum unter jedes Bild den Button einfügen.

    Kann mir jemand sagen was ich da für einen Code eingeben muss für die Variable?
    Danke
    LG
    Silke

    • vitus37 sagt:

      Hallo Silke,

      grundsätzlich dürfte es kein Problem sein, jedes Bild einer Galerie mit einem eigenen Like-Button auszustatten. Da ich leider nicht weiß, aus welcher Software deine Galerie stammt und wie sie funktioniert, ist es mir hier nicht möglich, konkrete Lösungsvorschläge anzubieten.

      Umsetzen ließe sich derartes mit Scriptsprachen wie JavaScript oder PHP. Dies ist aber, wie gesagt, abhängig von der in der Galerie verwendeten Technologie und Struktur.

      Gruß

  5. Markus sagt:

    Hallo,

    ich fand den Artikel echt interessant und dachte der würde mir bei meinem Problem mit der Like-Button helfen.

    Ich habe Ihre Anweisungen befolgt und der Like Button erscheint auch. Sobald man aber auf diesen drückt, geht kurz ein Fenster auf und die Anzahl springt wieder zurück auf 0.
    Ich bin schon am Verzweifeln.
    https://developers.facebook.com/tools/debug
    zeigt mir keine Fehler an.

    Haben Sie vielleicht eine Idee?

    Markus

    • Felix sagt:

      Hallo Markus,

      ich habe bei mir auf meiner Webseite die Schritte befolgt, die vitus37 hier vorschlägt und zumindest bei mir funktioniert das ganze.
      Eine Möglichkeit wäre, dass Sie den -Import für das JavaScript JDK von Facebook nicht importiert haben. Deshalb habe ich hier einen Beispiel-Code einer Webseite mit eingebautem Facebook-Button: fb_button_example.html @ pastebin.com

      Hoffe, ich konnte helfen,

      Felix

  6. Markus sagt:

    Hallo Felix,

    vielen Dank für Deine Hilfe! Jetzt funktioniert es.

    Markus

  7. Torten-Shop sagt:

    Werde da nun auch mal versuchen. Scheint ja gar nicht sooo schwer zu sein, wie befürchtet. Danke für die Anleitung! Gruß, Toni

  8. C. Virota sagt:

    Man kann es auch über https://developers.facebook.com/docs/reference/plugins/like/ erstellen. Du solltest vielleicht noch dazu schreiben, dass man für die von dir verwendete Variante der Einbindung (über FBML) die JavaScript SDK einbinden muss.

Hinterlasse eine Antwort