Blogger İçin Sosyal İçerik Kilidi

Genellikle Wordpress bloglarda gördüğümüz “Görüntülemek İçin Paylaş” scriptinin Blogger’da kullanımı ile ilgili istekler aldım. Bu yazıda, blog dünyasında “share to unlock” veya “social content locker” olarak bilinen scripti sizlerle paylaşacağım.

blogger sosyal içerik kilidi


Sosyal İçerik Kilidi Nedir?

Oluşturduğunuz içeriğin istediğiniz kısmını ziyaretçilere kapatan ve ziyaretçilerin kapalı kısmı görüntüleyebilmeleri için yazıyı sosyal medyada paylaşmalarının gerektiği scripte sosyal içerik kilidi diyebiliriz.

Yazılarınızın sosyal medyada bol bol paylaşılmasını ve buna bağlı olarak sosyal medya trafiğinizin artmasını sağlayacak bu eklentiyi farklı şekillerde kullanabilirsiniz. Örneğin blogunuzda çok önemli bir bilgi paylaşırken, bir download linki paylaşırken, video veya fotoğraf paylaşırken, kod paylaşırken vs.



Sosyal İçerik Kilidini Blogger’da Kullanma

Bu eklentiyi Blogger’da kullanmak için aşağıdaki adımları takip edin.

1. Adım: İlk olarak şablonunun HTML kodlarına jquery kodu eklemeniz gerekiyor. (Not:Şablonda sadece bir adet jquery kodu olmalı. Daha önce eklediyseniz bu adımı atlayın.) Bunun için Blogger kumanda panelinde Şablon > HTML’yi Düzenle diyerek <head> kodunu bulun ve hemen altına şu jquery kodunu ekleyin:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

2. Adım: İkinci olarak javascript ve CSS kodlarımnı eklemelisiniz. Bunun için Blogger kumanda panelinde Şablon > HTML’yi Düzenle diyerek </body> kodunu bulun ve hemen üstüne şu kodları ekleyin:

<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";
     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: İlk iki adımda eklediğimiz kodlar şablonun HTML kodlarına tek seferlik ekleyeceğimiz kodlardı. Şimdi kullanacağımız kod ise eklentiyi kullanmak istediğiniz her yazıya eklemeniz gereken koddur. Sosyal içerik kilidini kullanmak istediğiniz yazının HTML bölümüne giderek eklentinin görüntülenmesini istediğiniz yere şu kodları ekleyin:

<div class="secret">
BURASI GİZLENECEK İÇERİK</div>

<div class="secret-share">
<p>Gizlenmiş içeriği görmek için bu yazıyı paylşmanız gerekmektedir.</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>

Gizlenmesini istediğiniz bölümün HTML kodlarını mavi renkle gösterdiğim yere yapıştırdıktan sonra önizleme yaptığınızda o bölümün yerinde sosyal içerik kilidinin göründüğünü göreceksiniz.

Gizli bölümü görmek için Facebook beğen, Twitter tweet veya Google Plus +1 butonlarından birine tıklamalı ve sosyal medya hesaplarınızda paylaşmalısınız.

Soru ve düşüncelerinizi yorum bölümünden paylaşabilirsiniz. Bu eklentiyi faydalı bulduysanız lütfen sosyal medya hesaplarınızda paylaşarak Blog Hocam’a destek olun.

31 yorum:

  1. Teşekkürler bloggerı bırakmış olsam da böyle fonksiyonel şeyleri bloggerda görmeye başlamak sevindiriyor :)

    YanıtlaSil
  2. Sayın Serdar Kara

    Gerçekten bloggerlar için yapmış olduğun çalışmalar takdire şayan. Yine bu çalışma ile farkını ortaya koymuşsun. Emeğine, yüreğine kalemine sağlık.

    Sevgi, saygı ve hürmetlerimle

    YanıtlaSil
  3. Hocam oncelikle guzel bir icerik tesekkur ederim fakat;
    sitemde test edeyim dedim ancak bir sorunla karsilastim;
    twitter`de sorunsuz icerik paylasiliyor ancak google+ ve facebook butonu bende calismadi.
    Link aciliyor vs. ama facebook`a girip baktigimda linki paylasmamisti.

    YanıtlaSil
  4. http://www.mybloggerlab.com/2016/08/how-to-add-share-to-unlock-download-link-in-blogger.html


    Kaynak belirtseydiniz iyiydi. Neyse ben belirtmiş oldum. Eğer yorumu yayınlarsanız tabi ?

    YanıtlaSil
  5. Çok faydalı bir siteniz var, severek takip ediyorum:)

    YanıtlaSil
  6. Hocam emeğin için teşekkürler kaynak arasam her yerde bulurum sen paylaştığın için öğrendim teşekkürler.

    YanıtlaSil
  7. Kendi blog sitelerime bunları koyucam, teşekkürler.

    YanıtlaSil
  8. mobil uygulamalarda da gözüküyor mu bu özellik?

    YanıtlaSil
  9. Hocam çok faydalı bir siteniz var ama size ufak bir tavsiye vereyim , mesela ben önizlemesini görmek istiyorum bu özelliklerin lütfen ön izlemede yükleyin.

    BAŞARILAR HOCAM

    YanıtlaSil
  10. Süper bir paylaşım :D ancak WordPress'e geçmeyi düşünüyorum :( Keşke blogger daha kullanışlı olsa aslında arkasında koskoca Google şirketi var :(

    YanıtlaSil
  11. Acaba google indexlemesi ile ilgili bir sorun cıkıyor mu ?

    YanıtlaSil
  12. Blog Hocam, Sayın Serdar Kara,

    Paylaşımlarınızı takdir ederim. Bulunduğunuz mevkiyi gerçekten iyi kullanıyorsunuz sevgilerimle Blog Dershanesi http://www.blogdershanesi.com/

    YanıtlaSil
  13. Hocam lutfen cevap verir misiniz, yardiminiza ihtiyacim var.
    Ben bloguma uyguladim fakat mesela +1 butonuna basiyorum ama google plusta paylasmiyor, sadece orda gorunen +1 sayisi artiyor, facebook`da ayni sekilde.

    YanıtlaSil
  14. Bence harika bir uygulama. Adım üstündeki bağlantıda bunu uyguladım gayet güzel görünüyor. Teşekkürler paylaşımınız için.

    YanıtlaSil
  15. Paylaşımın çok güzel cidden beğendim. Fakat internette artık hiç bir şey eskisi gibi değil. Eskiden sitemize ziyaretçi gelince mutlu olurduk bizi takip ediyorlar diye fakat şuanda öyle bir şey göremiyorum ben. Blogspot çok yetersiz kaldı tasarım bakımından eklentiler bakımından. Umarım google geliştirmeyi düşünüyordur. :(

    YanıtlaSil
  16. hocam ellerinden öperim.İyiki varsın

    YanıtlaSil
  17. Ellerinizden öperim hocam uzun bir süredir böyle birşey arıyordum

    YanıtlaSil
  18. Bana bu eklenti biraz suistimale açık gibi geldi. Kulağa hoş geliyor. Emeklerinin karşılığı olarak yazının sosyal medya da paylaşılması hoş ama bazı insanlar hiçbir kırık bir linki bile kullanarak sosyal medya paylaşımı alabilir.

    Eklenti için teşekkür ederim. Umarım doğru amaçlar için kullanılır.

    YanıtlaSil
  19. adsense onayı bekleyenler yapmazlarsa iyi olur gibime geliyor.

    YanıtlaSil
  20. Serkan bey en son konuya binaen bu tür eklentiler de cezalandırma nedeni olmasın?

    YanıtlaSil
  21. Güzel bir paylaşım olmuş. harika bir eklenti

    YanıtlaSil
  22. Bu eklenti gerçekten hoşuma gitti, harika bir konu olmuş. Ellerinize sağlık.

    YanıtlaSil
  23. merhaba; yazılarınızdan yola çıkarak bugün kendi bloğumu oluşturdum ancak Google da blog ismimi yazarak arattığımda çıkmıyor. neden olabilir? teşekkürler

    YanıtlaSil
  24. Google'da blog isminizi arattığınızda sitenizin çıkması için google'ın sitenizi indexlemesi yani kaydetmesi gerekir. Sitenizi google a kaydettirmelisiniz. İkincisi google'a site kaydı yaptığınızda google botlarının(google'ın sitenizi okuyan robotlarının) sitenizi taraması ve uygun başlıklarla indexlemesi zaman alan bir süreç olabilir. Yani site açtığınız ilk gün googleda çıkmamanız normaldir.

    Hocamız dururken üstüme vazife olmayarak cevap yazdım. Kusura bakmayın lütfen.

    YanıtlaSil
  25. bende Google da çıkmak için çok çabalıyorum sizin bilgilerinizde yardımcı oldu

    YanıtlaSil
  26. paylaşımlarınız çok iyi neredeyse hepsini sitemde kullanıyorum teşekkürler
    http://yusufkarakaya.com.tr

    YanıtlaSil
  27. Merhaba,
    Daha once de bir arkadasin belirttigi gibi kod sorunlu ne yazik ki fb ye tiklayip begenince linki gostermiyor tweet e tiklayinca tweetleme islemi yapilmasa bile link ortaya cikiyor g+ ise fb gibi +1 lense bile calismiyor.
    Web kodlarindan pek anlamadigimdan bunu cozemedim acaba vaktiniz olurda bi ilgilenebilirseniz cok makbule gecer, zira tam ihtiyacimiz olan sey.
    Simdiden tesekkur ederim.

    YanıtlaSil

Blogger tarafından desteklenmektedir.