Facebook connect kullanımı

13 Ara 2009

Facebook application’dan sonra geliştirilen bu api ile bir facebook application uygulamasının neredeyse tüm özelliklerini facebook arabirimini kullanmadan sahip olabiliyorsun. Tabiki mevcut sitenize de bu özellikleri kazandırarak sitenizin viral pazarlamasına büyük bir katkı yapabilirsiniz.

1- Facebook connect kurulumu

Kurulumun ilk adımı şüphesiz facebook developer uygulaması üzerinden sitemiz için bir hesap açmak. İşe başlayacağımız yer http://developers.facebook.com/connect.php Bu arada connect’in mobil, web ve desktop uygulamalarına entegre olarak neler yapabileceği konusunda tanıtımını okuyabilirsiniz.

“Start Building” e tıklayın hadi başlayalım.

Birinci adımda sitemizin adını ve adresini veriyoruz ayrıca kullanıcılarımızın karşılaşacağı mesajlar için dil seçimi yapıyoruz. Burada verdiğimiz site adı bizim facebook panelinden ulaşırken göreceğimiz isim asıl önemli olan url kısmı çünkü facebook bu adrese göre yetki verecek.

2. adım xd_receiver dosyası

Bu dosyayı indirip sitemizin root dizinine yerleştirmemiz gerekiyor. Facebook’un sitemizde oturum açabilmesi için bu dosyaya ihtiyaç duyacak.
3. adıma tıkladığımızda kurulum tamamlanmış olacak

‘

İşte kurulumu tamamladık. Artık bir API anahtarımız ve Gizli Kodumuz var. Artık bunları kullanarak sitemize facebook ile girilmesini sağlayacak kodları yazmaya başlayabiliriz.

Web sitemize Facebook Connect ekleme

Burada iki önemli unsur var. Birincisi bizim sitemiz html ile kodlandı fbml den anlamaz kullandığımız tarayıcılar da öyle. Peki ne yacağız? Öncelikle kodlarımız içerisinde fbml standartlarını kullandığımızı söyleyaceğiz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr" xmlns:fb="http://www.facebook.com/2008/fbml">

html etiketimize küçük bir eklenti yapıyoruz. Sonrasında header alanına bir javascript kodu ekliyoruz.

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/tr_TR" type="text/javascript"></script>

Ve son olarak fbml etiketlerimizi derlecek ve apimizi çalıştıracak kod. Kodu sitmizin sonuna body etiketini kapatmadan hemen önce koyuyoruz.

<script type="text/javascript">
FB.init("43624c3db06894f210e9e3785962af8d", "/xd_receiver.html");
</script>

Bu ilemleri yaptık ama sitemizde hiç bir hareket yok çünkü sitemizde henüz hiçbir fbml etiketi kullanmadık.

FBML etiketleri

Connect ile neredeyse tüm fbml etiketleri kullanılabilir. Biz önce kolay olanlardan başlayacağız.

1- Fan Kutusu (Fan Box)

<fb:fan profile_id="235267752305" stream="0" connections="8" width="250"></fb:fan>

Web siteniz üzerinde bir hayran kutusu oluşturmanızı sağlar. Hayran olmak isteyenler 'Hayran Ol' kutusuna tıkladığında bir pop-up'da facebook üye giriş ekranı açılır ve onaylarsa artık hayranımzıdır. Bu üye giriş ekranını daha sonra kendimizde açabibiriz.
Bu makaleyi yazarken sürekli vereceğim bir örnek sitem var. Benim connecti ilk denediğim site www.bursaburada.com hayran kutusu örneğime buradan buradan ulaşabilirsiniz.
Sadece birkaç parametresi var. stream aslında ortak biz yazı paylaşım alanı tüm ziyaretçiler görüşlerini burada paylaşabiliyor. Aslında bu özellik Canlı akış kutusu olarak ayrı bir özellik olarak kullanılabiliyor. En önemlisi profile_id bu id'ye facebook uygulamalarınızın içinden geliştirici bölümüne girin developer seçeneğine tıklayın. connections özelliği bizim hayran kutumuzda kaç kişiyi göstermek istediğimizi belirliyor. 

Burada mevcut uygulamalarınız listelenir.


Oluşturduğumuz uygulamaya tıklayın. Buradan application id'mize ulaşıyoruz.

2- Canlı Akış Kutusu (Live Stream Box)

<fb:live-stream event_app_id="235267752305" xid="YOUR_EVENT_XID" width="300" height="500"></fb:live-stream>

Canlı yayın kutusu sayfalarınıza birer ziyaretçi defteri gibidir. Ziyaretçileriniz burada paylaşımda bulunabilirler. Buradaki yine en önemli parametre event_app_id yine bu bizim hayran kutusunda da kullandığımız application id'miz. Buradaki diğer önemli paremetre xid parametresi. Bu parametreyi boş bırakmamızda bir sakınca yok eğer bir sayfada birden fazla canlı yayın kutusu kullanacaksanız xid'lerinizi farklı gireceksiniz.

Connect ile Başka Neler yapılabilir?

Tabiki öncelikle oturum açılabir  bir sonraki uygulamamız bu olacak. Bunun dışında comments, publish yapılabilir, arkadaşlarınız listelenebilir, notification gönderebilir, arkadaslarınızı siteye davet etmelerini sağlayabilirsiniz. Ve gerisi sizin yaratıcılığınıza kalmış. Bu özelliklerin tamamını tek tek burada paylaşacağım.

Etiketler: connect, facebook, fbml

Renkli Beyaz

Facebook connect kullanımı

1- Facebook connect kurulumu

“Start Building” e tıklayın hadi başlayalım.

2. adım xd_receiver dosyası

Web sitemize Facebook Connect ekleme

FBML etiketleri

1- Fan Kutusu (Fan Box)

2- Canlı Akış Kutusu (Live Stream Box)

Yorum Yapın

Ne için var bu site?

Resimlerim

Kategoriler

Arşivler