// Nis 28th, 2010 // Wordpress Tema

Facebook Like Button – WordPress


Facebook bu gün Sosyal Medya’ya tam anlamıyla açıldı. Developers alanındaki Plugins ile bir çok servis hakkında manuel bilgi edinebiliyorsunuz. WordPress hakkında bu pluginin hatasız yapılmasından bahsedeceğim.

İlk olarak basit yol şu; eklenti. wp-content/plugins klasoruna atarak etkinleştirebilir ve admin panelinden sınırlı ayarlarını yapabilirsiniz.

Gelişmiş olarak adım atmak istiyorsanız öncelikle Facebook Geliştirici alanından Uygulama kurmalısınız.

Ardından açılan sayfadan App ID almamız gerekiyor. Bu ID bizim için Facebook ile bağ olacak ve şimdilik kopyalayarak bir kenara kaydedebilirsiniz. Id nerede sorusuna yönelik aşadaki görsele bakabilirsiniz.

Şimdiki adımlar 2 şekilde yapılabiliyor. iframe olarak ve javascript olarak. javascripti daha anlamlı bulduğumdan, Google ‘ın iframe sevmemesinden ve javascriptlide kullanıcılara yorum bırakma imkanı sunduğundan kullanacağım.

FTP ‘nizde yer alan (wp-content > themes > [tema klasorunuz] > header.php ‘yi düzenliyoruz. İsteyenler header.php ‘ye CHmod ayarı 755 yaparak Tema Editörü > Üst kısım (header.php) olarak düzenleyebilirler admin panelinden.

Header.php ‘de yer alan html etiketini düzenleyeceğiz şimdi.

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>

Şekline getiriyoruz. opengraphprotocol ‘ü meta tag konusunda rahat olmak için ekledik. Şimdi meta taglarımızı ekliyoruz.

<meta property="fb:admins" content="115209988510083"/>
<meta property="og:title" content="<?php wp_title(''); ?>"/>
<meta property="og:type" content="blog" />
<meta property="og:image" content="http://www.rsskitap.com/rsskitap/125-125.png"/>
<meta property="og:description" content="Gayri Muntazam İnternet Kitaplığı" />
<meta property="og:site_name" content="RSS Kitap"/>

115209988510083 olan alana geliştiriciden aldığınız, bir yere kopyalayın dediğim size özel ID’yi giriyoruz.

2. meta tag kodumuz site üzerinde bir yazımız beğenildiğinde bu yazının isminin Facebook’ta görüntülenmesini sağlıyor.
3. meta tagımız sistemimizi belirtiyor ve blog olduğumuz biliniyor.
4. meta tagımız ile öge beğenildiğinde facebookta yanında resim çıkmasını sağlıyor. URL’sini özelleştirebilirsiniz. Görünüm nasıl derseniz aşağıda örnek görsel var.
5. meta tag sitemizin açıklamasını, 6. ise sitemizin ismini belirtiyor. Bunlar benim olmazsa olmaz dediklerim. Eğer ilginizi çekiyorsa gereksiz diye nitelendirebileceğim bir çok meta tag da sunulmuş. opengraph kodunu tüm bunları rahatlıkla kullanabilmek için koymuştuk.

Yukarıdaki şekilde meta tag oluşturarak Facebooktaki görünümü şu hale getirdik.

Şimdiye kadar verileri çekecek veri tabanını ve meta taglarımızı belirledik. Şimdi çekme yolumunuzu belirtiyoruz.
(wp-content > themes > [tema klasorunuz] > single.php ‘de yer alan

<?php the_content(''); ?>

altına (kişisel düşüncem, siz istediğiniz yere yerleştirebilirsiniz tabiki de) aşağıdaki kodu ekliyorsunuz.

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '115209988510083', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

115209988510083 yerine kendi APP ID ‘nizi yazmayı unutmayın.
Şimdi veri çekme yolumuz da tamamlandı. Ne göstereceğimizi belirleyeceğiz. Plugins alanında yer alan Like Button ‘u seçiyorum. Siz benzerini kendiniz oluşturabilirsiniz. Aşağıdaki kodu bir önceki kodun hemen altına koyarsanız her yazınız için like sayacaktır ve beğenildiğinde yukarıdaki görseldeki halde facebooka gidecektir. İsteyen kullanıcılar da yorum yapabilecekler.

<fb:like action='like' colorscheme='light' href='<?php echo urlencode(get_permalink($post->ID)); ?>'
layout='standard' show_faces='true' width='450'/>

Sonuç nasıl diyenlere benim ilk ayarı İngilizce yaptığım olarak kullandığım şu şekilde oluyor;

Normali aşağıdaki şekilde olan kodu img kodu gibi kapatarak çeşitli bloglarda veri döngüsü olmasını engelledim. Kimi bloglarda bu sorun yüzünden her sayfada aynı like sayısı çıktısını alınıyor. img kodu gibi kapatarak bunu engelledik. Ayrıca url kısmına da urlencode şeklinde kod yerleştirdik. permalink kodu da burada işe yaramayacaktır. encode şeklinde olması gerekiyor.

<fb:like href="http://www.rsskitap.com" layout="standard" show_faces="true" width="450" action="like" colorscheme="light"></fb:like>

Sanırım bu bilgiler yeterli olacaktır. Hızlıca yazılmış bir yazı, o yüzden dil konusunda aksaklıklarım olabilir kusura bakmayınız. Her türlü sorun için lütfen yorum yapın. İlgilenmeye çalışacağım. İyi günler dilerim.

İlginizi Çekebilir

Kategoriler Arşiv Son Yorumlar Linkler Sayfalar
 

Tweetlemeden olmaz diyenlere! @rssems


32 Yorum mevcut, bir şey söylemek ister misin?

  1. ErolG diyor ki:

    Hem like butonu hem de like kutusu için bu kodlar yeterli mi? Like buton seçimine kadar kullandığımız kodları değiştirmeden blogumuza bir de like box ekleyebilir miyiz ?

  2. Bildirgeç diyor ki:

    BBen denilenlerin hepsini yaptım. Beğen sutunu çıkıyor ama; beğenilince facebook'a veri yollamıyor. Ayrıca beğendikten sonra hemen yanında hata mesajı veriyor. Yardımcı olursanız sevinirim.

  3. RSS-EMS.com diyor ki:

    "veri çekme yolumuz da tamamlandı" dediğim yerden sonra pluginlerden hangisini istersen çalıştırabilirsin rahatlıkla Erol :)

  4. RSS-EMS.com diyor ki:

    Site adresini yazar mısın? Sorunu belirlemede yardımcı olmak isterim tabiki.

  5. Bildirgeç diyor ki:

    bildirgec.in

  6. RSS-EMS.com diyor ki:

    header.php 'de yer alan <html kodunu kapatmayı unutmuşsunuz.

    olması gereken hali şudur;

    <html xmlns="http://www.w3.org/1999/xhtml&quot;
    xmlns:og="http://opengraphprotocol.org/schema/&quot;
    xmlns:fb="http://www.facebook.com/2008/fbml&quot; <?php language_attributes(); ?>>

  7. Bildirgeç diyor ki:

    Düzelttim ama hala aynı hatayı veriyor.
    http://www.bildirgec.in/avea-taraftar-modemleri adresindeki sayfaya ulaşılamadı.

  8. RSS-EMS.com diyor ki:

    Kodu footer'a koyuyorsun sanırım, yukarıdaki benim belirttiğim gibi content 'in altına koyarak dener misin? ID'ni yenileyebilirsin bir de.

  9. Bildirgeç diyor ki:

    malesef yine yapamadım. Eklenti kurdum yine aynı hata:(

  10. tuna diyor ki:

    sorunu çözebilmek için uygulamanızın ayarlarından "Bağlan" kısmına gelin "Bağlan URL'si" yazan yere sitenizin adını yazın ve değişiklikleri kaydedin. bu şekilde düzelmesi lazım.

  11. facebook diyor ki:

    evet anlatılan gibi yaparak daha kolay paylaşabiliyosunuz.

  12. facebook diyor ki:

    Beğen sutunu çıkıyor ama; beğenilince facebook'a veri yollamıyor. Ayrıca beğendikten sonra hemen yanında hata mesajı veriyor. Yardımcı olursanız sevinirim bu arkadasa yardımcı olundu sanırım..

  13. Furkan diyor ki:

    Resimde görüldüğü üzere. gerekli kodları ekledim. fakat. begen e tıklayınca Şu geliyor.

    Arkadaşların arasında bunu beğenen ilk kişi ol. · Yönetici Sayfası · Hata

    Hata penceresinide açınca " http://www.domainismi.com/bolum/la-jetee.html adresindeki sayfaya ulaşılamadı.

    böyle bir hata ile karşılaşıyorum… ne yapmak gerekir.

  14. RSS-EMS.com diyor ki:

    Site adresini yazabilir misin?

  15. Guvenc Kaplan diyor ki:

    Merhaba, döküman icin tesekkürler. Merak ettigim bir sey var, facebook forumlarinda da cevabini bulamadim malesef.

    Kullanicinin neyi begendigini nasil ogrenebiliriz?

    Diyelim ki kullaniciya ait bir uyelik ID'm var ve bunu bir session degerinde tutuyorum. Bunun yaninda kullanici Begen butonuna tikladigi anda o butonun xid degerini "yakalayip" database'imde saklamak istiyorum.

    Bu nasil mümkün olur?

  16. Guvenc Kaplan diyor ki:

    Merhaba, döküman icin tesekkürler. Merak ettigim bir sey var, facebook forumlarinda da cevabini bulamadim malesef.

    Kullanicinin neyi "begendigini" nasil alabiliriz?

    Bu mesela xid degeri olabilir. Kullanici adi ile bu degeri ayri bir DB tablosunda tutabiliriz.

    Ancak bu xid degerini ne zaman almaliyiz?

    Ya da, facebook veritabanini bir SQL cümlecigiyle sorgulayabilir miyiz?

  17. Hakan Dinçer diyor ki:

    Rıza bey, hakikaten günlerdir uğraşıyorum ancak hiçbir şekilde problemi çözemedim..

    Oluşturdugum sayfam için Facebook tan aldığım kodu siteme ( http://www.motordelisi.com) ekledğimde Like Box gözüküyor ancak "Beğen" e tıklandığında "Hata" çıkıyor ve o HATA ya tıklandığında şu uyarı geliyor..

    "Desteklenen meta etiketlerinden biriyle bir Açık Grafik sağladın ancak belirttiğin tür ("link") geçerli değil."
    Ne yaptıysam günlerdir çözemedim..

    Denemek için Facebook ta yeni bir sayfa ouşturup o sayfanın Like Box kodunu denedim yine olmadı…

    Lütfen acil yardım !!!!

  18. Rıza Selçuk Saydam diyor ki:

    html etiketini düzenlemeden o düzenlemeye göre meta uygulaması yapmışsınız. hatayı bu yüzden alıyorsunuz.

  19. Rıza Selçuk Saydam diyor ki:

    Aldığınız uygulama api yetkisiyle beğenmenin dışında kullanıcıları uygulamayı etkin hale getirmelerini isteyebilirsiniz. Böylece kişisel bilgilerine erişiminiz açık oluyor ve api desteğiyle rahatlıkla bilgilerini depolayabilirsiniz.

  20. Rıza Selçuk Saydam diyor ki:

    Mümkün, fakat bunun için sizin yetkili olduğunuz bir uygulamayı kullanması gerek. Böylece yeni veriyi ayrı olarak saklayamasanız da 'virgül' ü ayraç olarak alıp tüm beğenileri listeletebilirsiniz. Günlük karşılaştırma gibi bir fonksiyon da koyarsanız yeni beğendiklerini ayırabilirsiniz. Umarım açık anlatabilmişimdir.

  21. Hakan Dinçer diyor ki:

    Rıza bey, biraz daha açarmısınız.. Sizi bulmuşken bırakmak istemem :) Çünkü inanın günlerdir bunu çözemedim ve ruh sağlıgım bozuldu ..
    "html etiketini düzenlemek" derken tam olarak ne yapmam gerektiğni açık yazarsanız çok memnun kalırım…
    Kusura bakmayın benim bilgisizliimden kaynaklanıyor olabilir…
    Yalnız garip olan bişey var o nu da belirteyim.. http://developers.facebook.com/docs/reference/plu…
    adresindeki Like Box oluşturucuya Facebook sayfamın ID si olan 138005732819 yazdığımda orda bile "Beğen" tıkladığımda "Hata" çıkıyor..Yani kodu sayfama eklemeden bile zaten "hata" kodunu alıyorum..
    Not: Google da bu problemi yaşayanların aramalarında sayfanız baş sırada gelmekte dolaysıı ile burda verdiğiniz bilgiler gerçekten takdire değer..Saygılar.

  22. Rıza Selçuk Saydam diyor ki:

    Yukarıdaki anlatımda 'Şekline getiriyoruz. opengraphprotocol ‘ü meta tag konusunda rahat olmak için ekledik.' diye bir içerik geçiyor. Onun hemen üstündeki kodu uygulamamışsınız. Sisteminiz wordpress olmasından header.php 'de heyer almayabilir kod fakt vbulletin için html etiketine etki edebileceğiniz tema ayarlarından bir bölüm olmalı.

    Eğer yerini bulamazsanız daha ayrıntılı ilgileneceğim.

  23. Hakan Dinçer diyor ki:

    Rıza bey, Vbulletin deki Tema ayarlarından Global Şablonlar da "Header Include" bölümüne kodları girdim.. Ancak sizin yukarda örnek verdiğiniz şekilde girince olmadı..Ben bişeyi yanlış yapıyorum sanırım.. ..Mesajınızda "daha ayrıntılı ilgileneceğim" demeniz beni mutlu etti.
    Motordelisi.com büyük bir portal ve bu özelliğin çalışması benim için çok önemli..Yardımlarınızı bekliyorum…

  24. Rıza Selçuk Saydam diyor ki:

    Değişikliği olması gerektiği gibi uygulamamışsınız.

    <html xmlns="http://www.w3.org/1999/xhtml&quot; dir="ltr" lang="tr"> olan kodu <html xmlns="http://www.w3.org/1999/xhtml&quot;
    xmlns:og="http://opengraphprotocol.org/schema/&quot;
    xmlns:fb="http://www.facebook.com/2008/fbml&quot; <?php language_attributes(); ?>> ile değiştirmeniz gerekiyor.

    Yorumda kodlar garip çıkabilir koruma olduğundan. şu adrese bakın; http://codepaste.net/mmutje

  25. Hakan Dinçer diyor ki:

    Rıza bey, kodları ekledim ama yine olmadı.. :( ((( Ancak Kaynak Kodunda <head> in üstüne yani mevcut DOCTYPE ı nerden değiştireceğimi bulamadım sanırım…
    Birde bana verilen kodu sadece benim sayfamda değil PC de oluşturdugum bir html içerisinde de hata alarak görüyorum..Yani acaba sorun başka yerde olmasın ..

  26. Hakan Dinçer diyor ki:

    Kodları tamda dediğini gibi ekledim, ancak yine o "hata" geliyor..
    Rıza bey, benim aklımın aldığı kodları siteme eklemedende zaten o "hata" çıkıyor…
    Yani Facebook un şu aşagıdaki linkine benim sayfa ID numaramı (138005732819) yazıp denermsiniz .. http://developers.facebook.com/docs/reference/plu…

    Yani sayfadaki kodlardan değil gibi geldi bana.. Profilimden denemek için yeni bir sayfa oluşturup o yeni sayfanın ID yi yazdığımda yine aynı hata geliyor.. 1 haftadır bununla ugraşıyorum..Çok ilginç…

  27. Rıza Selçuk Saydam diyor ki:

    İlgili sorununu araştırdım, yapılabilecek tek şey Facebook ile iletişime geçmek. Bu konuda bildirebileceğin kaynak da şurası; http://www.facebook.com/help/contact.php?show_for…

  28. memet diyor ki:

    slm benim bi sorunum var çıldırcam artık az kaldı sayfamda paylaşım yapyığımda resim çıkmıyor bunu nerden halledebilirim acıklama yaparsanız sevinirim tşkler

  29. Rıza Selçuk Saydam diyor ki:

    Beğenide görselle paylaşmaz facebook'a, eğer beğeniden sonra açılan yorum kutusuna bir şeyler yazar sonra paylaşırsan o zaman görsel çıkar. Umarım anlatabilmişimdir.

  30. memet diyor ki:

    anlatamadım sanırsam :S ben sadece sayfadaki herhangi bi paylaşımı, paylaştığım zaman resim çıkmıyor o resmi çıkartabilmem için ne yapmam gerekiyor
    mesela ; <img src="http://i1011.hizliresim.com/2010/11/17/959.gif&quot; alt="FaceBook ta paylaş"> burdan bişi mi yapmam gerekiyor. beğen kodunu yapmak için burdan yaptım ama paylaşta olmuyor <a href="http://developers.facebook.com/docs/reference/plugins” target=”_blank”>http://developers.facebook.com/docs/reference/plugins

  31. memet diyor ki:

    öyle bişi yokki :( http://i1011.hizliresim.com/2010/11/17/959.gif bu link sadece facebook ta paylaş resmi neyse tşkler illaki bulucam bunu biyerlerden :)

  32. perde diyor ki:

    Beğenide görselle paylaşmaz facebook'a, eğer beğeniden sonra açılan yorum kutusuna bir şeyler yazar sonra paylaşırsan o zaman görsel çıkar. Umarım anlatabilmişimdir.


Yorum yap, fikrini paylaş

Buraya sizin reklamınızı koyalım! ((:RSS @ Galata Kulesi, İstanbulRSS: Hellö kaplumbağa yavrusu! @ Balıkesir.RSS /w @muratsanlisavas @ Sansüre Sansür RSS @ Lojman, BursaRSS @ Haller, Eskişehir | Teşekkürler @Gökhür Arıkboğa :)RSS @ Göksu Parkı, AnkaraRSS @ Likemind BursaRSS @ TEDxRSS @ EskişehirTEDxReset 'What IF?'Buraya sizin reklamınızı koyalım! ((: