Facebook – einen eigenen iframe Tab erstellen

Was braucht man?

  • einen Facebook Developer Account (“Bestätige deinen Account via Kreditkarte oder Handy“)
  • PHP fähiger Webspace mit einem SSL Zertifikat

Diese Voraussetzungen sind Pflicht. Anwendungen auf einem Server ohne SSL Zertifikat sind wertlos und wer kein Developer ist, kann erst gar keine Anwendungen erstellen. Sind die Voraussetzungen erfüllt, kanns losgehen:

Schritt 1: Eine Anwendung erstellen

Auf developers.facebook.com/apps den Button “Neue Anwendung erstellen” klicken. Den App Namen vergeben, die anderen beiden Optionen leer lassen bzw. nicht anwählen. Anschließend folgende Daten ausfüllen:

Anwendungsdomain: die Domain des Webspace, den man benutzt. z.B. ophidia.net
Website: url, z.b. http://www.ophidia.net/tab
Seitenreiter: normale und sichere URL, z.B. http://www.ophidia.net/tab und https://www.ophidia.net/tab

Unter “Fortgeschritten” noch den Sandkasten Modus aktivieren, damit die Anwendung bis zu ihrer Fertigstellung keiner sieht. Speichern!

Schritt 2: Seite erstellen

Als erstes brauchen wir das Facebook PHP SDK. Wir brauchen nur die beiden Dateien src/base_facebook.php und src/facebook.php. Die speichern wir uns zusammen mit unserer index.php in unseren Tab Ordner. Meine index.php sieht dann folgendermaßen aus:

  1. <?php
  2. header("Content-Type: text/html; charset=utf-8");
  3. require_once 'facebook.php';
  4. try{    
  5.     $secret = "SECRET";
  6.     $id = "APP_ID";
  7.     @header('P3P: CP="CAO PSA OUR"');
  8.     $fb = new Facebook(array(
  9.               'appId'  => $id,
  10.               'secret' => $secret,
  11.              'cookie' => true
  12.     ));
  13.     $fbData = $fb->getSignedRequest();
  14. }catch(Exception $e){
  15.     die("error".$e);
  16. }         
  17. ?>
  18. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  19. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="de-DE" dir="ltr" lang="de-DE">
  20.     <head profile="http://gmpg.org/xfn/11">
  21.          <style>#wrap{width:810px;overflow-x:hidden;}</style>
  22.     </head>
  23.     <body>
  24.         <div id="wrap">
  25.             <img src="img/810.jpg"/>
  26.         </div>
  27.         <div id="fb-root"></div>
  28.         <script type="text/javascript" src="https://connect.facebook.net/de_DE/all.js"></script>
  29.         <script type="text/javascript">
  30.           FB.init({
  31.           appId  : '<?php echo $id; ?>',
  32.           status : true,
  33.           cookie : true,
  34.           xfbml  : true,
  35.           oauth : true
  36.         });
  37.         
  38.         FB.Canvas.setSize();
  39.         </script>        
  40.     </body>
  41. </html>

APP_ID und SECRET ersetzen durch die entsprechenden Werte. Und das Ergebnis sieht dann in meinem Fall so aus:

Das sind mal die Grundzüge, ich werde dieses Tutorial demnächst erweitern. Man sieht hier bereits das array $fbData, wer sich das ansieht wird feststellen, dass hier z.B. Infos über den gefällt mir Status des Users vermerkt sind. So kann man z.B. eine fan/nicht-fan Weiche erstellen. Aber dazu später mehr…