Webseite des Ferienhauses von Familie Stampe-Röse in Hooksiel. Das Haus verfügt über alle Annehmlichkeiten, die einen schönen Urlaub verwirklichen. Selbst die Mitnahme von Haustieren ist hier möglich. Für die Gäste steht im…
Facebook Iframe App (Like / No Like)
Autor: Sven, am Fr, 09.12.2011 - 15:36
Im folgenden Tutorial möchte ich einmal aufgreifen und anleiten, wie eine Facebook Iframe Anwendung unter Verwendung des Facebook SDKs geschrieben und eingebunden wird. Hierbei sollen "Gefällt mir" von "Gefällt mir (noch) nicht" User unterschieden werden, dass heißt erst nach dem Klick auf "Gefällt mir" wird einem der entsprechende Inhalt angezeigt, z.B. ein Link zum Gewinnspiel, ...
Vorraussetzungen:
- PHP5 fähiger Webspace
- HTTP und HTTPS Erreichbarkeit
Seit dem 1. Oktober 2011 ist SSL erforderlich, da viele User auf Facebook mit gesicherter Verbindung online sind, siehe "sicheres Durchstöbern" in den Facebook Sicherheitseinstellungen des Profils) - Facebook SDK
Die Anwendung an sich ist relativ simpel in der Umsetzung. Im Wesentlichen wird nur eine "index.php" benötigt, die den anzuzeigenden Inhalt bereit stellt:
<?php // Add facebook sdk require 'facebook.php'; // Params $app_id = '111111111111111'; $app_secret = '11111111111111111111111111111111'; $facebook = new Facebook(array( 'appId' => $app_id, 'secret' => $app_secret, 'cookie' => true )); // Logged in or not $signed_request = $facebook->getSignedRequest(); // Values $page_id = $signed_request["page"]["id"]; $page_admin = $signed_request["page"]["admin"]; $like_status = $signed_request["page"]["liked"]; $country = $signed_request["user"]["country"]; $locale = $signed_request["user"]["locale"]; ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Titel der Seite</title> <link type="text/css" rel="stylesheet" media="all" href="base.css" /> <script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script> <script type="text/javascript"> //FB.Canvas.setSize({ width: 760, height: 1000 }); window.fbAsyncInit = function() { FB.init({appId: '111111111111111', status: true, cookie: true, xfbml: true}); }; </script> </head> <body> <?php if ($like_status): ?> <p>Hier folgt der Inhalt für die Like User.</p> <?php else: ?> <p>Hier folgt der Inhalt für die noch nicht Like User.</p> <?php endif; ?> </body> </html>
Zusätzliche Erklärungen:
- Mit dieser Funktion lässt sich der Iframe in der Größe anpassen, da Facebook eine Höhe von 800px (Default) für die Integration verwendet.
FB.Canvas.setSize({ width: 760, height: 1000 });
- Mit den zusätzlichen Variablen
$page_id,$page_admin,$country, ... kann die Anwendung entsprechend erweitert werden und man hat Zugriff auf zusätzliche Variablen, die Facebook zur Verfügung stellt.
Neuen Kommentar schreiben