Facebook Beğen Butonunu Blogger'a Ekleyelim

Facebook'daki Beğen butonundan her blog sayfanıza birer tane yerleştirmek ister miydiniz? Bu yazıyı okuduktan sonra çok kolay. Bunu yapmak için iki farklı yöntem mevcut. Sırası ile bu yöntemlere bir göz atalım.

1) iframe Yoluyla
Sıradan bir kullanıcı için en kolay yöntem bu yöntemdir. Çünkü basittir. Ancak uygulamasının basit olduğu kadar görünüşü de basittir. İkinci yöntemin üstün özelliklerine sırası gelince değinelim, şimdi gelelim birinci yöntemin uygulanışına.

İlk olarak blogumuzun yönetim panelindeki HTML'yi Düzenle sayfasına giriyoruz. Widget Şablonlarını Genişlet seçeneğini aktif hale getiriyoruz. Daha sonra şablon kodlarımız arasında CTRL+F yardımıyla <data:post.body/> kodunu buluyoruz. Hemen altına da aşağıdaki kodları yapıştırıyoruz:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>

Şablonumuzu kaydettiğimiz zaman, tamamdır. Bu adımları tamamladığınızda yazınızın altında şuna benzer bir görüntü oluşacak:

Bu bitti, devam edelim.

2) XFBML Yoluyla

Bu yolu kullanarak Beğen butonunuzu daha işlevsel bir hale getirebilirsiniz. Bu yöntemi uyguladığınızda ziyaretçileriniz yazılarınızı beğenmenin yanında yazılarınıza bir yorum yazıp facebook sayfalarında paylaşabilirler de. Bunu yapmak için blogumuza bir facebook app id almamız gerekli. http://developers.facebook.com/setup/ adresine girerek oradaki gerekli bilgileri doldurun, ve Create Application butonuna tıklayın. Unutmamamız gereken bir ayrıntı, Site URL kısmına yazacağımız blog anasayfamızın adresinin sonundaki / işaretini unutmamamız gerektiğidir, yoksa site İnvalid URL hatasını veriyor. Örneğin:

Site Name: Asosyalbebe
Site URL: http://www.asosyalbebe.com/
Locale: Türkçe

Bilgileri doldurup Create Application butonuna tıkladıktan sonra açılan sayfadaki App id'yi bir kenara yazıyoruz.  Daha sonra şablon kodlarımız arasında CTRL+F yardımıyla <data:post.body/> kodunu buluyoruz. Hemen altına aşağıdaki kodları ekliyoruz. 

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'app id niz', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div>
<fb:like action='like' colorscheme='light'
layout='standard' show_faces='true' width='450'/>
</div>

Kod içerisindeki kırmızı ile belirttiğim kısımdaki app id niz kısmının yerine tırnakları silmeden az önce almış olduğumuz application id'nizi yazıyoruz.Ve şablonu kaydederek bu işi bitiriyoruz. Görüntü şu resimlere benzeyecek:

Beceremediğiniz, zorlandığınız kısımları yorumlarda belirtebilirsiniz. Sağlıcakla kalın efendim. Butonu denemek için hemen aşağıdaki örneği kullanabilirsiniz.

Kaynaklar:
http://www.asosyalbebe.com/2010/07/facebook-begen-butonunu-bloggera.html
http://www.tymsh.com/2010/06/25/sitenize-facebook-like-begen-butonu-ekleyin/
http://www.bloggerplugins.org/2010/04/facebook-like-button-for-blogger.html