Tutorial: Erstellen eines iFrame Tabs für die Facebook Timeline inklusive Fan-Gate und Share Button

Like it?
Share it!

 - Gastbeitrag von Daniel Setzermann -

Nahezu jeder der eine Fan-Page auf Facebook betreibt, ob nun Produkt oder Website wird irgendwann über die Page-Tabs stolpern. Mit einem Page-Tab ist es dem geneigten Page-Betreiber möglich, jeglichen Content des eigenen Webservers über eine iFrame innerhalb Facebook zu integrieren.

Besonders interessant ist ein so genanntes “Fan-Gate”, eine Schranke, die es erlaubt besonders interessanten Content (z.B. ein Gewinnspiel) zu verstecken und erst zu zeigen wenn der „Like-Button“ gedrückt wurde.

In diesem Tutorial beschreibe ich die nötigen Schritte einen solchen Tab zu erstellen und wie man vorgehen muss um ein „Fan-Gate“ zu realisieren. Danach liefere ich noch den nötigen Code um die beim iFrame entstehenden lästigen Scrollbalken loszuwerden. Als kleines Extra lege ich noch den Code für einen „Share-Button“ im Facebook-Stil drauf.

1. Schritt: Den eigenen Webserver für die App vorbereiten.

Um überhaupt Inhalte innerhalb eines iFrame Tabs anzeigen zu können benötigen wir eine Facebook-Applikation welche wir über das Developer-Center von Facebook anlegen können.

Bevor wir loslegen: Der Webspace der die Inhalte darstellt, muss HTTPS-fähig sein.

Seit Oktober 2011 verlangt Facebook, die Inhalte der Tabs über eine sichere Verbindung darzustellen. Falls allerdings kein Webspace mit HTTPS-Zertifikat zur Verfügung steht, gibt es auch noch eine andere Möglichkeit. Wir können eine der vielen Apps nutzen welche es ermöglichen über fremden Webspace Inhalte zu hosten. Der Nachteil? Diese Apps sind immer mit Werbung der entsprechenden Firma versehen und wirken daher nicht so professionell. Außerdem ist innerhalb dieser Apps keine PHP-MySQL-Magic möglich, z.B. das Absenden eines Formulars zu einer eigenen Datenbank.

Dein Server kann HTTPS?
Los gehts:
Zuallererst erstellen wir einen Ordner innerhalb des Webspaces (meist über FTP). In etwa so: http://www.yourdomain.com/facebook/fb-app/

In diesen Ordner müssen wir jetzt das Facebook-PHP-SDK platzieren, welches man hier herunterladen kann: facebook/facebook-php-sdk · GitHub. Zum Download einfach diesen Button klicken: 

Als nächstes entpacken wir die heruntergeladene Zip-Datei und werfen die Inhalte des Archivs in den Ordner, den wir gerade innerhalb des Webspaces erstellt haben. Wenn wir nun also dort /facebook/fb-app/ über das FTP-Programm aufrufen, sollten wir diese Dateien sehen:

Nächster Schritt: Wir bereiten eine einfache Index-Datei vor, welche bereits korrekt das Facebook-PHP-SDK lädt und den Klassiker „Hello World“ anzeigt.

In dem Ordner in den wir gerade die Inhalte des Archivs geladen haben erstellen wir nun eine Index-Datei: index.php Diese Datei wird die gewünschten Inhalte des iFrames anzeigen.

Folgender Code muss in die index.php kopiert werden:

<?php require('src/facebook.php');
$app_id = "APPID";
$app_secret = "APPSECRET";
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));
?>
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

 

2. Schritt: Erstellen einer App im Developer-Center von Facebook

Hier lang zum Developer-Center: https://www.facebook.com/developer. Nachdem wir unser FB-Passwort erneut eingegeben haben (falls man diesen Bereich noch nie aufgerufen hat) installieren wir die offizielle Facebook-Developer App indem wir auf den Button „Go to App“ (Oder „Zur Anwendung) klicken:

Innerhalb des folgenden Pop-Ups werden wir nach einem App Name und App Namespace gefragt. Diese beiden Angaben werden für die Besucher des Tabs nicht sichtbar sein, also nutze einen beschreibenden Namen aber es lohnt sich nicht, sich hier lange den Kopf zu zerbrechen.

Nachdem wir „Continue“ (oder „Weiter“) gedrückt haben sehen wir einen Überblick der Eigenschaften der App, die wir gerade erstellt haben:

Interessant sind die beiden langen Nummern im oberen Bereich der Übersicht, nämlich: „App ID“ und „App Secret“. Wenn wir uns noch mal den Inhalt der index.php ansehen, die wir gerade erstellt haben, stellen wir fest, dass sich im Code zwei Platzhalter finden, und zwar „APPID“ und „APPSECRET“. Der nächste Schritt ist nicht so schwer zu erraten, wir müssen die beiden Nummern der neu erstellten App in den Code kopieren indem wir die Platzhalter ersetzen. Nachdem wir dies erledigt haben sollte der Code an der entsprechenden Stelle etwa so aussehen:

...
$app_id = "264854456964227";
$app_secret = "31693ccf72ab095fa8574d2bcf66080a";
...

Diese Nummern sind natürlich nur beispielhaft, hier stehen bei Euch natürlich die Nummern aus eurer gerade erstellten App.

3. Schritt: Konfiguration der Facebook-App, dass sie die Inhalte der index.php zeigen kann.

Der Überblick über die App im Developer-Center sollte noch in eurem Browser-Fenster geöffnet sein. Falls nicht, hier lang: Facebook Developer Center. Bei unserer App klicken wir nun auf „Edit Settings“ (bzw. „Einstellungen bearbeiten“).

Wir beginnen mit dem updaten der Allgemeinen Informationen:

Die einzige Änderung, die wir vornehmen müssen ist die App Domain. Die Domain des eigenen Webspace muss so eingegeben werden, wie es der Screenshot zeit, also ohne http://www. und ohne Schrägstrich am Ende

Der nächste Bereich, den wir anpassen ist: „Website with Facebook Login“:

Dieses mal müssen wir unsere URL mit http://www. und auch mit Schrägstrich am Ende angeben. (Das ist tatsächlich wichtig)

Der nächste Teil ist schon der letzte (zumindest was die Einstellungen betrifft). Wir klicken „Page Tab“:

Hier tragen wir neben dem Page-Tab-Namen die Pfade zu unserer index.php ein. Diese Pfade sind natürlich nur beispielhaft und müssen bei euch der von euch gewählten Struktur entsprechen.

Wie man in dem Screenshot sehen kann, kann man für den Tab auch ein Bild festlegen. Die Größe ist 111x74px. Dieser Schritt kann aber durchaus noch später erledigt werden, indem man einfach wieder die Einstellungen der App aufruft.

4. Schritt: Hinzufügen des Tabs zu deiner Fan-Page

Jetzt, da wir alle Einstellungen vorgenommen haben, wollen wir den Tab auf unserer Page anzeigen. Facebook hat es immer noch nicht geschafft, für diesen Schritt einen Button einzurichten. Wir müssen deshalb eine an unsere neue App angepasste URL im Browser aufrufen:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

YOUR_APP_ID ersetzen wir wiederum mit der App-ID der neuen App, YOUR_URL ersetzen wir mit unserer Domain in diesem Format: http://www.yourdomain.com

Wir kopieren also die URL in den Browser, ändern die beiden Informationen entsprechend und drücken „Enter“. Wir werden auf eine Seite mit einem Dropdown weitergeleitet:

Hier wählen wir die Page aus, auf welcher der Tab angezeigt werden soll und drücken „Add Page Tab“. Wir werden auf unsere Domain weitergeleitet aber wenn wir danach zurück zu unserer gewählten Page navigieren taucht unser neu erstellter Tab auf. Es empfiehlt sich hier noch mit einer Art Developer-Page (ohne Tausende Fans) zu arbeiten, schließlich zeigt der Tab nur „Hello World“.

Das wars! (fast)

Wenn wir auf unserer Page auf den Tab klicken sollten wir mit einem großen „Hello World“ begrüßt werden:

 

Was ist mit dem „Fan-Gate“ das am Anfang des Artikels versprochen wird?

Manchmal soll so ein Tab kein „Fan-Gate“ beinhalten, deshalb wurde es hier zuerst einmal ohne gezeigt.

Für das „Fan-Gate“ müssen wir unsere index.php folgendermaßen verändern. Nicht vergessen: APPID und APPSECRET müssen wieder entsprechend unserer App angepasst werden

<? require('src/facebook.php');
$app_id = "APPID";
$app_secret = "APPSECRET";
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));
$signed_request = $facebook->getSignedRequest();
function parsePageSignedRequest() {
if (isset($_REQUEST['signed_request'])) {
$encoded_sig = null;
$payload = null;
list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2);
$sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
$data = json_decode(base64_decode(strtr($payload, '-_', '+/'), true));
return $data;
}
return false;
}
if($signed_request = parsePageSignedRequest()) {
if($signed_request->page->liked) { ?>
<!-- Content for Fans -->
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
<!-- Endontent for Fans -->
<?php } else { ?>
<!-- Content for No-Fans -->
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Hello World</title>
</head>
<body>
<h1>You have to be Fan, to see the content</h1>
</body>
</html>
<!-- End of Content for No-Fans -->
<?php
}
}
?>

Innerhalb dieses Codes sehen wir zwei Bereiche die jeweils mit “Content for Fans” oder entsprechend “Content for No-Fans” eingeleitet werden. Meist enthält der Bereich “Content for No-Fans” lediglich ein Bild das auf den Like-Button zeigt und dazu aufruft, diesen zu klicken. Im Bereich “Content for Fans” dagegen bringen wir sämtlichen Content unter, den wir unseren Fans nach dem Klick zeigen wollen.

 

Entfernen der Scrollbalken des iFrames

Früh genug werden wir beim Erstellen des gewünschten Inhalts auf richtig unschöne Scrollbalken stoßen. Nämlich genau dann, wenn der Inhalt die Standard-Größe (810x800px) überschreitet. Wir wollen also diese Scrollbalken entfernen und auch dafür sorgen, dass die Höhe des iFrames automatisch mit dem Inhalt wächst.

Erster Schritt: Wir stylen den body-tag entsprechend. Füge einfach den folgenden Code im head-Bereich der index.php ein:

<style type="text/css">
body {
margin:0;
padding:0;
overflow: hidden;
}
</style>

Zweiter Schritt: Wir benötigen in bisschen Javascript-Magic um den Rest zu erledigen. Füge einfach den folgenden Code in die index.php ein, kurz bevor der body-tag geschlossen wird. Nicht vergessen: YOUR_APP_ID muss wieder entsprechend unserer App angepasst werden

<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR_APP_ID',
status: true,
cookie: false,
xfbml: true
});
FB.Canvas.setAutoGrow(100);
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/de_DE/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

Geschafft! Keine Scrollbalken, yeah!

 

Extra: Hinzufügen eines Share-Buttons in unseren Tab.

Wenn der schicke neue Tab tolle Angebote oder ein Gewinnspiel beinhaltet wird man dem Besucher sicher gern die Möglichkeit geben, diesen Inhalt mit seinen Freunden zu teilen. Am besten mit einem Share-Button im Facebook-Style, den man selbst mit dem gewünschten Inhalt ausstatten kann:

So geht’s:

Dies hier ist das Code-Template mit dem wir arbeiten werden:

<a target="_top" href="http://www.facebook.com/dialog/feed?
app_id=YOUR_APP_ID&
link=https://www.facebook.com/YOUR_PAGE_USERNAME?sk=app_YOUR_APP_ID&
picture=IMAGE_URL&
name=YOUR_URL_ENCODED_NAME&
caption=YOUR_URL_ENCODED_CAPTION&
description=YOUR_URL_ENCODED_DESCRIPTION&
redirect_uri=https://www.facebook.com/YOUR_PAGE_USERNAME?sk=app_YOUR_APP_ID&
display=page"/>Weitersagen</a>

Gehen wir die einzelnen Platzhalter durch:

  • Wir kennen das bereits: YOUR_APP_ID muss jeweils durch unsere neue App-Id ersetzt werden.
  • YOUR_PAGE_USERNAME ist der Vanity-Name den ihr für eure Page vergeben habt. Also der Name, der hinter http://facebook.com angehängt werden muss, um zu eurer App zu gelangen. Falls ihr noch keinen Vanity-Namen hier festgelegt habt, sieht der Parameter etwas anders aus. Etwa so: link=http://www.facebook.com/pages/YOUR_PAGE_NAME/121231231321312?sk=app_YOUR_APP_ID (Die Zahl ist bei Euch natürlich anders)
  • IMAGE_URL ist die URL zu einem Bild auf eurem Webserver das ihr als Thumbnail für den Wall-Post verwenden wollt. Die Größe soll 85x100px sein und kann als .gif, .png oder .jpg angegeben werden.
  • name, caption and description können beliebig ausgefüllt werden. Sie müssen allerdings URL-Encoded werden. Glücklicherweise gibt es dafür ein kleines Tool um diesen Job zu erledigen: URL-Encoder. Achtet immer darauf, die einzelnen parameter der URL mit „&“ zu verbinden. z.B.: name=Ich%20bin%20eine%20Nachricht%20welche%20URL-konform%20encodiert%20wurde&

Dies sollte ein guter Start für die ersten Aktivitäten mit den iFrame Page Tabs sein.

Als kleine Inspiration hier ein Tab den ich für eins unserer Projekte, Green Cup Coffee, umgesetzt habe: Kaffee-Check. Die gezeigten Beispiele, also den Tab mit Fan-Gate und den ohne gibt es auf meinem Blog, net-bites.de, als fertigen Download, inkl. SDK und (englischer) PDF-Anleitung.

Über den Autor: 
Daniel Setzermann ist Online Marketing Manager bei mymuesli.com und betreut dort auch intensiv das Social-Media-Marketing. Auf seinem neuen privaten Blog Net-Bites.de trägt er seit kurzem Fundstücke aus dem Netz zu Marketing, Social-Media, (Web-)Design und Web-Development zusammen.


1 Kommentar;

  1. Phill Baudach

    Hallo,

    besteht die Möglichkeit eine APP auf der Facebook-Fanpage auszublenden?
    Im Developer Center kann ich zwar anklicken, ob die APP öffentlich sichtbar sein soll, aber selbst wenn ich diese Funktion ausschalte, bleibt die Anwendung auf meiner Seite sichtbar.

    Für einen Tipp wäre ich dankbar!

    Antworten

Diskutiere mit uns!