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.tymsh.com/2010/06/25/sitenize-facebook-like-begen-butonu-ekleyin/
http://www.bloggerplugins.org/2010/04/facebook-like-button-for-blogger.html

5 yorum

  1. 2. yöntemi uyguladım. tam da güzel oldu derken bi sorun çıktı şimdi. eğer anasayfadayken bir yazının altındaki beğen butonuna tıklanırsa bütün yazıların altındakini beğenmiş oluyorsun. profilde de siteyi beğendiğin şeklinde bir yazı çıkıyor. yok eğer yazının başlığına tıklayıp ta oradakini beğenirsen yazıyı beğendiğin şeklinde bir şey çıkıyor. anasayfadaki butonlara bişey olmuyor. anlatamadıysam mertefeisawesome.blogspot.com da bişey beğenip facebookta profiline bak neyden bahsettiğimi görürsün. şimdi, napıcaz? :D

    YanıtlaSil
  2. bir de az önce yapmama rağmen 8 people like this yazıyo. inanasım gelmiyo da, kim o vatandaşlar onları görmenin bir yolu yok mu?

    YanıtlaSil
  3. Öncelikle yeni yazmana rağmen 7 kişi gösteriyor olması, anasayfada olduğun zaman doğru çalışmamasından kaynaklanıyor. Kodun özelliği bu, bulunduğun sayfayı beğenmiş oluyorsun butona bastığın zaman. Bu yüzden ana sayfadaki problemi çözemeyeceğim şimdilik, fakat istersen blogger'ın güzel özelliklerini kullanarak kodun ana sayfanda değil de içerik sayfalarında çalışmasını sağlayabilirsin. Şöyle ki, <data:post.body/> kodundan sonra eklediğin kodu, şu şekle çevirmen gerekiyor:

    <b:if cond='data:blog.pageType != &quot;item&quot;'>

    Eklediğin kod.

    </b:if>

    YanıtlaSil
  4. yazdığın şeyi yapınca sadece anasayfadaki butonlar kalıyor. içerik sayfalarındakiler kalkıyor. verdiğin linklerin birinden yapayım dedim. onda sadece içerik sayfalarında oldu ama bu sefer butonları saçma sapan yerlere koymaya başladı. bi de yaptığım gibi 1 beğenen vardı yine sayfanın birinde. vazgeçtim kaldırdım ben de komple :D

    YanıtlaSil
  5. Pardon la pardon :( Yanlış vermişim kodu.

    <b:if cond='data:blog.pageType != &quot;item&quot;'>

    yerine

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    olması gerekiyodu.

    YanıtlaSil