cebirci.com

Bu yazıda Javascript’in onerror olayını inceleyelim.

Bazı durumlarda kullandığımız Javascript kodu nedeniyle sayfada hata oluşabilir. Hata sayfa yüklenirken veya bir duruma bağlı olarak meydana gelir. Bu durumlarda tarayıcılar çeşitli uyarılar verir. Örneğin Internet Explorer’da alttaki durum çubuğunda şöyle bir uyarı olur:

Sayfadaki Javascript hatalarını window nesnesinin onerror olayıyla şu şekilde yakalayabiliriz:

<script type="text/javascript">
   window.onerror = function(){
       alert('Bir hata oluştu!');
   }
</script>
<script type="text/javascript">
    alert('eksik bir kod'
</script>

Bu kullanımına ek olarak onerror olayı img etiketli nesnelerde de çok yararlı bir şekilde kullanılabilir. Bildiğimiz gibi sayfamızda bulunan bir resim eğer kaynak adreste bulunmuyorsa gözükmez. Her tarayıcı bu durumda kendine has bir şekilde davranır. Örneğin Internet Explorer’da bulunamayan resimler için şuna benzer bir simge gözükür:

Bulunamayan resimler yerine istediğimiz bir resmin gözükmesini istiyorsak, yine onerror olayından yararlanırız.

<img alt="Alt" src="bulunamayacak.gif" onerror="this.src='ResimBulunamadi.jpg'"></img>

Ve böylece sayfamızda daha güzel bir görüntü elde etmiş oluruz.

Facebook’un kendi sorgu dili olan FQL ile Facebook veritabanına sorgu yapabiliyoruz. Sorgu yapabileceğimiz tabloları ve alanları Facebook resmi kaynak dökümanlarında inceleyebiliriz. Şimdi bir FQL sorgusuyla, kullanıcının Facebook’taki bazı temel bilgilerine nasıl ulaşacağımıza bakalım.

Önce FB.api fonksiyonuyla kütüphaneye erişiyoruz.

FB.api('/me', function(response) {
}

Bu fonksiyonun döndüğü sonuç değişkeninde, bağlı kullanıcının Facebook ID değeri bulunuyor. Oluşturduğumuz sorguda Facebook ID değerini kullanıyoruz:

var sorgu= FB.Data.query('select name, hometown_location, sex, pic_square from user where uid={0}', response.id);

Sorguyu wait metoduyla çalıştırıp, sistemin fonksiyon sonuç dönene kadar beklemesini sağlıyoruz.

sorgu.wait(function(rows){
});

Ardından da sorgudan gelen sonuçları ayrıştırıp sayfaya yazıyoruz.

document.getElementById('divBilgiler').innerHTML =
"İsminiz: " + rows[0].name + ",<br/> Cinsiyetiniz: " + rows[0].sex + ",<br/> Resminiz: <br/>" + "<img src='" + rows[0].pic_square + "'></img>";

Fonksiyonumuzun tamamı şu şekilde:

function fqlSorgu(){
FB.api('/me', function(response) {
  var sorgu= FB.Data.query('select name, sex, pic_square from user where uid={0}', response.id);
  sorgu.wait(function(rows) {
    document.getElementById('divBilgiler').innerHTML =
"İsminiz: " + rows[0].name + ",<br/> Cinsiyetiniz: " + rows[0].sex + ",<br/> Resminiz: <br/>" + "<img src='" + rows[0].pic_square + "'></img>";
    });
  });
}

Örnek sayfayı şurada görebiliriz: http://www.cebirci.com/demo/FB_FQL

Sitemize giriş yapmış birinin, Facebook’taki durumunu otomatik olarak nasıl güncelleyeceğimize bakalım.  Durum güncellemesi yapabilmek için kullanıcının sitemize Facebook Connect ile bağlanması gerekmektedir. Bu entegrasyonun nasıl yapılacağını Graph API ile Facebook Connect – 1 yazımızda paylaşmıştık.

Amacımız kullanıcının Facebook sayfasında şu şekilde bir durumu otomatik olarak yayınlamak:

Öncelikle kullanıcıdan gerekli izinleri almamız gerekiyor. İzin almak için login-buton’unda perms özelliğine alacağımız izinleri ekleriz. Bu örnekte kullanıcıdan duvarında yazı yayınlama izini isteyeceğiz. Bu izini isteyecek publish_stream değişkenini ekliyoruz.

<fb:login-button autologoutlink="true" perms="publish_stream"></fb:login-button>

Ardından otomatik durum güncelleyecek kodu sayfamıza ekleyelim:

function statuGuncelle(){
var body = "cebirci.com'da 'Facebook API ile otomatik Statü güncelleme' yazısını inceliyor.";
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Hata Oluştu');
} else {
alert('Duvara eklenen Post ID: ' + response.id);
}
});
}

Örnek sayfayı şurada görebiliriz: http://www.cebirci.com/demo/FB_DurumGuncelleme

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>