Advertisement
  1. Code
  2. PHP

Készítsd el az első Facebook alkalmazásodat

Scroll to top
Read Time: 4 min

Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)

Szóval szeretnél egy Facebook alkalmazást készíteni és elérni – gyakorlatilag – több millió felhasználót.  Nos szerencsére egy API-t használó alkalmazás megírását nem túl nehéz megtanulni (legalábbis ami az alapokat illeti). Ebben a bemutatóban egy Facebook alkalmazást készítünk, ami egy véletlenszerű idézetet generál a felhasználó adatlapján.




Fogjunk hozzá

Érdemes megjegyezni, hogy a Facebook API többféle nyelven is elérhető, ezek listája fent van a Facebook Developers Wikin. Ehhez a bemutatóhoz PHP 5-öt fogok használni. Le kell töltened hozzá a PHP 5 Client Library-t is, amit belevettem a forrásfájlok közé Minden itt leírt kódnak az index.php fájlba kell kerülnie.

1. lépés: Az alkalmazásod inicializálása

Az első lépés egy Facebook API kulcs megszerzése, ami lehetővé teszi az alkalmazásodnak, hogy információkat gyűjtsön a Facebooktól. Menj a Facebook Developer Applicationra és kattints a "Set Up a New Application" gombra. Válassz egy nevet, fogadd el a Felhasználási feltételeket, és megkapod az API-dat. Most be kell állítanod a vászon oldaladat és egy visszahívási URL-t.

A vászon oldalad oldalad az alkalmazás terület a Facebookon belül; a név hozzáadódik az URL-hez és valami ilyesmi lesz: http://apps.new.facebook.com/[ALKALMAZÁSNÉV]. A visszahívási URL a szerverre mutat, ami az alkalmazás fájlokat biztosítja. Ezek beállításához a "My Applications" oldalon kattints az "Edit Settings"-re a jobb oldalon. Itt találod majd a kitöltendő mezőket, ahogyan az a lenti képernyőképen is látszik. Bár ezeken kívül még rengeteg más lehetőség is van, egyikre sincs szükség ehhez a bemutatóhoz. Kattints a "Save"-re és már készen is állsz az első Facebook alkalmazásod elkészítésére. Sőt, a Facebook még néhány kezdő kódot is biztosít a számodra. Kiszedtem belőle az extrákat, és csak azt adom meg neked, amire az alkalmazás inicializálásához szükséged van...

1
2
<?php
3
4
require_once 'includes/facebook.php';
5
6
$appapikey = '85e4cd7042467d0b20109aafb6f20117';
7
$appsecret = 'be5a528d73ad191b6b21a84c4af054ee';
8
$facebook = new Facebook($appapikey, $appsecret);
9
$user_id = $facebook->require_login();
10
$callbackurl = 'http://www.casabona.org/nettuts/';
11
12
?>

Ez egy viszonylag előremutató kód. Létrehozunk egy Facebook objektumot az API kulcsunkkal és egy alkalmazás jelszóval, amit akkor kaptunk, amikor létrehoztuk az API kulcsot. Ezután az első dolog, hogy megszerezzük a bejelentkezett felhasználó user id-ját. Ez értékes lesz számunkra, ha szeretnénk mindenfélét csinálni a felhasználónévvel, a felhasználó barátaival, stb. Hozzáadtam egy $callbackurl-t, hogy könnyebb legyen hozzákapcsolni képeket vagy más fájlokat, mivel a Facebook nem engedélyezi a relatív hivatkozásokat.

2. lépés: Az alkalmazás megírása

Ha nem csinálunk specifikus Facebook meghívásokat, akkor ez csak egy php alkalmazás megírásából áll. Lentebb itt van a mi kódunk.

1
2
//initialize an array of quotes

3
$quotes= array("Only those who dare to fail greatly can ever achieve greatly.", "Take my wife. Please!", "I believe what doesn't kill you only makes you... STRANGER");
4
5
//Select a Random one.

6
$i= rand(0, sizeof($quotes)-1);
7
8
//print the CSS

9
print ('

10
<style type="text/css">

11
 h1{ margin: 10px; font-size: 24pt; }

12
 h2{ margin: 15px; font-size: 20pt; }

13
</style>

14
');
15
16
print "<h1>Nettuts Quotes</h1>";
17
print "<h2>". $quotes[$i] ."</h2>";

Csak ennyit kell tenned, hogy kiírasd a vászon oldalra. Érdemes megjegyezni a módot, ahogyan a CSS-t csináltuk. Nem hívhatunk meg egy fájlt, például a style.css-t – valójában bele kell vennünk a CSS-t a HTML-be. Így a saját CSS kódunk nem keveredik össze a Facebook-éval. Azt is érdemes tudni, hogy amikor diveket stilizálunk, csak osztályokat használhatunk, egyedi azonosítókat nem. Az általunk létrehozott kód valami ilyesmit fog eredményezni:

3. lépés: Az adatlapi box létrehozása

Végül következzék némi Facebook-specifikus dolog. A lenti kód szükséges ahhoz, hogy az idézetünket a felhasználó adatlapjához adhassuk, ez garantálja, hogy megjelenjen az alkalmazásunk az adatlapjukon. Az alkalmazásunkban hozzáadtam a következő kódot $i= rand(0, sizeof($quotes)-1);

1
2
//prepare string for profile box

3
$text= ('

4
<style type="text/css">

5
 h1{ margin: 10px; font-size: 24pt; }

6
 h2{ margin: 15px; font-size: 20pt; }

7


8
</style>

9
');
10
11
$text.=('<h2>'. $quotes[$i] .'</h2>');
12
13
14
//set profile text

15
$facebook->api_client->profile_setFBML($text, $user_id);

Vedd észre, hogy két dolgot csináltam itt: újranyomtattam a CSS-t és mindent egy $text nevű stringbe pakoltam. Ez azért kellett, mert a függvény, ami beállítja az adatlapi box szövegét, a profile_setFBML-t, két argumentumot kap; a szöveget, ami az adatlapi boxba kerül és a felhasználó id-jét. A vászon oldalon definiált CSS nem kerül bele az adatlapba, így hozzá kell adnunk azt az első argumentumhoz. A végeredmény ez lesz:

Ennyi!

Nyilvánvalóan csak a felszínét kapargattuk annak, amire a Facebook alkalmazás-fejlesztők képesek. Ugyanakkor a Wikivel és az API kulccsal együtt megkapott Facebook erőforrásokkal jó úton vagy afelé, hogy létrehozd a következő nagy alkalmazást! Ha szeretnéd ezt az alkalmazást megnézni teljes pompájában, akkor menj ide, már amennyiben van egy Facebook-fiókod.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.