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 == "item"'>
<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='"en_US"' 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/>
<b:if cond='data:blog.pageType == "item"'><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.
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…
Hatayı dikkate almayıp devam edebilirsiniz, bir sorun teşkil etmiyor.
Peki ikinci adımda kodunu dönüştürdükten sonra sadece orayı mı ekleyeceğiz HTML kısmına yoksa div id kısmına da ekleyecek miyiz?
Hatayı dikkate almayıp devam ettim ama olmadı.
Evet dediğiniz kısmı da birlikte alıyorsunuz. Dönüştürülecek yer script kodlarının arası. Hatayı dikkate almadan geçmişsiniz ki bu adıma gelmişsiniz.
ben bu dediklerinizin hepsini yaptım fakat olmadı sonda ikitane kod yeri söylemişsiniz son kodu hangisine yapıştıracağız.
Mavi ile belirttiğim yer.
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 :@
İ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..
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.
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.
Doğrulama sistemi her önüne gelenin uygulama yapmaması için geliştirilmiş bir yöntem.
Aynı hatayı bende alıyorum. “verilen URL’ye izin vermiyor” şeklinde bir hata. Bir çözüm yolu önerebilecek var mı?