2 Nisan 2013 Salı

Blogger'a Facebook Giriş Kutusu (Login Box) Ekleme

Barkness! 1 yorum
Uzunca bir süredir yazı yazmadım. Blog tasarımını da değiştirdikten sonra ilk yazımızı, internette sıklıkla araştırılan, Blogger'a Facebook giriş butonu ekleme yöntemi adına yazmaya karar verdim.
Bilindiği gibi Facebook, kullanıcılarının kendi applicationlarını, yani uygulamalarını yaratmalarına imkan sağlıyor. Bu feysbuk uygulamaları aracılığıyla websitenize interaktif bir şekilde Facebook login özelliği ekleyebilmektesiniz. PHP ya da diğer dinamik web tabanlı programlama dilleri kullanarak, Facebook login sayesinde kullanıcıların herhangi bir sayfaya erişimini kısıtlayabilir ya da izin verebilirsiniz ancak bunu Blogger üzerinde yapmamız malesef ki sözkonusu değil. Yine de, blogspot blogunuza Facebook giriş sekmesi eklemek işinize yarayabilir. Bu sayede sitenizi kullanan insanların bir veritabanını elinizde bulundurmuş olursunuz. Lafı fazla uzatmadan anlatıma geçelim:

  1. Öncelikle, Facebook developer sayfasından kendi adınıza bir application yaratmanız gerekmektedir. Bunun için https://developers.facebook.com/apps adresine giderek, Create New App sekmesi sayesinde yeni bir uygulama yaratıyoruz.
  2. Daha sonra, uygulama ayarlarını aşağıdaki örnekte olduğu gibi dolduruyoruz.
  3. Uygulamamız hazır. Şimdi blogger blogumuza giderek, Yerleşim kısmından yeni bir Gadget Ekle butonunu kullanarak HTML/Javascript kutucuğu ekliyoruz. Kutucuğa aşağıdaki kodu ekliyoruz. Yalnız APPID yazan kısmı kendi App ID kısmınızla değiştiriyoruz. İsterseniz 200 yazan kısmı değiştirerek uygulama genişliğini de değiştirebilirsiniz.
    4. <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=APPID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>

  4. Uygulamamız tamam. Kaydedip sitenize bakabilirsiniz.

ÖRNEK



İyi günler!
Yazar:

1 yorum: