Facebook örnek uygulama

24 Kas 2007

Etiketler: ajax > facebook > php

Evde boş boş durmaktan can sıkıntısına arkadaşımın birinin dürtüklemesiyle dedim hadi bir facebook app’ ide ben geliştireyim. Sonunda ortaya Unutulmaz Anlarım adında bir uygulama çıktı.

Bu Facebok uygulaması denen şey nedir ne değildir arkadaşım Altuğ şu bildirisinde anlatmış temel bilgileri öğrenmek isteyenler önce orayı okusunlar ilk olarak.

Öncelikle uygulamanın amacından bahsedeyim.

Uygulamayı ekleyen kullanıcılar foto albümlerinden yada taglanmış resimlerinden birisini seçer.

daha sonra seçtiği bu resimin neden unutulmaz olduğunu belirtir ,

bu bilgiler database e kaydedilir ve uygulamamızı arkadaşlarımızla paylaşabilmemiz için davet yollama sayfasına gider.

Bu bilgiler girildikten sonra uygulamamız profilimizde görüntülenmeye başlar .

Öncelikle küçük bir uyarıda bulunayım. Kodlar çok dağınık. Yol göstermek amaçlı can sıkıntısına yazılmış kodlar kullanırken ona göre kullanın. Kodların içinde değiştirmeniz gereken alanlarıda unutmayın yoksa benim uygulamama yönlendirilirsiniz.

Şimdi gelelim nası yapacağımıza. 6 adet dosyamız var. Buradan buyrun dosyalar için : facebook.rar

• config.php (api key ve db bilgileri tutuluyor)
• lib.php (kullanacağımız fonksiyonları tutuyor)
• index.php (uygulama anasayfası)
• isle.php (ilk girişte kullanılan resime yorum girme sayfası)
• neden.php (resmimizin yorumunu değiştirebilmek için )
• davet.php (profil kutusunu set etmek ve davet yollamak için)

Kısa bir özetle başlayalım: Kullanıcı uygulamayı ekledikten sonra index.php ye gelip bir resim seçiyor , resmin id si ile isle.php ye yönlenip bir yorum giriyor ve davet.php ile profilini set edip uygulamayı arkadaşlarıyla paylaşıyor. Daha sonra resim ile ilgili yorumu değiştirmek isterse index ten neden unutulmaza tıkladığında neden.php ye gidiyor ve yorumu güncelliyor. Kullanıcı index te hiç bir resim seçmez ise otomatik olarak profiline profil resmi ekleniyor.
Öncelike database imizde şöyle bir tablo oluşturuyoruz.

CREATE TABLE IF NOT EXISTS `unutulmaz` (
 
`id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
 
`kisi_id` bigint(30) UNSIGNED NOT NULL,
 
`resim_id` bigint(30) UNSIGNED NOT NULL,
 
`yorum` varchar(300) character SET latin1 DEFAULT NULL,
 
PRIMARY KEY  (`id`)
 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_turkish_ci

Config.php:

config dosyası ile gerekli database ve facebook ayarlarını yaptık. lib.php dosyası ile de uygulamamızda kullanacağımız fonksiyonlarımızı yazacağız.

lib.php:

Önce gerekli dosyalarımız include ettik ki burada facebook.php “api” oluyor. Daha sonra api ve secret keylerimizi kullanarak objemizi yarattık ve database bağlantısı için kullanacağımız fonksiyonu yazdık.

Sırasıyla fonksiyonların amacları ve nasıl çalıştıkları:

• get_id($user) = db’den resmin id’sini çekmek
• get_yor($user) = resmin yorumunu çekmek
• ins_id($user,$pid,$yorum) = db ye kullanıcı ve resim id’lerini ve yorumu girmek
• resim_id($user,$yorum) = kullanıcının yorumunu güncellemek (evet farkındayım fonksiyon ismi yaptığı işle alakasız olmuş cık cık cık kötü programlama )
• del_id($user) = kullanıcıyı db den silmek. not: bu fonksiyonun bi yerlerde kullanılıp kullanılmadığını büyük ihtimal yazının sonuna kadar hatırlayamayacağım.
• get_fotos($y) = bu fonksiyon seçilmiş albümdeki resimleri bir tablo içinde uygulama anasayfasına basar , kullanıcı da oradan istediği resmi seçer. ilk olarak anasayfada secilmiş olan albümün id sini alır ve api yardımı ile o albüme ait olan tüm fotoları bir array a atar. $b=$facebook->api_client->photos_get(’ ‘,$y,’ ‘); buradaki $b fotoların array i $y ise anasayfada seçilmiş albümün id sidir. facebook un bize döndürdüğü array deki değerlerden sadece ikisine ihtiyacımız var “pid” ve “src_small” . <img border=”0″ src=”‘.$b[$say][src_small].’” > Bu şekilde resmin küçük boyutlu olan linkini çekiyor ve ekrana bastırıyoruz. Resmin gideceği adres de <a href=”isle.php?res_id=’.$b[$say][pid].’”> bu şekilde olacak ve isle.php ye resmin id sini yollayacak.
• get_tags($y) = diyelimki uygulamayı yükleyen kişinin hiç albümü yok o zaman bir önceki fonsiyon “hiç albümünüz yoktur” mesajı verir ve uygulamanın bir amacı kalmaz. Bu sebebten varsa “tag” lı resimlerini ekrana basmak mantıklı olacaktır. Bu fonksiyonun çalışma mantığı üstteki ile aynıdır tek farkı $b=$facebook->api_client->photos_get($y,’ ‘,’ ‘); burada da görüldüğü gibi photos_get için ilk parametreyi kullanır . Kullanımı şu şekildedir ve parametrelerden en azından biri kullanılmalıdır yoksa acı bir hata mesajı ile karşılaşırsınız. photos_get(’user_id’,'album_id’,'resim_id’)

index.php:

Dosyanın en tepesinde bulunan:

if (isset($_REQUEST['action'])) {
 
get_fotos($_REQUEST['option']);
 
}

kodu sayfanın içinde albüm seçimi yaparken kullanınlan ajax sorgusu için. Aklınızda olsun bu kodu sayfanın daha aşağılarına yazarsanız çalışmaz. Dropdown da bulunan albümlere göre resimleri basar. Ardından bir session yaratılır bu session ın amacı isle.php ye index.php den baska bir yerden girilirse tekrar bu sayfaya yönlendirilmesini sağlamaktır.

$url=$facebook->get_add_url(); ile uygulamamızın eklenebilmesini sağlayan bağlantı adresini ayarlıyoruz ve sonra uygulamanın kullanıcıda ekli olup olmadığını kontrol ediyoruz eğer ekli değil ise anasayfayı göremeden bu adrese yönlendiriliyor uygulamayı ekliyor ve tekrar anasayfaya dönüyor.

Uygulamayı ekleyen kullanıcılar eğer bir resim seçmeden sistemden çıkarsa profillerinde uygulamaya dair hiç birşey gözükmeyecektir; bunu önleyebilmek için db mizde kullanıcının kaydı olup olmadığını kontrol ediyoruz eğer kaydı yok ise default bir profil kutusu yaratıyoruz. $fbml= <<<EndHereDoc . .. .. .. EndHereDoc; arasında kalan satırlar profilde görünecek kısımdır. <fb:subtitle> tagi profil kutusunun altına gri bir alan ekler biz buraya resmini güncellemek isteyen kullanıcılar için uygulama anasayfasına giden bir kısayol yerleştirdik. Devamında profil kutusunun stilini ayarladık ve kullanıcının profil resminin görüntülenmesini sağladık <fb:profile-pic uid=”$user” size=’square’ linked=”true” /> resmin görüntülenmesi için kullandığımız bu tagdaki $user değişkeni o an facebook a login olmuş kullanıcının id sini içerir , size olarak kare olmasını tercih ettik ve tıklandığı zaman kullanıcının profiline gitmesi için linked=true dedik. $facebook->api_client->profile_setFBML($fbml, $user); satırı ile default profil kutusunu set etmiş olduk artık kullanıcı kendisi bir resim seçmeden sayfadan çıksa bile profili hazırlanmış oldu.

$callbackurl ajax sorgusunun hangi adrese yapılacağını belirtiyor, buraya dosyalarınızı yüklediğiniz kendi adresinizi yazmanız gerekiyor facebook application adresini kullanmıyoruz.

$_SESSION[’count’] = 5; buradaki değer tamamen keyfi bir değerdir yukarıdada belirttiğim gibi isle.php ye sadece index.php den ulaşılması için set edilmiş bir değerdir isle.php de kontrol edilir.

<fb:dashboard> sayfanın en tepesinde görünen kısımı oluşturur , oraya bir help linki koyarak kullanıcıların uygulamanın tanıtım sayfasına gidebilmelerini sağlıyoruz.

<fb:tabs> dashboardun altında navigasyon için bize tablar oluşturuyor. Bu tagın içine <fb:tab-item tagını kullanrak tablarımızı ekliyoruz seçili olanı belirtmek içinde selected=’true’ parametresini kullanıyoruz.

Stilleri tembellikten direk olarak dosyaların içine gömdüm sebebi ise facebook css dosyalarını dahil etmemize kolay kolay izin vermiyor , php ile dosyayı açtırıp öyle kullanmak gerekiyor. Dediğim gibi zor geldi o yüzden böyle kullandım siz css kullanarak da yapabilirsiniz.

Albümleri almak için aşağıdaki kodu kullanıyoruz

<select id=”state” onchange=”do_ajax(’actionDiv’);return false;”><?
$a = $facebook->api_client->photos_getAlbums(”,”);
if ($a!=null) {
$o=count($a)-1;
$y=$a[$o][aid];
while($o>=0)
{
echo ‘<option value=”‘.$a[$o][aid].’”>’.$a[$o][name].’</option>’;
$o–;
}
echo ‘</select>’; } else { echo ‘<option value=”yok”>Yok</option></select>’; }

$a değişkeni kullanıcının bütün albümlerini barındıran bir array. Bu arrayi kullanarak ajax dropdown kutumuzu dolduruyoruz , her albüm seçişimizde ajax sayfayı yenileyip yeni içeriği basıyor. Ben biraz ters adam olduğum için burda gereğinden fazla kod var . Facebooktan albümleri istediğimiz zaman bize en son açılan albümden en eskisine doğru giden bir array veriyor bende eski albümlerimi önce görmek istediğim için $o da görüldüğü üzere tersten bastırıyorum. Her albüm ismine değer olarak albümün id sini veriyor böylece ekrana o albüme ait olan foto ları bastırıyoruz. Albümlerin boş olması durumuna karşı albümlerin ardından tag li resimler basılıyor.

index.php de son olarak ajax scriptimiz bulunuyor . Bu scripti ben yazmadım facebook wikilerinde yada developer forumlarında gezerken buldum . Tam adresini hatırlamıyorum aklıma gelince ekleyeceğim. Bu scripte iki satır eklemiştim. İlki var val=document.getElementById(’state’).getValue(); burda dropdowndan gelen değerin val değişkenine atanması sağlanıyor , böylece yeni değer ile ilk başta bahsettiğim kodu kullanarak resimleri yeniliyor. document.getElementById(’dum’).style.display = ‘none’; bu satırla da sayfa ilk açıldığı zaman default olarak ekrana basılmış albümün olduğu div in , albümü değiştirdikten sonra görünmesini engelliyoruz.

isle.php ve neden.php:

Kullanıcı index.php yi kullanarak seçtiği resime tıklayınca isle.php ye yönledirilir ve resim id sini yollar. İlk olarak session kontrol edilir eğer set edilmemişse index e yönlendirir eğer bir şekilde resim id si de yollanmamışsa yine index e yönlendirir. Yönlendirme için <fb:redirect tag ı kullanılır. Evet şimdi gördüm ki lib.php de belirttiğim ve neden orda olduğunu hatırlayamadığım del_id() fonksiyonu burada kullanılıyor. Bu fonksiyonun kullanılma sebebi yine tembellik. Kullanıcının daha önceden seçtiği bir resim var ise yani profili için önceden zaten bir resim seçip yorum yazdı ise bu resimi değiştirmek istediği zaman , üşendiğim için update ettirmek yerine direk kullanıcıyı db den siliyorum nasılsa bir sonraki sayfada insert ler var diyorum bir de önceden varmıydı yokmuydu kontrolü yapıp update le uğraşmıyorum. Siz kendi uygulamanızı yaparken daha düzgün kodlarsınız artık.

Kullanıcı varsa sildikten sonra standart sayfa yapımızı oluşturup index.php den gelen resim id mizi - $b = $facebook->api_client->photos_get(”,”,$x); echo $b[0][src_small]; - kullanarak ekrana resmimizi bastırıyoruz. Bunun altına bu resmin neden unutulmaz olduğunu yazabilmek için <fb:editor action=”davet.php” labelwidth=”10″> tag ını kullanıp input box ve buton ekliyoruz. fb:editor kısaca html deki form la aynı mantıkla çalışıyor. Bir form oluşturuyor gideceği adresi belirliyor ,<fb:editor-text label=”Çünkü” name=”yorum” value=”"/> input box ı koyuyor , <fb:editor-buttonset><fb:editor-button value=”Ekle”/></fb:editor-buttonset> butonu yerleştiriyor ve formu kapatıyor </fb:editor> ; methot olarak post kullanıyor. Burada iki tane de hidden input koyduk bunun sebeb ise kullanıcıyı silip yeniden bir kullanıcı yaratacağımızı belirtmek bir sonraki adıma. Neden.php ile isle.php hemen hemen aynı. Aralarındaki fark neden.php index ten gelirken kullanıcıyı silmiyor. Yorumu update etmek için kullanılıyor bundan ötürü hidden input olarak “yeni” değeri gitmiyor.

davet.php:

Burada ilk yapılan işlem kullanıcının isle.php den mi yoksa neden.php den mi geldiğini öğrenmek. hidden inputları kullanarak bu ayrımı yaptıktan sonra eğer isle den geldi ise ins_id() ile db ye yeni bir kayıt ekliyor ; eğer neden den geldi ise up_id() ile yorum u güncelliyor. $fbml mantığı index teki ile aynı. Ekstra dan eğer yorum güncellendi ise mini feed için bir mesaj hazırlanıyor.

$title_template=’{actor} unutulmaz <fb:if-multiple-actors>anlarını güncellediler.<fb:else>anını güncelledi.</fb:else></fb:if-multiple-actors><a href=”http://apps.facebook.com/onlineliste/”>Sizde güncelleyin !</a>’ ;
$facebook->api_client->feed_publishTemplatizedAction($user,$title_template,”,”,”,”);

actor tagı kullanıcın kendi ismini yazıyor. Toplu bir güncellemeyi belirtmek için (birkaç arkadaşınız birden güncelleme yaptıysa facebook unuzun home unda hep yazar ya ali,veli,deli z uygulamasını güncelledi diye) <fb:if-multiple-actors> tagı kullanarak mesaj da değişiklik yapılabiliyor. Mesaj hazırlandıktan sonra da feed_publishTemplatizedAction kullanılarak yayınlanıyor. Geri kalan kod kullanıcı daveti ile ilgili bu kodu direk olarak wiki den aldım adresi şudur orda ayrıntılı açıklama mevcuttur.

Umarım bu yazı bir şekilde işinize yarar kötü anlatım ve kötü kodlama dan birşeyler anlayabilirseniz tabi

Not: Dosyaların içindeki url leri kendinize uygun bir şekilde bulup değiştirmeyi unutmayın. Facebook wiki ve api tools sizin en büyük dostunuzdur.

dipnot: Fikri çalan formdan düşsün, geceleri uykudan başka bir şey bilmesin

facebook | Yorumlar | Geri izleme