9.13.2012

Add/Ekle Blogger/Blogspot Facebook Comment/Yorum Box/Kutusu

Posted On : 7:27:00 ÖÖ  Yazan : LBT Kategori : ,

Blogger/Blogspot için Facebook' un geliştirmiş olduğu birçok eklentiden biri olan Facebook Comment bloğunuz için sosyal ağ trafiğinize yardımcı oluyor. Sitenizde yorum yapan ziyaretçilerin duvarında yayınlanan yorum aracılığı ile sitenizin Facebook üzerinde tanıtılmasına olanak tanıyor. Sosyal ağ trafiğinize katkıda bulanacak olan bu eklenti sayesinde ziyaretçileriniz Facebook yorum kutusu üzerinde birçok farklı platformu kullanarak yorum yapabilme ayrıcalığına sahip oluyor (Yahoo, AOL ve Hotmail).


Blogger/Blogspot Facebook Comment Box/Yorum Kutusu

Facebook Uygulaması Oluşturma

  • Öncelikle Facebook Developers sayfasına gidiniz.
  • Uygulamalar > +Yeni Uygulama Oluştur adımlarını izleyiniz.

  • "Create New App" sayfasında APP Name kısmına geçerli bir uygulama ismi yazarak devam ediniz. 
  • Karakter doğrulamasını onaylayın ve yeni uygulama oluşturulmuş olacaktır.

  • Son olarak APP ID kısmını kopyalayıp saklayınız.

  • Blogger' a giriş yapınız. 
  • Blogger şablonunuzun yedeğini alınız. [Yedekle/Geri Yükle + Tam Şablonu İndir] 
  • Şablon > HTML'i Düzenle > Devam Et sekmeleri ile şablon içeriğini görüntüleyiniz.
  •    "Widget şablonlarını genişlet' i onaylayınız." CTRL + F yardımı ile <html kodunu bulunuz.
Aradığınız kod şablonunuzun en başında bulunuyordur.
  • Aşağıdaki kodu bu koddan hemen sonra gelecek şekilde ekleyiniz.

xmlns:fb='http://www.facebook.com/2008/fbml'
Ekledikten sonra aşağıdaki gibi olması gerekmektedir.
<html xmlns:fb='http://www.facebook.com/2008/fbml'>

  • Devamında CTRL + F yardımı ile </body> kodunu bulunuz.
  • Bu koddan önce ya da sonra gelecek şekilde aşağıdaki Javascript kodları yapıştırınız.

Kodları kabul etmeyebilir bu yüzden HTML/Adsense Code Converter sayfasından kodları değiştirmelisiniz.
<div id='fb-root'/> <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/en_US/all.js#xfbml=1&appId=YOUR_APP_ID"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //]]> </script>

  • YOUR_APP_ID yerini az önce oluşturmuş olduğunuz APP ID ile değiştiriniz. 
  •  CTRL + F yardımı ile </head> kodunu bulunuz. 
  •  Bu kodun öncesine ya da sonrasına aşağıdaki html kodları yapıştırınız.

<meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <meta content='Last Blogger Tricks' property='og:site_name'/> <meta content='YOUR_BLOG_LOGO_IMAGE_URL' property='og:image'/> <meta content='YOUR_APP_ID ' property='fb:app_id'/> <meta content='https://www.facebook.com/pages/Last-Blogger-Tricks/397552666965563' property='fb:admins'/> <meta content='article' property='og:type'/>

  • Yukarıdaki kod kümesi içerisinden aşağıdaki maddeleri kendinize göre değiştiriniz. 
  • Last Blogger Tricks ( Kendi site isminizi buraya yazınız. ) 
  • YOUR_BLOG_LOGO_IMAGE_URL ( Kendi sitenizin logosunun linkini buraya yapıştırın. ) 
  • YOUR_APP_ID ( Kurmuş olduğunuz uygulamanın APP ID' sini buraya yazınız. ) 
  • https://www.facebook.com/pages/Last-Blogger-Tricks/397552666965563 ( Kendi Facebook sayfanızın linkini yapıştırınız. ) 
  •  CTRL + F yardımı ile <data:post.body/> ya da bazı şablonlarda <p><data:post.body/></p> kodunu bulunuz. 
Aşağıdaki kod kümesini bu koddan hemen sonra eklerseniz, yorum kutusu yazılarınızın alt bölümünde gözükecektir. Ya da üstüne ekleyerek yazının üstündede gösterebilirsiniz.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='padding:10px 0px 5px 0px; margin:0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='97%'/></div> <div style='color:#ffffff; background-color:#3b5998;border: solid 1px #ddd; font-size:11px; padding:3px; width:97%;'>Facebook Comments Box<a href='http://lastbloggertricks.blogspot.com' target='_blank'><b>Last Blogger Tricks</b></a></div></div></b:if>

  • En son olarak şablonunuzu ön izleme yapınız, herhangi bir sorun yoksa kaydediniz. 
  • Blogger' a geri dönüş yapınız. 
  • Ayarlar > Yayınlar ve yorumlar > Yorum Konumu' nu Gizle moduna getiriniz.


Bu yazıyı beğendiniz mi?

Yorum yok

Tıklayın ! Yeni yorum ekleyin.

Kaydol: Kayıt Yorumları (Atom)