Az okleveles alkalmazások lelke: publish_stream – Fejlesszünk saját Facebook alkalmazást

Közzétéve: 2012. február 08.

Az előző két részben megnéztük, hogyan tudunk kiolvasni adatokat Facebookról, most azt fogjuk kipróbálni, hogyan tudunk küldeni neki.

Mielőtt belemennénk a részletekbe, szeretném kiemelni, hogy a leírás célja nem az, hogy tovább szaporodjanak a jelenleg elég nagy népszerűségnek örvednő, a felhasználó falára oklevelet postoló alkalmazások. Éppen ellenkezőleg. Picit szeretnénk ezek értékét csökkenteni azzal, hogy leírjuk a képfeltöltéshez szükséges folyamatot.

Alapok

Hozzunk létre egy új alkalmazást és adjuk hozzá egy oldalunkhoz. Ehhez a részletes leírás megtalálható a sorozat első részében. Szükségünk lesz a szokásos index.php-re, illetve a Facebook php sdk base_facebook.php és facebook.php állományaira. Hozzunk létre továbbá egy 500x500px-es képet (jpeg, gif vagy png formátumban), ez lesz az oklevelünk, amit a falra postolunk, így a tartalmát ennek megfelelően határozzuk meg.

Az alap kód

A kódunk a második részben bemutatotthoz elég hasonló lesz, azzal a különbséggel, hogy most nem a felhasználó email címéhez kérünk hozzáférési jogosultságot, hanem a falára postoláshoz.

[php]
<?php
ob_start();
require "facebook.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("https://www.facebook.com/…"); //ide kerül a tab URL
$scope = "publish_stream";
$auth_url = "http://www.facebook.com/dialog/oauth?client_id=" . $app_id . "&redirect_uri=" . $redirect_url . "&scope=" . $scope;
echo("<script> top.location.href=’" . $auth_url . "'</script>");
} else {
//engedélyezte az alkalmazást
//jelenítsünk meg egy gombot, aminek a segítségével postolhat a falára
}
} 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 fenti kód a korábbi részekben ismertetett folyamatokat tartalmaz, kiegészítve a publish_stream (falra posztolás) engedélyének elkérésével.

Kép postolása a falra

Mivel nem szeretnénk, hogy az alkalmazásunk egyből a megnyitásakor képet töltsön fel a felhasználó hírfolyamába, ezt az eseményt egy gomb megnyomásával kötjük össze. A hírfolyamba történő postoláshoz azonban szükségünk lesz egy “kulcsra” (access_token), aminek a lekéréséhez a következő módosításokat kell elvégezni a kódunkban:
$has_liked = $data[“page”][“liked”]; után írjuk be a következő sorokat:

[php]
$facebook = new Facebook(array(
‘appId’ => ‘APP ID’, //ide a saját APP ID-t írjuk
‘secret’ => ‘APP SECRET’, //ide a saját APP SECRET-et írjuk
‘cookie’ => true,
‘fileUpload’ => true //képfeltöltéshez szükséges
));
[/php]

Ha ez kész, a “//jelenítsünk meg egy gombot, aminek a segítségével postolhat a falára” megjegyzés után egészítsük ki a forrást a következő sorokkal:

[php]
$access_token = $facebook->getAccessToken();
?>
<form method="post" action="">
<input type="hidden" name="access_token" value="<?php echo $access_token; ?>" />
<input type="submit" name="post_img_to_wall" value="Kép feltöltése a hírfolyamomba" />
</form>
<?php
[/php]

Ezt követően térjünk vissza a kódunk elejére és az if($has_liked){ sor elé gépeljük a következőket:

[php]
if($_POST[‘post_img_to_wall’] && $_POST[‘access_token’]){
$current_access_token = $_POST[‘access_token’];
try {
//kép postolása az adott felhasználó fotói közé
//a meghatározott képaláírással
//az alkalmazás automatikusa létrehoz egy albumot
//ez az album az app neve alapján fog létrejönni
//az így feltöltött kép kerül ki a hírfolyamba
$img = "besocial.jpg"; //a kép, amit fel szeretnénk tölteni a falra, az index.php mellé kerüljön
$caption = "Ez a szöveg a kép alá fog kerülni";
//kép feltöltése a hírfolyamba
$facebook->api("/me/photos", "post", array(‘message’ =>$caption, ‘source’ => ‘@’.$img, "access_token"=>$current_access_token));
echo "Sikeres küldés";
} catch (FacebookApiException $e) {
//nem sikerült a küldés
error_log($e);
}
exit();
}
[/php]

Ebben a részben kezeljük le azt az eseményt, amikor a felhasználó megnyomta a falra postolást elindító gombot, valamint a konkrét képfeltöltési folyamat is itt megy végbe.

A teljes kódunk így fog kinézni:

[php]
<?php
ob_start();
require "facebook.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"];
$facebook = new Facebook(array(
‘appId’ => ‘APP ID’, //ide a saját APP ID-t írjuk
‘secret’ => ‘APP SECRET’, //ide a saját APP SECRET-et írjuk
‘cookie’ => true,
‘fileUpload’ => true //képfeltöltéshez szükséges
));
if($_POST[‘post_img_to_wall’] && $_POST[‘access_token’]){
$current_access_token = $_POST[‘access_token’];
try {
//kép postolása az adott felhasználó fotói közé
//a meghatározott képaláírással
//az alkalmazás automatikusa létrehoz egy albumot
//ez az album az app neve alapján fog létrejönni
//az így feltöltött kép kerül ki a hírfolyamba
$img = "besocial.jpg"; //a kép, amit fel szeretnénk tölteni a falra, az index.php mellé kerüljön
$caption = "Ez a szöveg a kép alá fog kerülni";
//kép feltöltése a hírfolyamba
$facebook->api("/me/photos", "post", array(‘message’ =>$caption, ‘source’ => ‘@’.$img, "access_token"=>$current_access_token));
echo "Sikeres küldés";
} catch (FacebookApiException $e) {
//nem sikerült a küldés
error_log($e);
}
exit();
}
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("https://www.facebook.com/…"); //ide kerül a tab URL
$scope = "publish_stream";
$auth_url = "http://www.facebook.com/dialog/oauth?client_id=" . $app_id . "&redirect_uri=" . $redirect_url . "&scope=" . $scope;
echo("<script> top.location.href=’" . $auth_url . "'</script>");
} else {
//engedélyezte az alkalmazást
//jelenítsünk meg egy gombot, aminek a segítségével postolhat a falára
$access_token = $facebook->getAccessToken();
?>
<form method="post" action="">
<input type="hidden" name="access_token" value="<?php echo $access_token; ?>" />
<input type="submit" name="post_img_to_wall" value="Kép feltöltése a hírfolyamomba" />
</form>
<?php
}
} 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]

Mentsük el a módosításokat és frissítsük a fileokat a szerverünkön. Ha mindent jól csináltunk, az alkalmazás engedélyezése közben meg kell jelennie egy második képernyőnek is, ahol a falra postoláshoz adhatunk jogot:

Az engedélyezést követően a tabunkon valami hasonlót kell látnunk:

Amikor ezt megnyomjuk, a tabunk újratöltődik, (ideális esetben) megjelenik a Sikeres küldés felirat és a hírfolyamunkban a feltöltött kép:

Az albumaink között pedig találhatunk egyet, ami az alkalmazásunk nevével (+ Photos) jött létre és a feltöltött képet tartalmazza. Ha újra megnyomjuk a gombot, a következő fotó is ebbe fog bekerülni.

Természetesen egy igazi okleveles alkalmazás ennél többet tud, (felhasználó nevének ráírása a képre, profilkép rámásolása, stb) de ezeknek a funkcióknak a kialakítása inkább php, mint Facebook alkalmazáskészítési ismereteket igényel.

A bejegyzésben használt kódok és oklevél letölthető a következő hivatkozásra kattintva: Saját Facebook alkalmazás – publish_stream

Bízunk benne, hogy sikerrel tudjátok hasznosítani majd a cikksorozatunkban leírtakat. Ha összeraktátok az első oklevélküldő alkalmazásotokat mutassátok meg nekünk is, kíváncsiak vagyunk! És a tudást csak jóra használjátok, ne spam-eljetek! 😉
Ha pedig nem akartok bajlódni a kódolással, kérjetek ajánlatot tőlünk, elkészítjük a saját kvízjátékotokat Nektek! Katt ide!

A sorozat további részei:

Fejlesszünk saját Facebook alkalmazást – AlapokAlkalmazás engedélyek (permissions)