Menü

Facebook Friends Code-Generatoren

Seite 3
zurück zu Seite 2

Widget-Generator

Farbeinstellungen: Like Button mit den Werten action=recommend, colorscheme=dark, font=verdana. © PC Magazin
Farbeinstellungen: Like Button mit den Werten action=recommend, colorscheme=dark, font=verdana.

Facebook stellt unter http://developers.facebook.com/plugins Code-Generatoren für seine Widgets zur Verfügung. Klicken Sie auf der Seite das Widget an, das Sie für Ihre Homepage verwenden wollen, geben Sie auf der Folgeseite die gewünschten Parameter an und klicken Sie auf die Schaltfläche Get Code.

Übertragen Sie anschließend den Code für den IFrame per Copy&Paste in Ihre HTML-Datei. Allerdings URL-kodiert der Generator die Adresse des href-Parameters und das Attribut border, das der Generator im Inline-Style Sheet verwendet, welche das iframe-Element nicht unterstützt. Es bleibt jedoch Ihnen überlassen, den Code hinterher anzupassen.

Außerdem können Sie sich mithilfe des Generators schnell davon überzeugen, über welche Facebook-Attriubute ein bestimmtes Widget verfügt. Das Activity Feed beispielsweise besitzt das zusätzliche Attribut recommendations. Der Wert true teilt das Activity-Fenster in zwei Bereiche.

Der obere zeigt Aktivitäten von Facebook-Freunden bezüglich einer bestimmten Website, falls der Betrachter aktuell bei Facebook angemeldet ist, der untere Bereich zeigt entsprechende Empfehlungen.

Die zu überwachende Domain geben Sie beim Activity Feed mit dem Parameter site an, dem Sie gegebenenfalls, wie oben beschrieben, weitere Parameter anhängen.

<iframe src="http://www.facebook.com/widgets/ activity.php?site=pc-magazin.de&recommendations= true&border_color=blue frameborder="0" style="width: 350px; height: 350px"> </iframe>

Gewöhnlich werden Sie mit dem Activity Feed natürlich Ihre eigene Website überwachen (site=meinehomepage.de), also Ihren Besuchern eine Übersicht von Aktivitäten auf Ihrer Domain präsentieren. Das bietet sich vor allem dann an, wenn Sie mehrere Facebook-Widgets auf verschiedenen Seiten integriert haben.

Code-Generator für das Activity Feed: Das Widget zeigt eine Übersicht aktueller Facebook-Aktivitäten. © PC Magazin
Code-Generator für das Activity Feed: Das Widget zeigt eine Übersicht aktueller Facebook-Aktivitäten.

Über das Live Stream Plugin kann Ihr Besucher direkt auf der Seite seine Facebook-Neuigkeiten einsehen und Live-Ereignisse kommentieren. Letzteres ist jedoch vor allem interessant, wenn Sie bereits eine eigene Facebook-Anwendung erstellt haben und damit über eine Anwendungs-ID verfügen. Wenn das nicht der Fall ist, und Sie das Widget trotzdem verwenden wollen, können Sie die ID übernehmen, die Ihnen der Generator anbietet.

Die Programmierschnittstelle von Facebook bietet, wie eingangs erwähnt, ein weites Betätigungsfeld. Sie brauchen sich zum Beispiel nicht auf Webseiten zu beschränken, sondern können die Facebook APIs auch auf von Facebook gehosteten Seiten oder Applikationen und sogar für Standalone-Anwendungen einsetzen. Es gibt auch ein Facebook Developer Toolkit für das .NET Framework, das Windows Forms, ASP.NET, WPS und Silverlight unterstützt.

Grund genug also, sich intensiver mit dem Thema zu beschäftigen. Als Nächstes werden Sie das JavaScript SDK von Facebook und die Facebook-eigene Markup-Sprache XFBML kennen lernen. Einige Widgets wie das Friendpile Plugin oder der Login Button sind ausschließlich über XFBML-Tags verfügbar.

Testen Sie Widgets online

Gewöhnlich sollte man Skriptcode lokal testen, bevor man ihn veröffentlicht. Dies funktioniert bei den Facebook-Widgets leider nur bedingt. Das Design eines Widgets können Sie sich zwar ansehen und korrigieren, wenn Sie die Seite auf einem lokalen Server wie XAMPP hosten. Wenn Sie im Code auf Ihre eigene Webseite verweisen, steht die komplette Facebook-Funktionalität jedoch nur dann zur Verfügung, wenn die Webseite im WWW gehostet wird.

Am besten, Sie legen für die Entwicklungsphase auf Ihrem Webserver ein separates Verzeichnis an, das Sie vor dem Zugriff anderer schützen. Allerdings bleibt es Ihnen nicht erspart, die Seite nach Änderungen immer wieder hochzuladen.

Hinweis

Beachten Sie bitte, dass Sie als Doctype eine Transitional-Variante wählen müssen, wenn Sie im Code Ihrer HTMLSeite IFrames verwenden wie <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“> oder <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>.

Inhaltsverzeichnis 1/3
 
Whitepaper Lexware-Logo
Content-Revolution Wie Sie professionelles Content-Marketing betreiben.
Haptik-Effekt Im Einsatz im multisensorischen Marketing.
x