Blogger Eklentisi: Sosyal İçerik Kilidi (Paylaş ve Aç)
Genellikle WordPress bloglarında gördüğümüz "Görüntülemek için Paylaş" (Share to Unlock) eklentisinin Blogger'da kullanımı ile ilgili çokça istek aldım. Bu yazıda, web dünyasında "Social Content Locker" olarak bilinen bu harika scripti sizlerle paylaşıyorum.
🔒 Sosyal İçerik Kilidi Nedir?
Oluşturduğunuz içeriğin özel bir kısmını (indirme linki, özel kod, bonus video vb.) ziyaretçilere kapatan; ziyaretçilerin bu kısmı görebilmeleri için yazıyı sosyal medyada paylaşmalarını şart koşan sisteme sosyal içerik kilidi denir.
Bu yöntem, yazılarınızın sosyal medyada viral olmasını ve trafiğinizin ciddi oranda artmasını sağlar.
Blogger'a Nasıl Kurulur?
Eklentiyi sorunsuz çalıştırmak için aşağıdaki 3 adımı sırasıyla uygulayın.
🛠️ 1. Adım: jQuery Kodu
İlk olarak şablonunuzda jQuery kütüphanesinin ekli olması gerekir. Blogger panelinden Tema > HTML'yi Düzenle yolunu izleyin ve <head> kodunu bulun. Hemen altına şu kodu ekleyin:
(Not: Şablonunuzda zaten jQuery varsa bu adımı atlayın.)
⚙️ 2. Adım: Script ve CSS Kodları
Şimdi sistemin çalışması için gerekli olan JavaScript ve CSS kodlarını ekleyeceğiz. Yine HTML'yi Düzenle kısmından </body> etiketini bulun (genelde en alttadır) ve hemen üstüne aşağıdaki kodları yapıştırın:
//<![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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
status : true,
xfbml : true
});
FB.Event.subscribe('edge.create', function(href, widget) {
$.event.trigger({
type: "pageShared",
url: href
});
});
};
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
twttr.events.bind('tweet', function (event) {
$.event.trigger({
type: "pageShared",
url: event.target.baseURI
});
});
});
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function plusOned(obj){
console.log(obj);
$.event.trigger({
type: "pageShared",
url: obj.href
});
}
$(document).on('pageShared',function(e){
if(e.url == window.location.href){
$(".secret").show();
$(".secret-share").hide();
}
});
//]]>
</script>
<style>
.secret {
text-align:center;
display:none
}
.secret-share {
padding: 20px;
text-align: center;
border: 3px solid #ddd;
background: #f8f8f8;
}
.secret-share .fb-like {
margin-top: 0;
top: -7px;
position: relative;}
.secret-share .twitter-share-button {
margin-right: 25px;
}
</style>
📝 3. Adım: Yazı İçinde Kullanımı
İlk iki adımı sadece bir kez yapmanız yeterlidir. Şimdi bu özelliği kullanmak istediğiniz yazıya gelin ve "HTML Görünümü"ne geçin. Gizlemek istediğiniz içeriği şu kodların arasına yerleştirin:
BURAYA GİZLENECEK OLAN İÇERİK/LİNK GELECEK
</div>
<div class="secret-share">
<p>Gizlenmiş içeriği görmek için lütfen aşağıdaki butonlardan biriyle paylaşın:</p>
<span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span>
<a class="twitter-share-button" data-count="horizontal" data-related="" data-via="mybloggerlab" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a>
<span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span>
</div>
Nasıl Görünecek?
Yukarıdaki kodda mavi ile belirtilen yere gizli içeriğinizi yazıp yayına aldığınızda; ziyaretçileriniz önce sadece "Paylaş" butonlarını görecek. Facebook Beğen, Tweet veya diğer etkileşimlerden birini yaptıklarında kilit açılacak ve gizli içerik görünür olacaktır.
 |
| Blogger için sosyal içerik kilidi |
🚀 Benzer İçerikler:
💻 Blogger Tanıtım Yazısı Rehberi: Fiyat Belirleme ve SEO Etkisi
