Der Facebook “Gefällt mir” (like) Button

Der „Gefällt mir“ Button dürfte heute nicht nur Facebook Usern ein Begriff sein, sondern auch manch anderem Internetnutzer. Im April 2010 hat Facebook das sogenannte Open Graph-Protokoll vorgestellt, womit wir zu den kleinen „Gefällt mir“ (like) Buttons von Facebook kommen, die in immer mehr Webseiten eingebunden werden. Den kleinen „Gefällt mir“ Button kann man mittels einem einfachen Code auf jeder Unterseite einer Webseite einbinden.

Mit einem einfachen Klick vermittelt der User seinen Facebook-Freunden, dass ihm Produkt X oder Inhalt Y gefällt, indem auf seinem Pinnwand ein Hinweis erscheint wie z.B.:

Interessierte oder neugierige Freunde folgen anschließend dem Link zur Seite, schauen sich Produkt X oder Inhalt Y an und klicken bestelfalls ebenfalls auf den „Gefällt mir“ Button. Das Spiel geht nun mit deren Freunden von vorne los.

Des Weiteren erscheint nach dem Klick auf den „Gefällt mir“ Button bei dem Produkt X oder Inhalt Y die Anzahl der „Gefällt mir“ Klicks. Wie z.B.:

Die Anzahl der Klicks ist auch in Zukunft sichtbar und gilt nicht nur für den Moment des Klicks. Auch wenn der User in seinem Facebook Account das entsprechend geklickte „Gefällt mir“ wieder entfernt.

Wozu die Mühe und der Aufwand? Welche Vorteile bieten sich dadurch an?

Facebook ist mit Millionen von Usern die größte Community im Internet, die auch weiterhin kontinuierlich wachsen wird. Mit einem „Gefällt mir“ Button kann Produkt X oder Inhalt Y an sehr viele Menschen im Internet vermittelt werden und das ganze KOSTENLOS!

Zudem kann eine hohe „Gefällt mir“ Klickanzahl unter dem entsprechenden Produkt, den einen oder anderen Käufer positiv beeinflussen.

Ein weiterer Aspekt ist der Effekt für die Facebook Suche. Je nach Gesamtbewertung von Facebook ist es möglich, bei der Facebook Suche mit dem unbekannten Suchbegriff „Produkt X“ oder „Inhalt Y“ gefunden zu werden.

Wie binde ich ein „Gefällt mir“ Button ein?

Mit dem folgenden Link könnt ihr den „Gefällt mir“ Button Code generieren:

http://developers.facebook.com/docs/reference/plugins/like

Dort trägt man unter „URL to Like“ die URL der entsprechenden Seite ein in dem man den „Gefällt mir“ Button einbinden möchte. Als Layout Style empfehle ich immer den „button_count“, sieht meiner Meinung nach optisch am besten aus.

Nach dem Klick auf den „Get Code“ Button werden zwei unterschiedliche Versionen von Codes angeboten. Einmal im iframe (oben) und mal in JavaScript (unten).  Die Unterschiede sind wie folgt:

Die iFrame Version ist die einfache Variante – die JavaScript Version ist mehr die umfangreiche Variante. Mit der JavaScript Version (unten) kann man die Klicks auf den Button in Realtime verfolgen. Darüber hinaus haben User die Möglichkeit Kommentare zu dem entsprechenden „Like“ zu schreiben.  Ich persönlich würde die JavaScript Version empfehlen.  Die Sprache der Buttons lässt sich einfach mit „en_US“ oder „de_DE“ umstellen.

Die Einpflege ist Kinderleicht, einfach den Code Schnipsel kopieren und an die entsprechende Stelle der Seite einfügen.

Nun kommen wir zu dem Open Graph-Protokoll, welches optional ist.  Es ist jedem selbst überlassen ob man das Open Graph Protokoll mit einbindet oder nicht. Ich persönlich kann es nur empfehlen. Vorteil ist dabei, dass das entsprechende Produkt, Inhalt oder Artikel automatisch samt Bild, Link und kleine Beschreibung in der entsprechende Kategorie in Facebook zu finden ist.

Hierzu werden die entsprechenden Metatags gesetzt wie z.B. Title, Beschreibung, Pfad des Bildes usw. Siehe Beispiel:

[html] <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“
xmlns:og=“http://opengraphprotocol.org/schema/“
xmlns:fb=“http://www.facebook.com/2008/fbml“>

<head>
<title>Online Marketing Blog</title>
<meta property=“og:title“ content=“Online Marketing Blog“/>
<meta property=“og:type“ content=“blog“/>
<meta property=“og:url“ content=“https://www.omsag.de/blog“/>
<meta property=“og:image“
content=“https://www.omsag.de/blog/wp-content/themes/oms/img/logo.png“/>
<meta property=“og:site_name“ content=“Online Marketing Blog“/>
<meta property=“fb:admins“ content=“USER_ID“/>
<meta property=“og:description“ content=“In diesem Blog schreiben Mitarbeiter der Online Marketing Solutions AG über firmenspezifische Themen, SEO, SEA und Online Marketing im Allgemeinen.“/>
[/html]

Die genaue Beschreibung dazu findet Ihr hier.