Başlangıç > Dökümanlar > Facebook application yapımı

Facebook application yapımı

İnternette bu konu hakkında Türkçe döküman sıkıntısı olduğunu gördüm. Facebook’un sayfasından kopyalanıp çevrilmiş dökümanlar yada anlatım eksikliği olan dökümanlar gözüme çarptı. Bu sebeple temel bir Facebook application’ın nasıl yaratılacağına dair bir döküman yazmak istedim. Mantığı bir kez kavradıktan sonra web programcısı için facebook uygulamaları yaratmak çocuk oyuncağı olacaktır.

Öncelikle bize php5 destekli bir host lazım. Php4 üstündede çalışma imkanı var. Fakat denemedim. O iş biraz daha teferruatlı. Ekstra şeyler yapmanız gerekiyor.

Ayrıca veritabanına kayıt yapacaksak ise mysql’de lazım.

Basit bir şekilde adım adım anlatmaya başlayalım;

Öncelikle Facebook’da profilimize giriyoruz ve “Facebook Developer” uygulamasını ekliyoruz. Ekledikten sonra sol menüde çıkan develepera tıklayarak

uygulamaya girdikten sonra sağ üst köşedeki “Set up new application” a basıyoruz.

Karşınıza Facebook uygulamanıza hangi ismi vereceğinizi belirleyeceğiniz form gelecek. Dilediğiniz bir ismi verin ve kullanım şartını onaylayarak uygulamanızı

Yaratın. Örn “deneme”

Uygulamamızı yaratmış olduk. Resimde görüldüğü üzere sadece bize ait olan bir “Api Key” ve “Secret” verilmiş oldu. Bunlar Facebook’un uygulamamızın güvenliği için uyguladığı kullanıcı adı ve şifre gibi birşey denilebilir.

Ardından “Edit Settings” e girerek uygulamamızla ilgili ayarlamaları yapmaya başlıyoruz. Optional fields kapalı ise tıklayarak açtıktan sonra “Callback URL”
bölümüne uygulamamızı barındırdığımız adresi yazıyoruz. Örn “http://www.alpgulec.com/facebook/”

“Canvas Page URL”ye ise Facabook’da uygulamamızın kullanacağı dizinin adını yazıyoruz. Örn http://apps.facebook.com/deneme

Ardından FBML’i seçiyoruz. FBML’i seçmemiz bizim için daha avantajlı ve kolay olmakta. FBML Facebook Markup Language oluyor.

FBML HTML gibi birşey. FBML’in Facebook’da kullanabileceğiniz kendine özgü tagları var ve güvenlik açısından sıkıntı yaratmayacak

HTML taglarınıda bünyesinde barındırmakta. Facebook’da sayfalarımızı FBML kurallarına göre oluşturuyoruz.

Kullanıcı uygulamayı ekledikten sonra güncelleyene kadar uygulama kutusunda uygulamanın arayüzü değişmeksizin aynı kalıyor. Dinamikleştirmek için

kullanılan bir yöntem var. Fakat temelde statik bir yapı düşünülmüş. Kullanıcı uygulamayı eklediğinde oluşturulan FBML kodu kaydediliyor ve

Güncellenene kadar hep aynı kalıyor. Örneğin Facebook’da bir takvim uygulaması yaptıysanız. Kullanıcı bunu Pazartesi günü güncellediyse o uygulama

güncellenene kadar hergün Pazartesi yazar. Başka bir kişi Çarşamba güncellediyse ondada Çarşamba yazar. FBML hakkında ayrıntılı bilgiyi

http://wiki.developers.facebook.com/index.php/FBML adresinde bulabilirsiniz.

Formu doldurmaya devam edersek “Website” ı seçiyoruz. Uygulamamızın eklenebilmesi için “Can your application be added on Facebook”’u Yes olarak seçtikten

sonra Installion Options’a geçiyoruz.

“Who can add your application to their Facebook account?” bölümünde “Users” a tick koyup daha sonra Facebook sayfalarına eklenip eklenemeyeceğini belirliyoruz.

“No pages” yaparak o kısmı geçiyoruz.

Hemen altında “Post-Add URL” var. Buranın anlamı kullanıcı uygulamamızı ilk eklediğinde hangi adrese yönlendirileceği.

Örn http://apps.facebook.com/deneme/index.php?yenikullanici=true

“Application Description” a uygulamamızın tanıtımını kafamıza göre yazıyoruz ve “Post-Remove URL” ye geçiyoruz.

Bu da uygulamamızı kimin kaldırdığını anlamamızı sağlıyor. Uygulama kaldırıldığında kullanıcı ilk eklendiğindeki gibi o sayfaya

yönlendirilmiyor. Facebook tarafından otomatik olarak bize kaldıran kullanıcıyla ilgili gerekli bilgiler gönderiliyor. Buraya

sitemizin direk yolunu yazmak zorundayız.

Örn http://www.alpgulec.com/facebook/index.php?silindi=true

Altına geçtiğimizde “Default FBML” bölümünü görüyoruz. Kullanıcı eğer uygulamamızı profiline eklemişse fakat sitemizdeki uygulama sayfamızdan

FBML kodlarını elde edemişse(sitede aksaklık vs olabilir) standart olarak uygulama kutusunda gözükmesini istediğimiz FBML kodlarını, yazıları buraya yazıyoruz.

“Default Profile Box Colum” a geçtiğimizde “Wide” ve “Narrow” adında iki seçenecek görüyoruz. “Wide” ı seçersek uygulamamız eklendiğinde standart olarak

Sağdaki geniş alana yerleşiyor. “Narrow” seçili isede soldaki dar alana. Uygulamamızın görünümüne göre en uygun olanı belirleyip seçiyoruz.

Alttaki “Developer Mode” u da eğer sadece uygulama geliştiricilerinin eklemesini istiyorsak seçebiliriz.

Son olarakta “Side Nav URL” ye uygulamamız eklendiğinde kullanıcıların sol menüsünde çıkan linkin nereye yönleneceğini belirliyoruz.

Örn http://apps.facebook.com/deneme

Burası şimdilik bu kadar save’e basıyoruz ve sıradaki adımlara geçiyoruz.

İşin facebook tarafından sonra şimdi geldik bizim tarafımıza;

http://developers.facebook.com adresi sık sık işinize yarayacak. Daha fazla bilgi için buraya gözatabilirsiniz.
http://developers.facebook.com/documentation.php bölümünden Facebook apileri, FQL ve FBML hakkında kaynaklara ulaşabilirsiniz.

Facebook apileri kişi listesi alma,fql sorgulama,uygulama kutusunun FBML kodunu değiştirme gibi işlere yarıyor. Yani Facebook’un bize sunduğu fonksiyonlar.

FQL ise SQL’in Facebook’da ki yüzü diyebiliriz. Size kullanıcıların bilgilerini sorgulayabileceğiniz tablo isimleri, sütun isimleri vs verilmiş ve siz bunları

kullanarak kolayca bilgileri elde edebiliyorsunuz.

FBML’den ise yukarıda bahsetmiştim.

Ayrıca http://developers.facebook.com/tools.php adresinde yazdığınız FBML, FQL kodlarını ve Facebook apilerini kolay bir şekilde deneme imkanına sahipsiniz.

Şimdi sıradaki adıma geçiyoruz ve http://developers.facebook.com/clientlibs/facebook-platform.tar.gz adresinden bize gerekli olan Facebook kütüphane

dosyalarını indiriyoruz.

İçinde 3 klasör olacak.

-php4client (php4 için gerekli dosyalar)

-footprints (Örnek uygulama)

-client (Bizim işimize yarayacak sadece bu klasör)

Client klasörü hariç diğerleri bizim için gerekli değil. Client klasörü içerisinde 3 dosya olacak.

– facebook.php
– facebookapi_php5_restlib.php
– facebook_desktop.php

Uygulama dosyalarımızda include edeceğimiz bir dosyada biz hazırlıyoruz. Bu Facebook tarafından hazır bir şekilde sunulmuş bir örnek dilerseniz

farklı yollarıda deneyebilirsiniz. “appinclude.php” adında bir dosya yaratıp içine aşağıdaki kodları kopyalıyoruz. Bu sayede application anahtarlarımız

ve bazı bilgi ve işlemler tek dosyada oluyor. İşlerimiz daha kolay hal alıyor.

<?php 

require_once ‘facebook.php’;

// Yukarıda uygulamamızı yarattığımızda bize verilen apikeyi ve secret anahtar değerlerini aşağıya yazıyoruz.

$appapikey = ‘uygulamamızın apikeyi’;

$appsecret = ‘uygulamamızın secretkeyi’;

$facebook = new Facebook($appapikey, $appsecret);

$user = $facebook->require_login();

// Yukarıda Callback URL’ye yazdığmız adresi alta yazıyoruz

$appcallbackurl = ‘uygulamamızı koyduğumuz adres’;

try {

if (!$facebook->api_client->users_isAppAdded()) {

$facebook->redirect($facebook->get_add_url());

}

}

catch (Exception $ex) {

$facebook->set_user(null, null);

$facebook->redirect($appcallbackurl);
}

Yukarıdaki kodları yazdıktan sonra kaydediyoruz ve nihayet kendi uygulamamızı yazma konumuna geliyoruz.

Bu uygulamamızda uygulamayı ekleyen kişiyi selamlayan basit bir örnek yazacağız.

Fakat içerisinde Facebook api, FBML, FQL ve bazı faydalı Facebook özelliklerini gösteren en temel ve gerekli şeyleride göstermeyi unutmadım. Bunları anladığınız

takdirde gerisi zaten çok kolay gelecektir.

<?php 

require_once ‘appinclude.php’;     // Az önce yarattığımız genel dosyamızı include ediyoruz.

$uidno=$facebook->api_client->users_getLoggedInUser(); // Bizim facebook idmizi veren api

$kullanici=$facebook->api_client->fql_query(“select name from user where uid=”.$uidno); //Burada örnek fql görüyoruz. Facebook idmize göre ismimizi user

// tablosundan seçiyor.

$fbml.=”<fb:wide><center><b>Merhaba “.$kullanici[0][name].”</b></center>”;     //Evet burada da FBML koduna örnek görüyoruz. “<fb:wide>” ın anlamı

// sadece uygulama kutusu sağ tarafa taşınınca gösterilen kısımlardır. Ayrıca burada izin verilen html kodlarınıda kullandık ve kullanıcı selamladık.

$fbml.=”</fb:wide><fb:narrow><b><center>Uygulamayi sag bolmeye tasiyiniz.</center></b></fb:narrow>”; // Buradada sağ tarafta gösterilecek kısmı

// kapattık. Eğer uygulama sol tarafa taşınırsa gösterilmesini istemedik ve “<fb:narrow>” tagları içerisine aldık ve uyarı koyduk.

$fbml.=”<fb:subtitle><fb:action href=’http://apps.facebook.com/deneme/invite.php’>Davet Et</fb:action><fb:action href=’http://apps.facebook.com/deneme’>Güncelle</fb:action&gt;
</fb:subtitle>”; //Bunlarda uygulama kutusunun sağ üstünde gözüken Güncelle ve

// davet et linklerinin nasıl yaratıldığını gösteren uygulama. Gördüğünüz üzere Türkçe karakterlerde sıkıntı yaşanıyor. Bunu aşmak içinde utf-8 karakter seti kodlarını

// kullanmamız lazım. Aşağıdaki linkten özel karakterlerin karşılıklarına ulaşabilirsiniz.

// http://www.tony-franks.co.uk/UTF-8.htm

$facebook->api_client->profile_setFBML(NULL,$user,$fbml,$profile_action,NULL); // Yukarıda gördüğünüz üzere hepsini fbml adında kendi yarattığımız

// bir değişkenin içerisine kolaylık olsun diye parça parça yazdık. Son olarak setFBML apisi ile uygulama kutusunun FBML kodunu değiştiriyoruz.

$facebook->redirect($facebook->get_facebook_url() . ‘/profile.php’); // Gerekli olan tüm kodları çalıştırdık son olarak profilimize yönleniyoruz.
?>

Bunu index.php olarak kaydediyoruz ve yukarıda gördüğünüz üzere birde davet etmekten bahsettim. Davet etmek için kullanılan örnek kod facebook tarafından

zaten sunulmuş. Onuda aşağıdan kopyalayıp invite.php olarak kaydediniz.

<?php 

require_once ‘appinclude.php’;

$query=”SELECT uid FROM user WHERE has_added_app = 1 and uid in (SELECT uid2 FROM friend WHERE uid1=”.$user.”)”;

$rs = $facebook->api_client->fql_query($query);

$arFriends=””;

if ($rs) {

for ( $i = 0; $i < count($rs); $i++ )

{

if ( $arFriends != “” )

$arFriends .= “,”;

$arFriends .= $rs[$i][“uid”];

}

}

$sNextUrl = urlencode(“&refuid=”.$user);

$invfbml = <<<FBML

UYGULAMA ADI Uygulamasi

<fb:name uid=”$user” firstnameonly=”true” shownetwork=”false”/> tarafindan size yollandi.

<fb:req-choice url=”http://www.facebook.com/add.php?api_key=$appapikey&next=$sNextUrl&#8221; label=”Ekle” />

FBML;

?>

<fb:request-form type=”UYGULAMA ADI” method=”POST” action=”?c=skipped” content=”<?php echo htmlentities($invfbml) ?>” invite=”true”>

<fb:multi-friend-selector max=”20″ actiontext=”UYGULAMA ADI uygulamasini arkadaslariniza gondererek haberdar olmalarini saglayabilirsiniz.” showborder=”false” rows=”5″ exclude_ids=”<?php echo $arFriends ?>” />
</fb:request-form>

Davet etme kısmını da hallettikten sonra elimizde olan 6 dosyayı Örn http://www.alpgulec.com/facebook klasörünün içine

– facebook.php
– facebookapi_php5_restlib.php
– facebook_desktop.php
– invite.php
– appinclude.php
– index.php

yukarıdaki dosyaları upload ediyoruz ve uygulamamız hazır hale geliyor. Geliştirmesi size kalmış.

Kaynak: Alp GÜLEÇ

Reklamlar
  1. emre
    25/10/2010, 10:09

    Sonunda düzgün ve detaylı bir döküman yayınlandı. Bu konuda neredeyse 1 aydır bir örnek arıyordum ve resmen ilaç gibi geldi. Elinize sağlık çok teşekkürler 🙂

    Beğen

  2. ilker
    16/01/2011, 20:07

    Alp Bey,
    Emeğinize sağlık. Çok faydalı oldu. İyi çalışmalar.

    Beğen

  3. 27/01/2011, 22:22

    merhaba alp bey,
    makaleniz diğerlerine göre oldukça açıklayıcı ve faydalı. ancak sizinde makalede tarif edilen 3 adet, invite,index,appinclude dışındaki diğer php dosyaları eksik. bunlara nereden ulaşacağız ? teşekkürler yardımlarınız için..

    Beğen

  4. 06/03/2011, 02:16

    teşekkürler güzel anlatım

    Beğen

  5. tuncay
    19/03/2011, 23:33

    Sadece şunu söylemem gerekiyor burda yapılan güzel yorumların cok daha fazlasını hak ediyorsunuz.Bilgi paylaştıkça güzelleşir…Yüreğinize emeğinize sağlık… Fakat ufak bir ricam olacak… Paylaştığınız yazıyı sonuna kadar okudum yinede bir sorum olacak bunları yaptığımda default olarak mı atıyor bilmiyorum ama sorum şu… Ben bunu yaptığımda uygulamayı kabul eden kişilerin profil sayfasında benim uygulamada yaptığı şeyi gösterecek mi… umarım bu paylaşımın üzerine buna cevapta verirseniz cok sevinirim …

    saygılarımla …

    Beğen

  1. No trackbacks yet.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: