Hlavní navigace

Aplikace pro Facebook

13. 6. 2011 15:21 (aktualizováno) | jindra

V následujícím textu Vás provedu nastavením a vytvořením aplikace pro facebook, kterou budete moci použít jako šablonu pro veškeré budoucí aplikace.

Předpokládané znalosti: html,php

Budete potřebovat jen PHP server, bohatě postačí některý free hosting. Testováno na endora.cz

Otevřete svůj oblíbený webový prohlížeč, přihlašte se na facebook a přejděte na tuto webovou adresu

www.facebook.com/developers

Nyní se vám zobrazí asi takováto stránka:

první stránka

V levé části vidíte „developer's blog“ kde se dozvíte nové informace o vývoji aplikací. V pravém panelu je pak seznam vašich aplikací. Protože žádnou doposud nemáte vytvořenou je prázdný.  Klepněte na Set up new App.

Teď se neděste, pravděpodobně se Vám zobrazí následující chyba, informující Vás o tom že si musíte ověřit svůj účet. Proveďte. A aplikaci vytvořte s libovolnými údaji, přenastavíme ji dále v článku. To se asi většině nebude líbit, mě se to také nelíbí. Naštěstí jsem si vytvořil dost aplikací před tím než zavedli tuto kontrolu a už po mne ověření zpětně nechtějí.

první stránka

Aplikace se Vám nyní objeví v seznamu napravo jak vidíte zde:

první stránka

Klepněte na název aplikace a dostanete se k menu pro tuto aplikaci:

první stránka

Klepněte na Upravit nastavení:

první stránka

Záložku about vyplňte podle sebe.

Přejděte na záložku „Facebook integration“ do „canvas page“ doplňte jak má vypadat adresa vaší aplikace.

první stránka

Do „canvas url“ dejte adresu na složku s vaší aplikaci, facebook poté klasicky volá index.php.

V „canvas Type“ vyberte Iframe

Velikost nastavte na Auto-resize

Pokud jste někde udělali chybu, facebook to neuloží a vrátí vám takovouto hlášku

první stránka

Nyní ta složitá část, samotná aplikace. Otevřete složku na kterou se odkazujete v nastavení aplikace a vytvořte index.php. To bude soubor který facebook načte každému kdo otevře vaši aplikaci. Abyste mohli pracovat s daty uživatelů a   nástroji facebooku, musíte vložit jeho API. To najdete zde: https://github.com/facebook/php-sdk/ Složku SRC nahrajte do složky s Vaší aplikací.  Vytvoříme si soubor config.php. Ten bude sloužit k nastavení dané aplikace.

Zde je zdrojový kod config.php, který je vysvětlen pomocí komentářů.

<?php
//Vloží knihovnu pro připojení na facebook
require_once ‚./src/facebook.php‘;
//nadefinuje proměnné pro připojení, všechny najdete v přehledu vaší aplikace na facebooku
$canvasURL = „http://apps.facebook.com/statanal/“;
$absoluteURL = „http://sivler.bluefile.cz/pokus/“;
$appID = „158180074221240“;
$apiKey = „091bbf64ab91b49d3e16a303bb45836b“;
$appSecret = „e9a39933d9070dfecdfb625015bb0c18“;
//Vytvoří připojení na facebook
$facebook = new Facebook(array(
‚appId‘  ⇒ $appID,
‚secret‘ ⇒ $appSecret,
‚cookie‘ ⇒ true,
));
//Zjistí ID uživatele, který používá aplikaci
$uid = $facebook->getUser();
$me;
//Pokud jsme ID získali, uživatel tuto aplikaci používá a potvrdil její přístup (takovéto okno, když vstupujete do aplikace, s tím co vše od Vás aplikace chce (osobní údaje, email..)
if ($uid)
{
//načteme si data o uživateli, pravděpodobně je budeme chtít v aplikaci používat a tady nám poslouží pro testování zda je propojení s FB a uživatelem v pořádku
try
{
$me = $facebook->api(‚/me‘);
}
//pokud není, vypíšeme chybu
catch (FacebookApiException $e)
{
print_r($e);
$uid = null;
}
}
//Pokud jsme ID uživatele nezískali, znamená to že aplikaci nepoužíval nikdy a je třeba ho požádat o svolení k přístupu k jeho datům.
//To se udělá tak že se vygeneruje login url a pak se na ní uživatel přesměruje. Pokud aplikace chce nějaké věci navíc, třeba jako zvláštní oprávnění k emailu a offline přístupu k datům,  dávají se jako parametry funkce getLoginUrl
else
{
$loginUrl = $facebook->getLoginUrl();
echo „<script type=‚text/javascript‘>top­.location.href = ‚$loginUrl‘;</script>“;
}
?>
A tím máme config hotový, to však není vše co si můžeme pro všechny budoucí aplikace připravit jako šablonu.
Protože Facebook má vlastní značky typu XML tzv. „XFBML“ které formátuje on sám, je potřeba také správně nadefinovat stránku a vložit javascriptovou knihovnu, která se o to naformátování XFBML postará.
Zde je zdrojový kód index.php. Opět bude vysvětlen v komentářích.
<!-- Vloží config -->
<?php
require_once ‚./config.php‘;
?>
<!-- Celá aplikace je typu HTML, tak to musíme prohlížeču říct -->
<!DOCTYPE html>
<html xmlns=„http://www.w3.org/1999/xhtml“ xmlns:fb=„http://www.face­book.com/2008/fbml“>
<head>
<meta charset=„UTF-8“>
<title>IFrame Base Facebook Application Development | Thinkdiff.net</title>
<script type=„text/javascript“ src=„http://code.jquery.com/jquery-1.6.1.min.js“></script>
<!--  Vložení facebookové knihovny pro JavaScript -->
<script type=„text/javascript“ src=„http://connect.facebo­ok.net/en_US/all.js“></scrip­t>
</head>
<body>

<!--  povinný element, vyžaduje ho JS knihovna -->

<div id=„fb-root“></div>
<!-- Nyní vytvoření připojení pro JS k Facebooku. Všimněte si že formátování XFBML můžete v klidu vypnout. -->
<script type=„text/javascript“>
FB.init({
appId  : ‚<?=$appID?>‘,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true  // parse XFBML
});
</script>
<?php
//Přirozeně budeme chtít aby tato HTML templáta byla společná pro všechny různé části aplikace a tak je budeme includovat.
//vždycky když budeme chtít přejít k nějaké jiné stránce, zavoláme canvasURL/index.php?page=nazevstranky
//Zkontrolujeme jestli uživatel volá nějakou speciální stránku a když ano, tak jestli existuje
if(isset($_GET[‚page‘]) and file_exists($_GET[‚page‘]))
{
require_once $_GET[‚page‘].„.php“;
}
//Pokud nechce nějakou určitou, nebo ta určitá neexistuje, přesměrujeme ho na úvodní stránku (home.php)
else
{
require_once ‚home.php‘;
}
?>
<!-- Klasický konec -->
</body>
</html>
Gratuluji, máte vytvořenou facebook aplikaci. Teď už Vám jen zbývá vytvořit home.php a napsat to co má ta aplikace dělat, tady je malá ukázka abyste mohli celou aplikaci vyzkoušet.
<?php
echo „Náhodné slovo:“;
//Z pole různých slov vybere náhodné slovo
$texty = array(„pes“,„bagr“,„striptérka“);
echo $texty[rand(0,count($texty))];
?>
Ozkoušet si aplikaci můžete na http://apps.facebook.com/vzorova-aplikace/
Mělo by to vypadat takto:


první stránka
Je to můj vůbec  první článek který publikuji veřejně, tak se omlouvám za vše co se Vám v něm nebude líbit. Příště se to pokusím napravit.