Facebook Friends

Code-Generatoren

11.2.2011 von Walter Saumweber

ca. 2:25 Min
Ratgeber
VG Wort Pixel
  1. Soziale Widgets für die Homepage
  2. Der "Like"-Button
  3. Code-Generatoren

Widget-Generator

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

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.

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.

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

Ü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">.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

So kündigen Sie Ihre ADAC-Mitgliedschaft online per E-Mail.

Automobilclub

ADAC-Mitgliedschaft kündigen: So einfach geht's online…

Wer seine ADAC-Mitgliedschaft kündigen möchte, bekommt hier aktuelle Tipps. Wir zeigen Ihnen, wie das online per Formular oder E-Mail möglich ist.

Netflix

Kosten, Apps, Kündigung und Co.

10 wichtige Fragen zu Netflix in Deutschland

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.

whatsapp alternativen

Für Android, iPhone, iPad & Co.

Whatsapp Alternativen: Die 10 besten Messenger-Apps

Es gibt keine Whatsapp-Alternative? Quatsch! Diese Messenger-Apps für Android, iOS und PC sind der perfekte Ersatz.

Spam-Mails

Sicherheit

Phishing-Mails erkennen: 6 Tipps gegen E-Mail Betrug

Betrüger versenden E-Mails, die es auf Ihre Daten und Ihr Geld abgesehen haben. Wie Sie Phishing-E-Mails erkennen und sich schützen.

Facebook-Betrug mit Fake-Profilen

Gefälschte Facebook-Konten

Facebook-Betrug mit Fake-Profilen - wie Sie sich und Ihre…

Betrüger nutzen gefälschte Facebook-Profile, um Geld zu ergaunern. Wir zeigen, wie Sie sich und auch Ihre Facebook-Kontakte gegen die Betrugsmasche…