user Avatar

So performt die neue iframe Facebook Landing-Page

Folgender Text war gestern in Facebooks Developer Blog zu lesen:

On March 11, 2011, you will no longer be able to create new FBML apps and Pages will no longer be able to add the Static FBML app. While all existing apps on Pages using FBML or the Static FBML app will continue to work, we strongly recommend that these apps transition to iframes as soon as possible.

Doch was heißt das nun genau? Was ändert sich für den Fanpage-Betreiber?

Was ist neu für Fanpage-Betreiber?

Viele Seitenbetreiber haben ihre Landing-Pages bisher mit StaticFBML Applikationen gestaltet, um Fans und Nicht-Fans andere Inhalte zu zeigen. Ab dem 11.März 2011 kann Static-FBML nicht mehr genutzt werden. Alte Landing-Page bleiben zwar aktiv, es wird aber empfohlen diese ebenfalls auf iframe umzustellen. Neben den StaticFBML-Landing-Pages sind ebenfalls viele FBML-Applikationen im Umlauf. Ab März können diese nicht mehr neu installiert werden. Für Seiten Betreiber heißt dies die alten Apps auf die neue Technik umzustellen, da Facebook früher oder später FBML ganz abschalten wird. Zwar ist die Umstellung erst ein wenig Aufwand, doch bringt die neue iframe Technik auch Vorteile. So lassen sich nun die Social Plugins in den Tab integrieren und die Seitenbetreiber müssen nicht wie wild Pfeile auf den Like-Button über der Landing-Page Grafik setzen. Zwar blockiert Facebook aus Sicherheitsgründen weiterhin einen Teil des javascript-Codes, doch die Gestaltung von Page-Applikationen wird deutlich vereinfacht und ähnelt dem normalen Bau einer Homepage mit HTML, CSS und Javascript.

So erstellen Sie eine iframe-Landing-Page mit Like-Button für Fans und Nicht-Fans

Hier nun die Schritt-für-Schritt Anleitung zum ersetzen ihrer bisherigen StaticFBML-Landing-Page durch die iframe-Technik. Voraussetzung ist, dass Sie ihre Seite bereits auf das neue Facebook-Seiten umgestellt haben. Das geht unter folgender  URL: http://www.facebook.com/pages/status/

iframe-Landing-Page in php erstellen

Um zwischen Fans und Nicht-Fans zu unterscheiden gilt es den „signed-request“-Parameter von Facebook auszuwerten. Dazu stellt Facebook auf der Homepage eine Funktion zur Verfügung. Wir stellen Ihnen hier einen einfachen Beispiel-Code zur Verfügung. Speichern Sie diesen und legen Sie diesen in einer php-Datei auf ihrem Server ab. Später müssen Sie den Dateipfad bei der App-Konfiguration angeben. Ein funktionierendes Beispiel finden Sie auf unser iConsultants Apps Fanpage. Hier der Beispiel-Code:

if ($data['page']['liked']) {
   echo "

Du bist Fan von unserer Seite!

";
} else {
   echo "

Du bist noch kein Fan!

";
   // Hier den Like-Button für ihre Fanpage einfügen (http://developers.facebook.com/docs/reference/plugins/like)
   echo ''; }
?>

Hier gibt es den Code zum Download: Facebook iframe-Landing-Page mit Like-Button.

Facebook iframe Applikation anlegen

  1. Legen Sie eine neue Applikation an (http://www.facebook.com/developers/)
  2. Stellen Sie unter dem Punkt „Facebook-Einbindung“ folgende Einstellungen ein:
  3. Speichern Sie die Anwendung, kopieren Sie den „Anwendungs-Geheimcode“ in ihren PHP-Code und fügen Sie diese zu ihrer Seite hinzu.
  4. FERTIG.

Neben der Abfrage nach Fan oder Nicht-Fan können Sie ebenfalls abfragen, ob der Nutzer Administrator der Seite ist ($data[‚page‘][‚admin‘]). Wenn der Nutzer bereits die Applikation bestätigt hat, ist es zudem möglich auf seine Daten zuzugreifen und ihn persönlich zu begrüßen… Dies führt aber hier zuweit und folgt in einem der nächsten Posts. Wie immer freue ich mich über Kommentare und Diskussionen. Beste Grüße aus Dublin, Sebastian


iFrame Landingpage
Sebastian Buckpesch

Sebastian Buckpesch ist Gründer und technischer Geschäftsführer der App-Arena GmbH. Der Diplom Wirtschaftsinformatiker und zertifizierte AWS Solution Architect entwickelt mit seinem Team die IT-Plattform App-Manager sowie zahlreiche Web-basierte App-Projekte. Zu seinen Interessensgebieten zählt Cloud- und Serverless Architektur sowie neueste IoT- und BigData-Trends.