Geçtiğimiz aylarda Facebook yeni API’sini duyurmuştu. Graph API isimli bu arabirim beraberinde yeni kullanım şekilleri de getirdi. Ayrıca eski API’de bulunan “Facebook Connect” entegrasyonu ve uygulama izinleri gibi kısımlar da daha güçlü ve kolay bir altyapıya oturtuldu. Bu yazıda kısaca Graph API’ nin Facebook Connect entegrasyonunda nasıl kullanıldığından bahsedelim.
Örnek sayfayı şurada görebiliriz: http://www.cebirci.com/demo/FB_GraphApi
Öncelikle, API Anahtarı alabilmek için bir Facebook uygulaması yaratmak gerekiyor. Buradan uygulama yaratabiliriz. Veya daha önce yarattıysak API Anahtarımızı aşağıdaki kodda xxxxxxxxxx yazan yere kopyalayım.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxxxxx', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Yukarıdaki kodu sayfamızda body tagleri arasına ekliyoruz. Bu kod parçacığını ekleyerek Facebook Javascript SDK ‘yı sayfamıza asenkron şekilde yüklüyoruz. Böylece sayfadaki diğer elementlerin bu yüklemeyi beklemesini engelliyoruz. Ayrıca FB.init fonksiyonunun detaylarına da buradan ulaşabiliriz.
Html Tag’imizi şu şekilde düzenliyoruz ki FBML kontrollerini sayfamızda kullanabilelim:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
Şimdi sırada login, logout ve sessionChange gibi olayları canlandırmak için FB.Event.subscribe metodunu kullanacağız. Kodu şu şekilde yeniden düzenliyoruz:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxxxxx', status: true, cookie: true, xfbml: true});
/* Bütün olaylar tanımlanıyor */
FB.Event.subscribe('auth.login', function(response) {
// cevap geldiğinde çalışacak kod
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// cevap geldiğinde çalışacak kod
logout();
});
FB.getLoginStatus(function(response) {
if (response.session) {
// login olmuş ve bağlanmış kullanıcı
login();
}
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Böylece kullanıcı ilk login olduğunda login() metodu, logout butonuna basıldığında da logout() metodu çağırılacak. Kullanıcı daha önceden uygulamaya izin vermiş ve giriş sırasında Facebook’ta online durumda ise otomatik olarak login() metodu çağrılacak.
Kullanıcının login ve logout işlemlerini yapabilmesi için FBML kontrolü olarak login butonu ekliyoruz.
<fb:login-button autologoutlink="true" ></fb:login-button>
Son olarak login ve logout durumlarında sayfamızdaki değişiklikleri yapacak javascript metodlarımızı ekliyoruz.
function login(){
FB.api('/me', function(response) {
document.getElementById('login').style.display = "block";
document.getElementById('login').innerHTML ="Sayın " + response.name + ", başarıyla bağlandınız!";
});
}
function logout(){
document.getElementById('login').style.display = "none";
}
Ve sayfamızın son hali şu şekilde:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Graph API ile Facebook Connect Örneği</title>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '121581787886211', status: true, cookie: true, xfbml: true});
/* Bütün olaylar tanımlanıyor */
FB.Event.subscribe('auth.login', function(response) {
// cevap geldiğinde çalışacak kod
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// cevap geldiğinde çalışacak kod
logout();
});
FB.getLoginStatus(function(response) {
if (response.session) {
// login olmuş ve bağlanmış kullanıcı
login();
}
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function login(){
FB.api('/me', function(response) {
document.getElementById('login').style.display = "block";
document.getElementById('login').innerHTML ="Sayın " + response.name + ", başarıyla bağlandınız!";
});
}
function logout(){
document.getElementById('login').style.display = "none";
}
</script>
<h3>Graph API ile Facebook Connect Örneği</h3>
<p><fb:login-button autologoutlink="true" ></fb:login-button></p>
<br /><br /><br />
<div id="login" style ="display:none"></div>
</body>
</html>
