ASP.NET MVC’de Özel ActionResult Oluşturmak

02 Mayıs 2011 – YazılımYorum Yap

Bildiğimiz gibi ActionResult; ASP.NET MVC‘de, gelen isteklere yanıt olarak dönmeyi sağlayan sınıflardır. MVC 2′de ActionResult sınıfından türemiş dokuz dahili ActionResult tipi bulunuyordu. Listesine buradan göz atabilirsiniz. MVC 3′de bu tiplere üç yeni tip daha eklendi. Biz de bugün RSS formatında yanıt dönen özel bir ActionResult tipi oluşturacağız.

Önce RSS içeriğini taşıyacak minik  bir sınıf oluşturalım

public class RssIcerik

{

    public string Baslik {get; set;}

    public string Aciklama {get; set;}

    public string Link {get; set;}

}

Şimdi de RssResult sınıfımızı oluşturacağız. Burada RSS XML’imizi oluştururken, System.Xml namespace’inde yer alan XmlWriter sınıfından faydalanacağız.

public class RssResult : ActionResult
    {

        private List<RssIcerik> _rssIcerikleri;
        private string _baslik;
        private string _aciklama;
		private string _link;

        public RssResult(IEnumerable icerikler, string baslik, string aciklama, string link)
        {
            _rssIcerikleri = new List(icerikler);
            _baslik = title;
            _aciklama = description;
			_link = link;
        }

		//override ettiğimiz bu metod ActionResult tiplerinde yanıt işleme sürecinde çalışır.
        public override void ExecuteResult(ControllerContext context)
        {

            context.HttpContext.Response.ContentType = "text/xml";
            using (XmlWriter _xmlWriter = XmlWriter.Create(context.HttpContext.Response.OutputStream))
            {

                // Rss xml'ini oluşturmaya başlıyoruz.
                _xmlWriter.WriteStartElement("rss");
                _xmlWriter.WriteAttributeString("version", "2.0");
                _xmlWriter.WriteStartElement("channel");

				// Rss için temel bilgileri giriyoruz.
                _xmlWriter.WriteElementString("title", _baslik);
                _xmlWriter.WriteElementString("description", _aciklama);
                _xmlWriter.WriteElementString("link", _link);

                // Rss içeriklerini yazıyoruz
                _rssIcerikleri.ForEach(x =>
                {
                    _xmlWriter.WriteStartElement("item");
                    _xmlWriter.WriteElementString("title", x.Baslik);
                    _xmlWriter.WriteElementString("description", x.Aciklama);
                    _xmlWriter.WriteElementString("link", x.Link);
                    _xmlWriter.WriteEndElement();
                });

                // Ve xml için kapanış işlemlerini yapıyoruz (rss ve channel tagleri için)
                _xmlWriter.WriteEndElement();
                _xmlWriter.WriteEndElement();
            }
        }
}

Son olarak; oluşturduğumuz bu ActionResult tipini ASP.NET MVC projemizde artık bir isteğe yanıt olarak kullanabiliriz. Örnek olarak IEnumerable türünden haber Rss içeriklerini değer olarak dönen RssGetir isimli bir metodumuz olduğunda kullanımı şöyle olabilir:

public ActionResult RssKaynagi()

{

    IEnumerable haberler = HaberServisi.RssGetir();
    return RssResult (haberler, "Haberler" , "cebirci.com Haber Rss Kaynağı" , "http://feeds.feedburner.com/cebirci");

}

Facebook ve Twitter Otomatik Durum Güncelleme

12 Ocak 2011 – Facebook, YazılımYorum Yap

Facebook’ta ve Twitter’de otomatik post için kısaca şu şekilde bir akış gerekli:

  • Önce Twitter ve Facebook’taki “developer” sayfalarına girip proje için uygulamalar yaratılır.
  • Yaratılan uygulamalardaki “key” ve “secret” bilgileri kaydedilir.
  • Kendi sitenizin uygun bir yerinde kullanıcılardan bu sayfalara post yapılabilmesi için gerekli izin alınır. Facebook için bu izin: “publish_stream
  • Bu iznin alınması için üç taraflı bir yapı kurulur.
  • İlgili sosyal ağ sitesinin izin sayfası (bir popup da olabilir) uygulamanıza ait “key” ve “secret” leri içerecek şekilde açılır.
  • Kullanıcı bu popup’da login olur ve ilgili izinleri verir.
  • Bu izinler karşılığında sosyal ağ siteleri (Facebook , Twitter, FriendFeed) sizin belirlediğiniz bir sayfaya bir kod gönderir. Facebook için bu kodun adı: “access_token
  • Siz de bu kod yardımıyla otomatik post işlemini kullanıcıya bir daha sormadan gerçekleştirirsiniz.

Sosyal ağ siteleri farklı iletişim kurallarına ve yapılarına sahip. Dolayısıyla aşağıdaki dökümanlar iyi incelenmeli:

Facebook:

http://developers.facebook.com/docs/authentication/permissions

http://developers.facebook.com/docs/reference/rest/stream.publish/

Twitter:

http://dev.twitter.com/doc/post/statuses/update

C# İle Dizin ve Klasör Yönetimi – Directory Sınıfı

27 Eylül 2010 – YazılımYorum Yap

Bu yazımızda C# kullanarak Windows dizin yapısında nasıl işlem yapabileceğimizi inceleyelim. Kullanacağımız sınıflar .NET’in System.IO namespace’inde bulunan Directory ve DirectoryInfo sınıfları olacak.

Bir klasörün var olup olmadığını kontrol etmek

//Exists metodu bool türünden bir değer döner.
Directory.Exists(@"C:\Test\Kontrol Edilecek Klasör");

Bir klasörün alt klasörleri

//Directory sınıfının GetDirectories metodu string[] türünden dizinleri döner.
Directory.GetDirectories(@"C:\Test");

Bu kullanıma ek olarak DirectoryInfo sınıfından bir instance yaratarak da alt klasörleri elde edebiliriz.

DirectoryInfo DirInfo = new DirectoryInfo(@"C:\Test");
//DirectoryInfo sınıfının GetDirectories metodu DirectoryInfo[] türünden dizinleri döner.
DirInfo.GetDirectories();

Klasör yaratmak

//Directory sınıfının CreateDirectory metodu DirectoryInfo türünden yaratılan dizini döner.
Directory.CreateDirectory(@"C:\Test\Yeni Klasör");

Şunu da not olarak açıklamamızda fayda far; CreateDirectory metodu dizin için gerekli tüm klasörleri oluşturur. Örneğin, klasör yaratan bu metod eğer bulunmuyorsa yukarıdaki örnekte “Test” klasörünü de yaratır.

Klasör silmek

//Directory sınıfının Delete metodu belirtilen klasörü siler.
Directory.Delete(@"C:\Test\Yeni Klasör");

Burada dikkat etmemiz gereken bir nokta, Delete metodunun eğer dizini bulamazsa DirectoryNotFoundException hatasını fırlatacağıdır. Bir klasör sileceksek yukarıda bahsettiğimiz Exists metoduyla kontrolünü yaptıktan sonra Delete metodunu çağırmamızda fayda var.

Javascript OnError Olayı

07 Eylül 2010 – Javascript, Web, Yazılım1 Yorum

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.

Asal Çarpanlara Ayırma Makinesi

26 Ağustos 2010 – Matematik, Tanıtım, Web2 Yorum

Önceki yazımızda tanıttığımız Wolfram Alpha sitesindeki “Widget Builder” özelliği yardımıyla bir “Asal Çarpanlara Ayırma Makinesi” yapalım. İşte sonucunda ulaşacağımız bileşen:

Öncelikle Wolfram Alpha’nın Widgets sayfasına gidip “Create account” butonuyla siteye geliştirici olarak kaydolmamız gerekli. Ardından hesabımızla siteye giriş yapıp makinemizi yapmaya başlayabiliriz.

Oluşturduğumuz bileşene sol üst kısımdaki “Edit” tuşunu kullanarak bir isim verelim ve “Save” tuşuna basalım:

Ardından asal çarpanlara ayrımayı sağlayacak Wolfram sorgusunu ekleyelim ve “Next” tuşuna basalım:

Şimdi bu sorguda değişken olarak belirleyeceğimiz sayı kısmını imleç yardımıyla seçeceğiz. Ve “New Variable” tuşuna basacağız.

Oluşturduğumuz değişkenle ilgili özellikleri aşağıdaki gibi belirliyoruz ve yine “Next” tuşuna basıyoruz:

Sıradaki “Widget Layout” ekranında bileşenimizin görünümüyle ilgili değişiklikler yapabiliyoruz. Başlık, çerçeve rengi ve bileşene yeni öğeler ekleme gibi özellikler bu ekranda bulunuyor. İstediğimiz görsel değişiklikleri yapıp yine “Next” tuşuna basıyoruz.

Açılan “Widget Output” ekranında ise hesaplanan sonucun nasıl gözükeceğini, hangi alanları içereceğini belirliyoruz. Çıktı ayarlarında “Show Assumptions” yani “Varsayımları Göster” ve “Show Warnings” yani “Uyarıları Göster” seçeneklerini isteğimize göre belirliyoruz. “Next” tuşuyla sonraki adıma geçiyoruz.

Output Type” adımında sonuçların gösteriliş biçimini belirliyoruz. Lightbox, Popup ve iFrame seçeneklerini önizlemelerde inceleyerek içlerinden birini seçiyoruz ve sonraki adıma geçiyoruz.

Widget Info” adımında bileşenimizle ilgili bilgi kutucuklarını dolduruyoruz.

Son olarak “Publish” tuşuna basıyoruz ve bileşenimiz artık hazır. Hazırladığımız Asal Çarpanlara Ayırma Makinesinin sayfasını görebilir ve aşağıdaki kodu sitemize ekleyerek sitemizde bu makineyi yayınlayabiliriz.

<script type="text/javascript" id="WolframAlphaScript4c26774d852f62440fc746ea4cdd57f6" src="http://www.wolframalpha.com/widget/widget.jsp?id=4c26774d852f62440fc746ea4cdd57f6"></script>

Wolfram Alpha

23 Ağustos 2010 – Matematik, Tanıtım, Web1 Yorum

Wolfram Alpha 2009 mart ayında duyurulan ve 15 Mart 2009′da yayına başlayan bir cevap motorudur. Sorduğumuz sorulara web sayfalarında arama yapmak yerine, kendi veritabanındaki bilgilere dayanarak ve gelişmiş bir hesaplama yaparak yanıt verir. Wolfram’ın önceki ürünlerinden, fonksiyonal bir programlama paketi olan Mathematica‘ dan da faydalanan sistem, sadece matematiksel sonuçlarla kalmıyor ve çok geniş bir yelpazede cevaplar sunabiliyor.

Çok yetenekli bu cevap motorunda, cevap alabileceğimiz geniş içerikten bazı örnekler:

Matematik:

Üçüncü Dereceden bir bilinmeyenli bir denklemin çözümü: x^3 – 4x^2 + 6x – 24 = 0

Bir mantıkla ilerleyen sayı dizisinin hangi düzende olabileceği : 5, 14, 24, 35, 47, …

Bir denklemin türevinin çözümü : Türev => (x^4)sin(x)

Bir diferansiyel denklemin çözümü:  2 y ‘ = sin(2x)

Belli bir adet atılan zarla ilgili olasılık durumları: 8 zar

Diğer

Fizikte İdeal gaz kanununa göre gazın hacmi: 2.2mol, 2.0atm, 500Kelvin

Görüntü ve mercek arasındaki uzaklık: Odak uzunluğu: 20cm, Nesne-mercek uzaklığı:400cm

Belli bir tarihte bir gezegenenin durumu: 10 Kasım 1983′te Jupiter

Birim çevirileri :  400 cm kaç “feet”tir?

Bir sözcüğü MD5 metoduyla şifreleme: cebirci

Belli bir yapıyla ilgili bilgi : Boğaziçi Köprüsü

Bir sözcüğün barkoda dönüştürülmüş şekli: cebirci

İki tarih arasında geçen sürenin analizi: 10 Kasım 1983′ten bugüne

Bir yerdeki saat: Kongo saati

Bir ülkeyle ilgili sosyo-ekonomik veriler: Türkiye’nin enerji üretimi

Dünya üzerindeki bir ülke, şehir, dağ, nehir gibi coğrafi yerlerin detaylı özellikleri: Erciyes Dağı

Tarihsel bir kişi veya olayla ilgili bilgi: Fatih Sultan Mehmet

Bir şirketle ilgili detaylı bilgi: Vodafone

Bir film, kitap veya şarkıyla ilgili bilgi: Babam ve oğlum

Bir yerin hava durumu: İstanbul

Bir dövizin başka bir döviz cinsinden karşılığı: 1 USD’nin TL karşılığı

Belli bir yılda belli bir yerde olan depremler: 1999 yılında İstabuldaki depremler

Geliştirilmekte olan bir çok bölüm daha var. Anatomi, Spor ve Müzik Sanatçıları bu geliştirilecek konulardan bazıları. Tüm bu sorgu örneklerini kategorize edilmiş biçimde Wolfram Alpha örnekler sayfasından inceleyebiliriz ve istediğimiz sorguları yapabiliriz. Çok nitelikli bir site olan Wolfram Alpha‘yı gerçekten tavsiye ediyorum.

Project Euler

17 Ağustos 2010 – Matematik, Yazılım1 Yorum

Bu yazıda www.projecteuler.net sitesini tanıtacağım. Project Euler, içinde 299 matematik problemi barındırıyor. Ancak bu problemleri çözebilmek için sadece matematik bilgisi yetmiyor. Çünkü sorular bilgisayar yardımı olmadan çözülmesi çok zor sorular. Zaten 117501 kullanıcısı olan sitenin amacı da bilgisayar ve programlama yeteneklerinin kullanılmasını sağlamak.

Üye olduğumuzda isteğe bağlı olarak kullandığımız programlama dilini ve ülkemizi seçebiliyoruz. Bu bilgiler ışığında sıralamamızı görebiliyor, üyelerin hangi soruları doğru yanıtladığını inceleyebiliyor, hangi programlama dillerinin daha başarılı olduğunu yorumlayabiliyoruz.

Üyeler 6 aşama atlayabiliyorlar. Birinci aşama için 25, ikinci aşama için 50, üçüncü aşama için 100, dördüncü aşama için 150, beşinci aşama için 200 ve altıncı aşama için 250 soru çözülmesi gerekiyor. Ülkesini Türkiye olarak seçmiş 340 üyeden altıncı aşamaya geçmiş tek bir üye bulunuyor.

Ancak Project Euler sitesinin Türk kullanıcılar için bir dezavantajı soruların tamamının İngilizce olması. Her ne kadar sorularda matematiksel terimler yoğunlukta olsa da, İngilizce bilmeyenlerimiz için dil bir sorun olarak karşımıza çıkabilir.

İşte bir örnek soru, siz de kendi programlama dilinizle bu problemi çözmeye ne dersiniz?

If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.
Find the sum of all the multiples of 3 or 5 below 1000.

Türkçesi,

3′ün veya 5′in katı olan 10′dan küçük tüm doğal sayıları listelersek, 3, 5, 6, ve 9′u elde ederiz. Bu katların toplamı 23′tür. 3′ün veya 5′in 1000′den küçük tüm katlarının toplamını bulunuz.

Bakalım sonucu bulabilecek miyiz?

FQL (Facebook Query Language) İle Sorgu Yapma

27 Temmuz 2010 – Facebook, Javascript, YazılımYorum Yap

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

Facebook API ile otomatik durum güncelleme

21 Temmuz 2010 – Facebook, Javascript, Yazılım7 Yorum

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:

Facebook Api ile Otomatik Durum Güncelleme

Ö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

Graph API ile Facebook Connect

08 Temmuz 2010 – Facebook, Javascript, Yazılım7 Yorum

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>