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.
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:
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:
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:
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.
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.
Teşekkürler bloggerı bırakmış olsam da böyle fonksiyonel şeyleri bloggerda görmeye başlamak sevindiriyor :)
YanıtlaSilSayın Serdar Kara
YanıtlaSilGerç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
Teşekkürler 👍
YanıtlaSilHocam oncelikle guzel bir icerik tesekkur ederim fakat;
YanıtlaSilsitemde 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.
http://www.mybloggerlab.com/2016/08/how-to-add-share-to-unlock-download-link-in-blogger.html
YanıtlaSilKaynak belirtseydiniz iyiydi. Neyse ben belirtmiş oldum. Eğer yorumu yayınlarsanız tabi ?
Çok faydalı bir siteniz var, severek takip ediyorum:)
YanıtlaSilHocam emeğin için teşekkürler kaynak arasam her yerde bulurum sen paylaştığın için öğrendim teşekkürler.
YanıtlaSilKendi blog sitelerime bunları koyucam, teşekkürler.
YanıtlaSilmobil uygulamalarda da gözüküyor mu bu özellik?
YanıtlaSilHocam ç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.
YanıtlaSilBAŞARILAR HOCAM
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ıtlaSilAcaba google indexlemesi ile ilgili bir sorun cıkıyor mu ?
YanıtlaSilHayır indexlemeyi etkilemez.
SilHocam maillere bakar mısınız lütfen
SilBlog Hocam, Sayın Serdar Kara,
YanıtlaSilPaylaşımlarınızı takdir ederim. Bulunduğunuz mevkiyi gerçekten iyi kullanıyorsunuz sevgilerimle Blog Dershanesi http://www.blogdershanesi.com/
Hocam lutfen cevap verir misiniz, yardiminiza ihtiyacim var.
YanıtlaSilBen bloguma uyguladim fakat mesela +1 butonuna basiyorum ama google plusta paylasmiyor, sadece orda gorunen +1 sayisi artiyor, facebook`da ayni sekilde.
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ıtlaSilPaylaşı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ıtlaSilhocam ellerinden öperim.İyiki varsın
YanıtlaSilEllerinizden öperim hocam uzun bir süredir böyle birşey arıyordum
YanıtlaSilBana 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.
YanıtlaSilEklenti için teşekkür ederim. Umarım doğru amaçlar için kullanılır.
adsense onayı bekleyenler yapmazlarsa iyi olur gibime geliyor.
YanıtlaSilSerkan bey en son konuya binaen bu tür eklentiler de cezalandırma nedeni olmasın?
YanıtlaSilGüzel bir paylaşım olmuş. harika bir eklenti
YanıtlaSilBu eklenti gerçekten hoşuma gitti, harika bir konu olmuş. Ellerinize sağlık.
YanıtlaSilmerhaba; 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ıtlaSilGoogle'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.
YanıtlaSilHocamız dururken üstüme vazife olmayarak cevap yazdım. Kusura bakmayın lütfen.
bende Google da çıkmak için çok çabalıyorum sizin bilgilerinizde yardımcı oldu
YanıtlaSilçok teşekkürler
YanıtlaSilpaylaşımlarınız çok iyi neredeyse hepsini sitemde kullanıyorum teşekkürler
YanıtlaSilhttp://yusufkarakaya.com.tr
Merhaba,
YanıtlaSilDaha 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.