06
Jul
2011
admin

Die sozialen Plugins von Facebook

Die Sozialen Plugins, die Facebook uns für den Einbau in unsere Webseiten bereitstellt, ermöglichen es uns, zu sehen, welchen unserer Freunden was gefällt oder welche Inhalte sie kommentiert oder geteilt haben. Die wichtigste Frage dabei ist, was die Webseiten, welche die Sozialen Plugins nutzen, über uns erfahren, wenn wir sie besuchen. Die Antwort lautet: Grundsätzlich erst mal nichts! Die Plugins wurden so entworfen, dass keine Daten von uns preisgegeben werden, wenn eine Webseite diese Plugins bereitstellt und wir diese besuchen.

Das Hinzufügen der Plugins zu einer Webseite ist sehr einfach gehalten. Schwieriger ist hier schon die Frage, welche Sozialen Plugins man nutzen will, bzw. sollte. Leider kann man das nicht verallgemeinern. Man sollte sich einen Überblick verschaffen, was die einzelnen Plugins leisten und dann entscheiden, welche dieser Plugins sinnvolle Funktionen für die Webseite bereitstellen, auf der sie eingebunden werden. Zurzeit stellt Facebook folgende Sozialen Plugins zur Verfügung:

Like Button
Der Like-Button, bzw. "Gefällt mir"-Button, ist das wohl am weitesten verbreitetste Soziale Plugin. Das liegt mit Sicherheit auch daran, dass man mit diesem Button, mit nur einem Klick, eine Feed Story in die News Feeds seiner Freunde schreiben kann. Das ist für den Betreiber der Webseite, die den Button integriert, natürlich ein wichtiger Punkt in Bezug auf die Viralität, da die Feed Story einen Link auf die Webseite enthält. Wenn die Webseite Open Graph Tags enthält, wird das Objekt, für das der Button eingebunden wurde, sogar per Knopfdruck zu einer Facebook-Seite.

Für die Implementierung des Gefällt mir-Buttons stehen einem zwei Möglichkeiten zur Verfügung: XFBML oder iFrame. Die XFBML Variante erfordert das Einbinden der Facebook JavaScript SDK. Allerdings hat man hier auch die meisten Möglichkeiten. So ist es z.B. möglich Aktionen auszulösen, sobald jemand den Button klickt. Außerdem hat man beim Klicken des Buttons immer die Möglichkeit, optional einen Kommentar anzugeben, der dann ebenfalls im News Feed erscheint. Diese Möglichkeit hat man bei der iFrame Variante nur, wenn man das Standard Layout des Buttons mit einer Mindestbreite von 400px nutzt. Ein weiterer großer Vorteil der XFBML Variante ist die zusätzliche Nutzung des Send Buttons, sofern es gewünscht ist.

Es gibt zu diesem Zeitpunkt drei verschiedene Layouts für den Gefällt mir-Button.

standard

button_count

box_count

Außerdem gibt es, wie schon erwähnt, die Möglichkeit zusätzlich den Send Button einzublenden:

send-like.jpg

Den Code zum Einbinden in die eigene Webseite gibt der Konfigurator (http://developers.facebook.com/docs/reference/plugins/like/) vor. Dort kann man bequem alle Einstellungen zusammenklicken und sich anschließend den Code ausgeben lassen.

Hinweis
Es können mehrere Gefällt mir-Buttons parallel auf einer Seite eingebunden werden (Beispiel: Jeder Artikel eines Shops kann einen eigenen Gefällt mir-Button bekommen.

Das Einbinden des Like Buttons inkl. des Send Buttons, könnte wie folgt aussehen:

Ohne den Send Button wäre auch die iFrame Version eine Möglichkeit, sich den Like Button auf die eigene Webseite zu holen:


Send Button
Der Send Button ist dem bekanntesten sozialen Plugin, dem Like Button, sehr ähnlich. der Unterschied besteht primär darin, dass man Inhalte mit dem Send Button an bestimmte Benutzer senden kann und so nicht mehr gezwungen ist, Inhalte mit allen zu teilen. So kann man beim Send Button bestimmte Freunde, Gruppen oder sogar E-Mail Adressen angeben. Und so sieht der Dialog aus:

send.jpg

Man kann den Send- und den Like Button kombinieren oder beide einzeln einbinden. Um beide Buttons zu kombinieren, geht man wie folgt vor:

Die Standalone Variante sieht wie folgt aus:

Der Konfigurator für den Send Button findet sich hier (http://developers.facebook.com/docs/reference/plugins/send/).

Recommendations

Das Recommendations Plugin zeigt personalisierte Empfehlungen an. Dafür ist es unerheblich, ob der Benutzer gerade auf der Seite, die das Plugin eingebunden hat, eingeloggt ist oder nicht. Dazu werden alle Interaktionen herangezogen, die mit der URL der Seite, welche das Plugin implementiert, übereinstimmen.

Auch dieses Plugin kann via XFBML oder per iFrame eingebunden werden. Der Konfigurator für das Recommendations-Plugin befindet sich hier (http://developers.facebook.com/docs/reference/plugins/recommendations/).

So wird dieses Plugin eingebunden:

XFBML:



iFrame:


Login Button
Über den Login Button können sich die Besucher mit der Webseite , die den Button implementiert, verbinden, bzw. sich dort einloggen. Diese Art der Verbindung nennt sich Single Sign-on. In der Regel wird man sich hier nicht einfach auf das Einbinden des Button beschränken, sondern eine Programmlogik entwerfen, die z.B. eine automatische Registrierung oder das Einloggen vornehmen könnte. Der Login Button kann außerdem anzeigen, welche Freunde sich bisher schon mit der Seite verbunden haben.

Das Einbinden des Buttons erfolgt über XFBML und die Benutzung der Facebook JavaScript SDK.

Ein Beispiel für das Einbinden könnte wie folgt aussehen:

Comments
Das Kommentar-Plugin ermöglicht es uns, die Facebook Kommentar-Box in unsere Webseiten einzubinden.

comment.jpg

Der Benutzer kann dabei entscheiden, ob sein Kommentar zusätzlich als Feed-Story im News Feed seiner Freunde erscheint. Der Administrator der Facebook Anwendung, die die JavaScript SDK initialisiert, hat außerdem die Möglichkeit, spezielle Einstellungen zur Kommentarbox vorzunehmen. Dazu befindet sich oben rechts der Link Einstellungen.

comment-settings.jpg

Auch dieses Plugin wird per XFBML eingebunden. Der Konfigurator für das Kommentar-Plugin befindet sich hier (http://developers.facebook.com/docs/reference/plugins/comments/).

Hier der Code für das Einbinden des Comment Plugins:

Activity Feed
Das Activity Feed Plugin zeigt die Inhalte an, die von Freunden geteilt oder mit "Gefällt mir" markiert wurden. Sind nicht genügend Inhalte vorhanden, um das Plugin damit zu füllen, werden personalisierte Empfehlen angezeigt, wie es im Recommendations Plugin der Fall ist.

Dieses Plugin lässt sich ebenfalls per XFBML oder via iFrame einbinden:

XFBML:



iFrame:


Like Box
Die Like Box stellt dem Benutzer mehrere Möglichkeiten zur Verfügung. Zum Einen beinhaltet die Like Box den Gefällt mir-Button. Zusätzlich werden die neuesten Einträge der Facebook Seite angezeigt. Außerdem zeigt das Plugin an, wie viele Benutzer bereits den Gefällt mir-Button geklickt haben. Die Like Box kann in diesem Konfigurator (http://developers.facebook.com/docs/reference/plugins/like-box/) an die eigenen Vorstellungen angepasst werden. So ist es z.B. möglich, dass nur die neuesten Nachrichten der Facebook Seite nicht mit in der Like Box erscheinen.

Das Einbinden via XFBML:

Die iFrame Variante:


Facepile
Das Facepile Plugin zeigt die Profilbilder der befreundeten Benutzer an, die sich bereits mit der Seite verbunden haben.

Das Einbinden dieses Plugin erfolgt über XFBML oder iFrame:

XFBML:

iFrame:


Live Stream
Das Live Stream Plugin besteht im Wesentlichen aus einem Kommentar Feld, mit dem sich Aktivitäten, bzw. Posts in Echtzeit teilen lassen. Die Einsatzgebiete sind sehr vielfältig. Beispiele hierfür wären z.B. Webinare, live Chats oder live gestreamte Videos. Im Konfigurator (http://developers.facebook.com/docs/reference/plugins/live-stream/) lässt sich, neben einigen weiteren Optionen, auch einstellen, ob alle Posts standardmäßig im News Feed des Benutzers erscheinen sollen.

So sieht der Code zum Einbinden des Live Streams aus:

Registration Tool
Das Plugin Registration Tool ist ein Registrierungs-Formular, welches auf einer Webseite eingebunden werden kann, um die Registrierung für Facebook Benutzer zu vereinfachen, bzw. den bisherigen Registrierungs-Prozess komplett zu ersetzen. Der Mehrwert des Registration Tools liegt unter anderem darin, dass man Felder bereits mit den auf Facebook hinterlegten Daten vor ausfüllen kann und so dem Nutzer die Arbeit abnimmt. Man kann das Registration Tool als iFrame oder als XFBML Tag einbinden. Bei der Konfiguration hat man eine Menge Einstellungsmöglichkeiten. So kann man z.B. ganz individuell entscheiden, welche Informationen abgefragt werden sollen und welche nicht. Es ist sogar möglich, zusätzlich zu den durch Facebook vorgegebenen Feldern, eigene Felder hinzuzufügen, die dann abgefragt werden können. So könnte das Registrierungsformular dann aussehen:

facebook-registration-tool-custom-fields.jpg

Die Einbindung könnte auf diese Weise erfolgen:

<iframe src="http://www.facebook.com/plugins/registration.php?
             client_id=111425885597866&
             redirect_uri=http://user-registration.abouttheweb.de/"
        scrolling="auto"
        frameborder="no"
        style="border:none"
        allowTransparency="true"
        width="100%"
        height="500">
</iframe>

Das Registration Plugin ist sehr komplex. Für weitere Informationen, wie man dieses Plugin einbindet und welche Möglichkeiten sich einem dadurch bieten, könnt ihr unter http://www.abouttheweb.de/tutorials/facebook-die-praxis/das-facebook-registration-tool ein ausführliches Tutorial dazu lesen.

Share Button
Der Share Button (oder die Share Funktionalität) wird, streng genommen, eigentlich nicht zu den sozialen Plugins gezählt. Trotzdem sollte er in diesem Kontext ein mal erwähnt werden. Der Share Button erinnert vom Ergebnis her stark an den Like Button. Auch hier wird eine Feedstory veröffentlicht, die sich kaum von der eines Like Buttons unterscheidet. Die wichtigsten Unterschiede sind hier, dass der Share Button eine zusätzliche Interaktion erfordert und dass er grafisch individuell angepasst werden kann.
Beim Like Button wird, sofort nach dem Klicken, eine Feedstory veröffentlicht. Beim Share Button erscheint nach dem Klicken erst ein Fenster, in dem man zusätzliche Informationen angeben kann. Dafür kann man sich beim Share Button aussuchen, wie er aussehen soll und eigene Grafiken dafür verwenden. Man kann sogar einen normalen Textlink benutzen.

Es gibt mehrere Möglichkeiten den Share Button einzubinden. Als erstes die Variante eines einfachen Links:

http://www.facebook.com/sharer/sharer.php?u=URL

Der Platzhalter URL muss durch die Url ersetzt werden, die geteilt werden soll. Also z.B.:

http://www.facebook.com/sharer/sharer.php?u=http://www.abouttheweb.de

Die andere Möglichkeit ist, die Share Funktion über die JavaScript SDK einzubinden.

 FB.ui(
   {
     method: 'feed',
     name: 'Teile diesen Link',
     link: 'http://www.abouttheweb.de/',
     picture: 'http://www.abouttheweb.de/sites/all/themes/typebased/images/atwmetaimage.jpg',
     caption: 'AboutTheWeb',
     description: 'Dies ist ein Blog, der sich mit der Facebook Anwendungsprogrammierung beschäftigt.'
   }
 );

Fazit
Die Sozialen Plugins sind eine sehr gute Möglichkeit, um eine Webseite besser in Facebook zu integrieren. Welches Plugin man einsetzt oder welche Plugins man miteinander kombiniert, ist jedoch von Fall zu Fall unterschiedlich. Eine sehr gute Wahl stellen hier aber zumindest der Like Button, bzw. die Like Box dar.

Trackback-URL für diesen Beitrag

http://www.abouttheweb.de/trackback/657

Ähnliche Artikel

X
Laden