W3C Uyumlu Facebook Beğen Kutusu (Like Box) ve Twitter Takip Et (Follow) Butonu

Mayıs 2012
Pts	Sal	Çar	Per	Cum	Cts	Paz
« Nis
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

// 24 Eylül 2011 kategori: Sosyal Ağlar

Facebook Beğen Kutusu (Like Box)

W3C Uyumlu Facebook Beğen Kutusu ve Twitter Takip Et Butonu

Web siteleri ve sosyal ağların etkileşimi, trafik, popülerlik ve reklam/tanıtım açısından artık olmazsa olmaz bir zorunluluk haline gelmiş bulunmakta. Özellikle Facebook ve Twitter bu noktada bildiğiniz gibi başrol oynayan sosyal ağlardır. Hal böyleyken, bizde doğal olarak bu iki servisi web sitemiz ile etkileşim içerisine alırız. Diğer taraftan, W3 validation standartlarını da en azından SEO açısından gözeterek sitemizi mümkün olduğunca temiz bir kod yapısında çalıştırmak isteriz. Fakat bu eklentilerin W3C ile uyumsuzluğu, özenerek oluşturduğumuz sitemizde hatalara neden olmaktadır. Bu noktada, Türkçe Facebook beğen kutusu (Like Box) için aşağıdaki kodları kullanarak web siteniz ile etkileşimi sağlarken aynı zamanda bu uyumsuzluk sorununu da halletmiş olacağız. Aslında yaptığımız şey, görünen hataları perdelemek olacak.

<div id="fb-root"></div>
<script type="text/javascript">
//< ![CDATA[
(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/tr_TR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script><script type="text/javascript">
//< ![CDATA[
document.write('<fb:like-box href="FACEBOOK SAYFANIZIN URL'İ" width="320" height="402" show_faces="true" border_color="#fcfcfc" stream="false" header="false">< /fb:like-box>');
//]]>
</script>

//< ![CDATA[

(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/tr_TR/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

//]]>

</script><script type="text/javascript">

//< ![CDATA[

document.write('<fb:like-box href="FACEBOOK SAYFANIZIN URL'İ" width="320" height="402" show_faces="true" border_color="#fcfcfc" stream="false" header="false">< /fb:like-box>');

//]]>

</script>

Ayrıca;

width (genişlik): “320″ değeri yerine kendi piksel değerinizi girebilirsiniz.

height (yükseklik): “402″ değeri yerine kendi piksel değerinizi girebilirsiniz.

show_faces (sayfanızı beğenenlerin küçük resimleri): “true” veya “false” değerlerinden birini seçerek fonksiyonu açık veya kapalı hale getirebilirsiniz.

border_color (çerçeve rengi): “#fcfcfc” yerine başka bir hex renk kodu atayabilirsiniz.

stream (Sayfa yazılarınız): “true” veya “false” değerlerinden birini seçerek fonksiyonu açık veya kapalı hale getirebilirsiniz.

header (Başlık Bölümü): “true” veya “false” değerlerinden birini seçerek fonksiyonu açık veya kapalı hale getirebilirsiniz.

Veya, Buradan ulaşacağınız sayfadan kendi beğen kutunuzu oluşturup xfbml olarak aldığınız kodu yukarıdaki ” document.write(‘BURAYA’); ” ekleyerek kullanabilirsiniz.

Twitter takip et(Follow) butonu

Aynı şekilde uyumlu bir Twitter takip et butonu için;

<a href="BURAYA TWİTTER ADRESİNİZ YAZILACAK" class="twitter-follow-button">Follow @TWİTTER KULLANICI İSMİNİZ</a> <script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>

1 2	<a href="BURAYA TWİTTER ADRESİNİZ YAZILACAK" class="twitter-follow-button">Follow @TWİTTER KULLANICI İSMİNİZ</a> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"> </script>

Veya, Buradan Türkçe “Takip Et” yerine İngilizce “Follow” seçeneği ile kod alın. Zaten twitter hayatımıza girdikten sonra “Follow” kelimesinin ne anlama geldiğini herhalde bilmeyen yoktur diye düşünüyorum.

İlginizi Çekebilecek Diğer Yazılar: