Website-Icon Webdesign-Podcast

Facebook “gefällt mir” / like und Open Graph

Der erste Artikel zum einbinden eines Facebook „gefällt mir“ bzw. like Buttons ist aktuell der meistgelesenste Artikel in diesem Blog. Da euch dieses Thema scheinbar interessiert, ist das für uns Grund genug euch weitere Informationen zur Materie zu geben.

Das Open Graph Protocol ist ein mächtiges Werkzeug um die Facebook Integration einer Webseite deutlich zu erhöhen und die Soziale Reichweite zu verbessern.

Fassen wir das ganze einmal auf das wesentliche zusammen und zwar: Wo liegt der Vorteil bei der Kombination von Open Graph und den Facebook „gefällt mir“ Button bzw. anderen Facebook Funktion wie z.B. dem Share Button? Die Antwort ist ganz einfach: Die Sichtbarkeit eurer Seite in Facebook wird drastisch erhöht.


Nehmen wir als Beispiel einmal an ein Besucher klickt auf einen „gefällt mir“ Button auf einer Seite die über Open Graph verfügt. So wird dieser „gefällt mir“ klick sowohl im Nutzer Profil als auch auf seiner Pinnwand dargestellt, dies erhöht natürlich enorm die Wahrscheinlichkeit, das Freunde des Nutzers diesen Eintrag sehen und ebenfalls auf den Link klicken.

Des Weiteren bewirkt Open Graph das für jede Seite die einen „gefällt mir“ klick erhält auf Facebook eine „mini Fanpage“ angelegt wird, diese enthält dann weitere Informationen zu der Seite, ein Bild und kann vorallem auch über die Facebook Suche gefunden werden.

Als Beispiel hier zwei Bilder einer Suche, die Anzeige auf der Pinnwand und im Profil:

Ihr seht also, dass durch Open Graph die Verzahnung mit Facebook erheblich verbessert wird und die Sichtbarkeit der Seite in Facebook selbst extrem erhöht wird, aber was ist nun eigentlich Open Graph genau und wie funktioniert es.

Ihr könnt euch Open Graph ungefähr so vorstellen, wie eine Erweiterung der Metatags, hier einmal ein einfaches Beispiel zu den Open Graph Angaben zu diesem Artikel:












infowebdesign-podcast.de"/>


Wie ihr seht ist der Aufbau sehr einfach und selbsterklärend: Das Attribut property enthält den Typen des Meta Objekts z.B. og:url. Das og: steht hierbei für OpeGraph Objekt und fb: für FaceBook Objekt, der eigentliche Type url gibt nun also die URL zu dieser Seite an.

Diese Open Graph Angaben liest Facebook aus und verwendet Sie dann für den weiteren Funktionsablauf. So werden diese Angaben z.B. bei folgenden Funktionen verwendet: „gefällt mir“, Teilen / Share und im Profil bei den Interessen.

Die OpenGraph Elemente sind selbsterklärend, auf ein paar möchte ich allerdings noch einmal genauer eingehen:

og:type Gibt den Typen der Webseite an bzw. des Inhalts an. Eine genaue Liste findet ihr hier

og:image Definiert die URL zu einem Bild das zu euren Seiten angezeigt wird, dass Bild sollte mindestens 50×50 Pixel groß sein.

fb:admins Gibt eine nummerische ID eures Facebook Accounts an, damit ihr die Seiten später verwalten könnt.

Eine komplette Liste mit allen Open Graph Meta Angaben findet ihr auf der Facebook Developer Seite: http://developers.facebook.com/docs/opengraph

HTML Tag erweitern:
Damit Open Graph richtig funktioniert müsst ihr den HTML Tag mit folgenden Werten erweitern: xmlns:og=“http://opengraphprotocol.org/schema/“ xmlns:fb=“http://www.facebook.com/2008/fbml“


Nachteile und Bedenken zu Open Graph
Da durch Open Graph automatisch Meldungen in den Facebook Profilen der Nutzer gepostet werden, ist nicht genau geklärt wie hier datenschutzrechtlich zu verfahren ist und vor allem inwiefern in den Datenschutzbedingungen einer Webseite auf diese Funktionalität hingewiesen werden muss.

Wer Open Graph live testen möchte, der kann einfach den „gefällt mir“ oder Teilen Button zu diesem Artikel anklicken und sich das ganze ansehen. Viel Spaß beim ausprobieren.

Sollten noch Fragen offen sein, so können diese gerne in den Kommentaren gepostet werden.

Die mobile Version verlassen