Sosyal paylaşım butonları, bir blogda olması gereken en önemli eklentilerden biridir. Blogunuzda sosyal paylaşım butonları eklentisi kullanmıyorsanız, paylaşımlardan gelebilecek trafik ve kazançlarından faydalanmıyorsunuz demektir. Bu nedenle, blogunuzda en az bir sosyal paylaşım butonları eklentisi kullanmanız önerilir.
Diğer önemli hususlar da hangi sosyal paylaşım butonları kullanılmalı? Aradığınız eklenti blogunuza uyum sağlıyor mu ve ziyaretçilerin ilgisini çekebilecek mi? En önemlisi de blog sitenizin hızına etki edecek mi? Bu soruların cevabını düşünürken kendinize şu soruyu sorun: Bloğum için sosyal paylaşım butonları eklentisi nasıl olmalı?
Bu yazımda, yukarıdaki soruların cevabına uygun olabilecek, araştırmalarım sonucunda tecrübemi de kullanarak CSS kodları ile oluşturmuş olduğum blog için sosyal paylaşım butonları eklentisini sizlerle paylaşacağım.
Blog İçin CSS Sosyal Paylaşım Butonları Eklentisi
CSS, HTML ve SVG simgelerini kullanarak tasarladığım sosyal paylaşım butonları, blog yayınlarının hemen altında otomatik olarak tam ve düzenli olarak konumlanır. Birçok sosyal paylaşım butonlarının sahip olmadığı CSS "flix" özelliği sayesinde tüm ekran boyutlarına tam uyum sağlar. Diğer bir özelliği de javaScript eklentisi kullanmadan doğrudan kullanılabilmesidir. Harika renk uyumu ve muhteşem tasarımı ile blog ziyaretçilerinizin ilgisini de çekebilecek bir ekletidir.
Bknz: Blogger Yapışkan Sosyal Paylaşım Butonları
Bu eklentide Facebook, Twitter, Linkedin, Google+, Whatsapp, Mail ve Yazdır butonu yer almaktadır. Yazdır ve Mail butonları mobil ekranlarda görüntülenmemektedir. Whatsapp butonu ise sadece mobil ekranlarda görüntülenmektedir. Şimdi bu sosyal paylaşım butonlarını blog sitenize eklemek için aşağıdaki adımları takip edin.
1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinin sol tarafında bulunan menüden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın. Açılan şablon editör sayfada bulunan </head> kodunun bir satır üzerine aşağıdaki CSS kodlarını ekleyin.
<b:if cond='data:blog.pageType == "item"'>
<style>
.ShareButtons {
margin: 0;
padding: 0;
width: 100%;
margin-bottom: 12px;
list-style-type: none;
background: #ccc;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -ms-flexbox;
display: -moz-flex;
display: flex
}
.ShareButtons svg {
display: inline-block;
height: 30px;
margin: 4px 0;
vertical-align: top;
width: 30px;
fill: #fff
}
.ShareButtons .gp-btn svg {
margin: 2px 0;
height: 34px;
width: 34px
}
.ShareButtons li {
height: 38px;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1
}
.ShareButtons li a {
height: 38px;
display: block;
text-align: center;
cursor: pointer;
}
.ShareButtons li.fb-btn a {
background: #3b5998
}
.ShareButtons li.tw-btn a {
background: #42a4f5
}
.ShareButtons li.in-btn a {
background: #008cc9
}
.ShareButtons li.in-btn a {
background: #0077b5
}
.ShareButtons li.gp-btn a {
background: #d74314
}
.ShareButtons li.pin-btn a {
background: #cb2027
}
.ShareButtons li.ws-btn a {
background: #4dc247
}
.ShareButtons li.print-btn a {
background: #959595
}
.ShareButtons li.mail-btn a {
background: #acacac
}
.ShareButtons li.ws-btn a:hover {
background: #43ad3d;
}
.ShareButtons li.fb-btn a:hover {
background: #05345c
}
.ShareButtons li.in-btn a:hover {
background: #008cc9
}
.ShareButtons li.tw-btn a:hover {
background: #3678af
}
.ShareButtons li.gp-btn a:hover {
background: #791407
}
.ShareButtons li.pin-btn a:hover {
background: #8f2217
}
.ShareButtons li.print-btn a:hover,
.ShareButtons li.mail-btn a:hover {
background: #797979
}
</style>
</b:if>2- Aşağıdaki HTML kodları eklemek için, şablon editör sayfasında shareButtons kodunu bulun aşağıdaki örnekte olduğu gibi bulduğunuz kodlar ile aşağıdaki HTML kodları değiştirin.
Örnek Kod
<b:includable id='shareButtons' var='post'>
.............
.............
.............
</b:includable><b:includable id='shareButtons' var='post'>
<ul class='ShareButtons'>
<li class='fb-btn'>
<a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank' title='Facebook'>
<svg alt='Facebook' title='Facebook' viewBox='0 0 32 32'>
<title>Facebook</title>
<path d='M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z' />
</svg>
</a>
</li>
<li class='tw-btn'>
<a expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' target='_blank' title='Twitter'>
<svg alt='Twitter' title='Twitter' viewBox='0 0 32 32'>
<title>Twitter</title>
<path d='M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 0 0 1.984-2.496 9.037 9.037 0 0 1-2.866 1.095 4.513 4.513 0 0 0-7.69 4.116 12.81 12.81 0 0 1-9.3-4.715 4.49 4.49 0 0 0-.612 2.27 4.51 4.51 0 0 0 2.008 3.755 4.495 4.495 0 0 1-2.044-.564v.057a4.515 4.515 0 0 0 3.62 4.425 4.52 4.52 0 0 1-2.04.077 4.517 4.517 0 0 0 4.217 3.134 9.055 9.055 0 0 1-5.604 1.93A9.18 9.18 0 0 1 6 23.85a12.773 12.773 0 0 0 6.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 0 0 2.252-2.336' />
</svg>
</a>
</li>
<li class='in-btn'>
<a expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' target='_blank' title='Linkedin'>
<svg alt='LinkedIn' title='LinkedIn' viewBox='0 0 32 32'>
<title>LinkedIn</title>
<path d='M26 25.963h-4.185v-6.55c0-1.56-.027-3.57-2.175-3.57-2.18 0-2.51 1.7-2.51 3.46v6.66h-4.182V12.495h4.012v1.84h.058c.558-1.058 1.924-2.174 3.96-2.174 4.24 0 5.022 2.79 5.022 6.417v7.386zM8.23 10.655a2.426 2.426 0 0 1 0-4.855 2.427 2.427 0 0 1 0 4.855zm-2.098 1.84h4.19v13.468h-4.19V12.495z' />
</svg>
</a>
</li>
<li class='gp-btn'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank' title='Google+'>
<svg alt='Google+' title='Google+' viewBox='0 0 32 32'>
<title>Google+</title>
<path d='M12 15v2.4h3.97c-.16 1.03-1.2 3.02-3.97 3.02-2.39 0-4.34-1.98-4.34-4.42s1.95-4.42 4.34-4.42c1.36 0 2.27.58 2.79 1.08l1.9-1.83C15.47 9.69 13.89 9 12 9c-3.87 0-7 3.13-7 7s3.13 7 7 7c4.04 0 6.72-2.84 6.72-6.84 0-.46-.05-.81-.11-1.16H12zm15 0h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2z' />
</svg>
</a>
</li>
<li class='pin-btn'>
<a expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank' title='Pinterest'>
<svg alt='Pinterest' title='Pinterest' viewBox='0 0 32 32'>
<title>Pinterest</title>
<path d='M7 13.252c0 1.81.772 4.45 2.895 5.045.074.014.178.04.252.04.49 0 .772-1.27.772-1.63 0-.428-1.174-1.34-1.174-3.123 0-3.705 3.028-6.33 6.947-6.33 3.37 0 5.863 1.782 5.863 5.058 0 2.446-1.054 7.035-4.468 7.035-1.232 0-2.286-.83-2.286-2.018 0-1.742 1.307-3.43 1.307-5.225 0-1.092-.67-1.977-1.916-1.977-1.692 0-2.732 1.77-2.732 3.165 0 .774.104 1.63.476 2.336-.683 2.736-2.08 6.814-2.08 9.633 0 .87.135 1.728.224 2.6l.134.137.207-.07c2.494-3.178 2.405-3.8 3.533-7.96.61 1.077 2.182 1.658 3.43 1.658 5.254 0 7.614-4.77 7.614-9.067C26 7.987 21.755 5 17.094 5 12.017 5 7 8.15 7 13.252z' />
</svg>
</a>
</li>
<b:if cond='data:blog.isMobileRequest == "true"'>
<li class='ws-btn'>
<a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%3A%20" + data:post.url' target='_blank' title='Whatsapp'>
<svg alt='WhatsApp' title='WhatsApp' viewBox='0 0 32 32'>
<title>WhatsApp</title>
<path d='M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z' />
</svg>
</a>
</li>
</b:if>
<b:if cond='data:blog.isMobileRequest == "false"'>
<li class='print-btn'>
<a href='javascript:print(document)'>
<svg alt='Yazdır' title='Yazdır' version='1.1' viewBox='0 0 32 32'>
<title>Print</title>
<path d='M24.67 10.62h-2.86V7.49H10.82v3.12H7.95c-.5 0-.9.4-.9.9v7.66h3.77v1.31L15 24.66h6.81v-5.44h3.77v-7.7c-.01-.5-.41-.9-.91-.9zM11.88 8.56h8.86v2.06h-8.86V8.56zm10.98 9.18h-1.05v-2.1h-1.06v7.96H16.4c-1.58 0-.82-3.74-.82-3.74s-3.65.89-3.69-.78v-3.43h-1.06v2.06H9.77v-3.58h13.09v3.61zm.75-4.91c-.4 0-.72-.32-.72-.72s.32-.72.72-.72c.4 0 .72.32.72.72s-.32.72-.72.72zm-4.12 2.96h-6.1v1.06h6.1v-1.06zm-6.11 3.15h6.1v-1.06h-6.1v1.06z' />
</svg>
</a>
</li>
<li class='mail-btn'>
<a expr:href='"mailto:url=" + data:post.url + "&title=" + data:post.title'>
<svg alt='E-posta' title='E-posta' viewBox='0 0 32 32'>
<title>Email</title>
<path d='M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z' />
<path d='M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z' />
</svg>
</a>
</li>
</b:if>
</ul>
</b:includable>3- Aşağıdaki HTML kodu örnek kodda olduğu gibi <data:post.body/> kodunun bir satır altına ekleyin. Blogunuzda birden fazla <data:post.body/> kodu olabilir, bu nedenle aynı işlemi bu kodlar altına ekleyerek deneyebilirsiniz. Yani, aşağıdaki HTML kodu nereye eklerseniz sosyal paylaşım butonları orada görüntülenecektir.
Örnek Kod
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<div class='clear'/>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</b:if><b:if cond='data:blog.pageType == "item"'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</b:if>Yukarıdaki adımları uyguladıktan sonra şablonu kaydedin ve blogunuzu kontrol edin. Aşağıdaki ön izleme butonuna tıklayarak eklentiyi ayrıntılı olarak inceleyebilisiniz.
Bu yazımızda blog siteleri için CSS tasarımlı sosyal paylaşım butonlarını paylaştım. Eklenti ile ilgili görüş ve sorularınız için lütfen yorum formunu kullanın.