Blogger Bloguna Facebook Tavsiyeler Çubuğu Ekleyin

Facebook kısa zaman önce Facebook Tavsiyeler Çubuğunu tanıttı. Bu yazımda sizlere bu çubuk hakkında bilgiler ve bu çubuğu sitenize nasıl ekleyebileceğinizi anlatacağım. Hazırsanız buradan başlayalım.

Önizleme

Facebook Tavsiyeler Çubuğu Kurulumu

Blogger paneline girdikten sonra Şablon › HTML’yi Düzenle butonuna tıklayıp Widget Şablonlarını Genişlet kutucuğunu işaretleyin. Ardından aşağıdaki kodu bulun.

<head>

Hemen bulduğumuz kodun altına aşağıdaki kodları ekliyoruz.

<!-- Facebook Tavsiye Çubuğu Kod Başlangıcı -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>

<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Facebook Tavsiye Çubuğu Kod Bitişi -->

Bu adımı yaptıktan sonra Facebook Tavsiyeler Çubuğu sayfasına gidin ve aşağıdaki adımları takip edin.

Uygulama Oluşturma

Karşımıza gelen sayfada URL of the article (?) ve Domain (?) kutucuklarına kodu eklemek istediğiniz site adresini girin ve Get Code butonuna tıklayın.

Karşımıza gelen pencereden create new app linkine tıklayın. Bu kısımdan sonrası halihazırda uygulaması bulunmayanlar içindir.

Aşağıdaki pencerede doldurmamız gereken yerler otomatik doldurulmuş olarak geliyor. O yüzden direkt Devam butonuna basın. Ardından gelen kelime doğrulama penceresini resimdeki karakterleri girerek geçip Gönder butonuna basın.

Uygulamayı oluşturduktan sonra pencere kapanıp arkaplana geri dönecektir. Tekrar şu resimdeki gibi Get Code butonuna tıklayıp aşağıdaki resimde mavi ile belirtilen alanda gösterilen kodu alın.

Son adımlara geldik. Şimdi ise Şablon › HTML’yi Düzenle butonuna tıklayıp Widget Şablonlarını Genişlet kutucuğunu işaretledikten sonra az önceki bölümde seçtiğiniz kodu şuradan <script> ile </script> arasında kalan alanı düzenleyerek aşağıdaki kodun altına yapıştırın.

<body>

Ve son adım, aşağıdaki kodun peşine

<data:post.body/>

Şu kodu yapıştırın

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class="fb-recommendations-bar" data-trigger="onvisible" expr:data-href="data:post.url" data-read-time="30" data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2"></div></b:if>

İşlemimiz bu kadar. Eklediğiniz kodu düzenlemek için aşağıdaki yönergeleri izleyin.

Facebook Tavsiyeler Çubuğu Kişiselleştirme

Az önce verdiğim kodun içindeki verileri inceleyelim:

  • data-read-time=”30″: Ziyaretçi sayfada kaç saniye kaldıktan widget görünecek? 30, saniye olarak düzenlenebilir.
  • data-num-recommendations=”5″: En fazla kaç gönderi gösterilecek? 5, gönderi sayısı olarak düzenlenebilir.
  • data-side=”right”: Widget sağ da mı yoksa solda mı görüntülenecek? right, right veya left olarak düzenlenebilir.

Yapacaklarımız bu kadar, herşeyi kaydedip bu işi bitirebilirsiniz. Hayırlısı olsun.

Paylaş

Furkan Özden

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

12 Cevaplar

  1. ReHiTu dedi ki:

    Verilen URL’ye Uygulama yapılandırması izin vermiyor.: One or more of the given URLs is not allowed by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App’s domains.

    Her şeyden önce Facebook’ta yukarıdaki hata beliriyor nedense…

    Bedavayasiyoruz.net için denedim ama olmuyor…

  2. Anonymous dedi ki:

    ben bu dediklerinizin hepsini yaptım fakat olmadı sonda ikitane kod yeri söylemişsiniz son kodu hangisine yapıştıracağız.

  3. Anonymous dedi ki:

    isyan ettirdi bu uygulama beni. İngilizce türkçe kaynakların çoğundan yararlanarak yapmaya çalıştırm ancak çalışmadı gitti. İSyan ettim anlayacağınız :@

  4. Anonymous dedi ki:

    İyi günler, çok güzel bir paylaşım. Blogunuza sağ tık engeli koyduğunuz için kodlar seçilmiyor, fakat onu bir şekilde halletim ekledim kodları ama bu seferde yeni uygulama oluştur penceresi çıkmıyor. Ne yapabilirim teşekkürler..

    • Furkan Özden dedi ki:

      Blogda sağ tık engeli yok. Kod kopyalandığında çıkmıyor sadece. Onun da sebebi bloga eklediğim share this eklentisi.

      Sorununuza gelecek olursak: Dil ayarlarınızı İngilizce yapıp deneyebilirsiniz.

    • Anonymous dedi ki:

      Uygulamayı yaptım fakat bu seferde creat new app kısmında devam dediğimde doğrulma seçeneği çıktı galiba bu uygulamayı eklemem biraz zor olacak çok teşekkür ederim gene zahmet verdim.

    • Furkan Özden dedi ki:

      Doğrulama sistemi her önüne gelenin uygulama yapmaması için geliştirilmiş bir yöntem.

  5. serkan dedi ki:

    Aynı hatayı bende alıyorum. “verilen URL’ye izin vermiyor” şeklinde bir hata. Bir çözüm yolu önerebilecek var mı?

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bunlar da hoşunuza gidebilir...