Fejlesszünk saját Facebook alkalmazást – Alapok

Sokan vannak, akik szeretnek bizonyos dolgokat maguknak megcsinálni a weboldalukon, rajongói oldalukon, hírleveleikben, stb. Biztos vagyok abban is, hogy közülük többen eljátszottak már a saját Facebook alkalmazás készítésének gondolatával is. Azonban az ezzel a területtel kapcsolatos negatív tapasztalatok (hiányos vagy pontatlan dokumentáció, az elvárt működéssel ellentétes eredmények, semmitmondó hibaüzenetek … ) nagy mértékben csökkenthetik az ötleteiket megvalósítani vágyók lelkesedését. Nekik próbálunk segítséget és megfelelő kezdő lendületet biztosítani a továbbhaladáshoz.

Mielőtt elkezdenénk, fontos megjegyeznem, hogy ez a sorozat alapvetően fejlesztési leírásokat fog tartalmazni. Így aki nem szeretné ilyen irányba bővíteni az ismereteit, vagy úgy érzi, hogy távol áll tőle ez a terület, ne csüggedjen, hiszen számos egyéb lehetőség áll a rendelkezésére, amelyek segítségével programozói tudás nélkül ruházhatja fel rajongói oldalát kiemelkedő funkciókkal.

Az alkalmazás létrehozása

Ha valaki korábban már hozott létre alkalmazást, az első lépések nem lesznek ismeretlenek számára.

Megerősített felhasználói profillal látogassunk el a https://developers.facebook.com/apps címre, és a jobb felső sarokban található „Create New App” gombra kattintva hozzunk létre egy új alkalmazást. (Ha valakinek nincs megerősítve a profilja, ez a folyamat során ki fog derülni.)

A megjelenő modal ablakban adjuk meg az új alkalmazásunk nevét és az App Namespace-t (ebben a sorozatban ennek nem lesz szerepe), valamint fogadjuk el a felhasználási feltételeket. (Természetesen csak azt követően, hogy alaposan átolvastuk azt 😉 )

A biztonsági kód beírását és a submit gomb megnyomását követően eljutunk arra a felületre, ahol módosíthatjuk az alkalmazásunk általános beállításait.

A jelenlegi appban egyetlen rész, pontosan 3 adat módosítására/beállítására lesz szükségünk: Page Tab Name, Page Tab URL és Secure Page Tab URL. Hogy miket is kell ide bírni pontosan, arra a bejegyzés további részében fogunk kitérni.

A kód

Az alkalmazások döntő többsége úgy működik, hogy csak az azt „futtató” rajongói oldal likeolása után válik ténylegesen használhatóvá. Első lépésben mi is ezt fogjuk elkészíteni, úgynevezett fangate megoldást hozunk létre.

Mint azt egy korábbi bejegyzésünkben leírtuk, amikor egy az oldalunkhoz csatolt iFrame alkalmazás tabot betölt egy felhasználó a böngészőjében, a facebook különböző adatokat küld a Tab URL-ben beállított fileunk felé egy signed_request nevű változóban. Több hasznos információ mellett, ebben a változóban találjuk meg azt is, a látogató likeolta-e már az oldalunkat.

Ennek a változónak a tartalmát a következő kód segítségével tudjuk kiolvasni:

[php]
<?php
$signed_request = $_REQUEST["signed_request"];
list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);
$data=json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’)),true);
$has_liked = $data["page"]["liked"];
[/php]

Hozzunk létre egy index.php filet és másoljuk bele a fenti kódrészletet.
Az utolsó sorban található változó ($has_liked) tartalma fogja megmutatni, hogy az adott látogató rajongója-e az oldalunknak.
Ezt egy egyszerű feltételes utasításban használva, különböző tartalmakat jeleníthetünk meg rajongóknak és sima felhasználóknak. Ennek megfelelően a következő sorokkal egészítsük ki a kódunkat:

[php]
if($has_liked){
//az adott látogató rajongó
//kérjük el a megfelelő engedélyeket
} else {
//az adott látogató nem rajongó
//kérjük meg, hogy előbb legyen az
?>
Üdvözöllek Idegen! Lépj be rajongóink közé.
<?php
}
[/php]

Természetesen a fenti szövegrészlet (Üdvözöllek Idegen…) helyére bármilyen böngésző által megjeleníthető tartalom illeszthető.

Az alkalmazás engedélyeztetése

Miután kiderítettük, milyen látogatóval van dolgunk, azt kell megnéznünk, engedélyezte-e már az alkalmazást. Ha ez korábban megtörtént, a signed_request változóban megtalálhatjuk a felhasználó egyedi azonosítóját, a user id-t is. (Ebben a részben nem térünk ki külön az egyéb szükséges engedélyek meglétének vizsgálatára)

Ennek a vizsgálatához szintén egy feltételes utasítást fogunk segítségül hívni:

[php]
if (!$data["user_id"]) {
//még nem engedélyezte
//irányítsuk át az engedélyező képernyőre
} else {
//már engedélyezte
//írjuk ki az egyedi azonosítóját
echo $data["user_id"];
}
[/php]

Ezt a kódrészletet másoljuk be oda, ahol a már rajongó felhasználóknak szánt tartalmat szeretnénk megjeleníteni. Így a kódunk azon része így fog kinézni:

[php]
if($has_liked){
//az adott látogató rajongó
//kérjük el a megfelelő engedélyeket
if (!$data["user_id"]) {
//még nem engedélyezte
//irányítsuk át az engedélyező képernyőre
} else {
//már engedélyezte
//írjuk ki az egyedi azonosítóját
echo $data["user_id"];
}
} …
[/php]

Az alkalmazás engedélyezése egy speciális URL-en keresztül történik, ami a következőképpen épül fel:

[php]http://www.facebook.com/dialog/oauth?client_id=_APP_ID_&redirect_uri=_REDIRECT_URL_&scope=_APP_PERMISSIONS_[/php]

Az APP ID a létrehozott alkalmazásunk egyedi azonosítója, megtalálható (többek között) az app beállítási lehetőségeit tartalmazó felületen.
A REDIRECT URL az a hivatkozás, ahová az engedélyezést követően szeretnénk irányítani a felhasználót, jelen esetben az a tab URL, ahová telepítjük majd az appot (fontos, hogy az hivatkozás urlencode-olt változatban szerepeljen). Mivel az alkalmazást még nem adtuk hozzá az oldalunkhoz, ezt az adatot az APP ID alapján kell meghatároznunk. Ehhez vegyük alapul a következő hivatkozást: https://www.facebook.com/besocial.hu?sk=app_180104842091507
Jól látható, hogy az URL végén szerepel egy egyértelműen beazonosítható számsor, ami megegyezik az alkalmazásunk azonosítójával. Cseréljük le a megfelelő részeket a saját rajongói oldalunk és appunk adataival.
Az APP PERMISSIONS tartalmazza azokat az engedélyeket, amiket el szeretnénk kérni a felhasználótól (ebben a példában csak az alap adatokhoz fogunk hozzáférést kérni).

Ezen információk birtokában a kódunkat a következő sorokkal egészítsük ki:

[php]
if($has_liked){
if (!$data["user_id"]) {
//még nem engedélyezte -> irányítsuk át az engedélyező képernyőre
$app_id = "0123456789"; //ide kerül a létrehozott alkalmazás ID-ja
$redirect_url = urlencode("http://facebook.com/…"); //ide kerül a tab URL
$scope = ""; //jelen esetben üres marad
$auth_url = "http://www.facebook.com/dialog/oauth?client_id=" . $app_id . "&redirect_uri=" . $redirect_url . "&scope=" . $scope;
echo(‘<script type="text/javascript">// <![CDATA[
top.location.href="’ . $auth_url . ‘"
// ]]></script>’);
}
} …
[/php]

(megj.: azért van szükség a javascripttel kombinált átirányításra, mert az alkalmazásunk egy iframen belül fut facebookon, így pl. a php-s header(„Location: „); megoldás nem működőképes)

A kódunknak jelenleg így kell kinéznie: (természetesen mindenkinek módosítva a saját adataival)

[php]
<?php
$signed_request = $_REQUEST["signed_request"];
list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);
$data=json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’)),true);
$has_liked = $data["page"]["liked"];

if($has_liked){
//az adott látogató rajongó
//kérjük el a megfelelő engedélyeket
if (!$data["user_id"]) {
//még nem engedélyezte
//irányítsuk át az engedélyező képernyőre
$app_id = "0123456789"; //ide kerül a létrehozott alkalmazás ID-ja
$redirect_url = urlencode("http://facebook.com/…"); //ide kerül a tab URL
$scope = ""; //jelen esetben üres marad
$auth_url = "http://www.facebook.com/dialog/oauth?client_id=" . $app_id . "&redirect_uri=" . $redirect_url . "&scope=" . $scope;
echo(‘<script type="text/javascript">// <![CDATA[
top.location.href="’ . $auth_url . ‘"
// ]]></script>’);
} else {
//már engedélyezte
//írjuk ki az egyedi azonosítóját
echo $data["user_id"];
}
} else {
//az adott látogató nem rajongó
//kérjük meg, hogy előbb legyen az
?>
Üdvözöllek Idegen! Lépj be rajongóink közé.
<?php
}
[/php]

A létrehozott index.php filet ezzel a tartalommal másoljuk fel egy olyan tárhelyre, ami rendelkezik ssl titkosítással is.
Térjünk vissza az alkalmazásunk beállításait tartalmazó felületre és a Page Tab fülön, a Page Tab Name mezőben adjuk meg a nevet, amivel meg szeretnénk jeleníteni a tabot a rajongói oldalunkon. A Page Tab URL mezőben adjuk meg az index.php http elérését, a Secure Page Tab mezőben pedig a https elérését. (Több esetben problémát okozott, ha nem szerepelt az index.php az URL végén, így figyeljünk rá, hogy ezt is írjuk be. Ha más a fileunk neve, akkor természetesen azt.)

Ha ezzel is megvagyunk, mentsük el a módosításokat.

Az alkalmazás telepítése

Nemrég átalakult a telepítési folyamat, mivel a Facebook megszűntette az alkalmazás profiloldalak létrehozását. Ezért a következő egyszerű eszközt fogjuk segítségül hívni az élesítéséhez: https://besocial.hu/stuff/app_install/
Írjuk be az APP ID-t a beviteli mezőbe, majd nyomjuk meg a telepítés gombot. A megjelenő felületen válasszuk ki az oldalt, amihez szeretnénk hozzáadni a tabot, majd nyomjuk meg az Add Page Tab gombot.

Látogassunk el az oldalra, amihez hozzáadtuk az alkalmazásunkat, és kattintsunk a tabra.

Ha mindent jól csináltunk, rövid időn belül meg kell jelennie az alkalmazás azon képernyőjének, ahol engedélyezhetjük a hozzáférést a szükséges adatokhoz.

Telepítést követően pedig vissza kell jutnunk a tabra, ahol már a saját azonosítónk fogad minket.

Természetesen arra is van lehetőségünk, hogy az így megkapott adatokat (a Facebook Adatkezelési irányelveinek és a Magyarországon aktuálisan érvényben lévő, erre a területre vonatkozó jogszabályoknak a figyelembevételével) saját adatbázisban tároljuk, későbbi azonosítás céljából felhasználjuk, pl egy szavazás esetén.

Bár a téma kicsit száraz, remélem pár emberben sikerült felkeltenem legalább annyira az érdeklődést, hogy a bejegyzésben leírt alkalmazást elkészítse 🙂
Ha valaki nem szeretné végigpötyögni a fenti kódsorokat, a saját adatokkal kiegészítendő forrást letöltheti innen: Saját Facebook alkalmazás – Alapok

A következő részben megnézzük kicsit részletesebben, pontosan milyen engedélyeket is kérhetünk a felhasználóktól, és az így kapott adatokat hogyan dolgozhatjuk fel.

A sorozat további részei:

Alkalmazás engedélyek (permissions)Az okleveles alkalmazások lelke: publish_stream