Blog yayınlarınızı ilgi çekici butonlar ile daha fazla paylaşılmasını sağlayabilirsiniz. Bu yazımızda CSS ve SVG ile tasarlanmış olan blog sosyal paylaşım butonlarını paylaşacağım.
Sosyal paylaşım butonları sadece CSS, SVG ve HTML kodlardan oluşmaktadır. Herhangi bir Javascript kodu içermemektedir.
Sosyal paylaşım butonları ekran boyutlarına uyumlu olup hem masaüstü ekranlarda hem de mobil ekranlarda otomatik olarak konumlanır. Mail gönderme butonu sadece masaüstü ekranlarda çalışmaktadır.
Whatsapp paylaşım butonları, masaüstü Whatsapp paylaşım butonu ve mobil Whatsapp paylaşım butonu olarak 2 farklı kodlamadan oluşmaktadır.
Blogger Sosyal Paylaşım Butonları Nasıl Eklenir?
Sosyal paylaşım butonları blog sitesine eklemek için öncelikle 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 ve aşağıdaki adımları takip edin.
Video
1- Aşağıdaki CSS kodları blogunuzun şablon kodları arasında bulunan </head> kodunun bir satır üzerine ekleyin.
CSS
<b:if cond='data:view.isPost'>
<style>
.ShareButtons{
margin:20px 0 0;
padding:0;
width:100%;
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;
margin:0;
position:relative;
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
list-style-type:none
}
.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.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.mail-btn a:hover{
background:#797979
}
</style>
</b:if>2- Aşağıdaki kodu şablon editör sayfanızda bulun.
HTML
<b:includable id='shareButtons' var='post'>...</b:includable>Yukarıdaki bulduğunuz kod ile aşağıdaki kodları değiştirin.
HTML
<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:else/>
<li class='mail-btn'>
<a expr:href='data:post.sharePostUrl + "&target=email"' target='_blank'>
<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>
<li class='ws-btn'>
<a expr:href='"https://web.whatsapp.com/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>
</ul>
</b:includable>3- Son olarak, sosyal paylaşım butonlarının görüntülenmesi için aşağıdaki kodu örnek kodda olduğu gibi kapanış kodunun bir satır üzerine ekleyin.
HTML
<b:if cond='data:view.isPost'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</b:if>Yukarıdaki kodu örnek kodlamada olduğu gibi eklediğinizde, butonlar ile içerik arasında herhangi bir menü veya Widget kalıyorsa, arada kalan menü veya Widget HTML açılış kodlarının hemen bir satır üzerine ekleyin.
Örnek Kodlama
<b:includable id='post' var='post'>
.....
.....
Kodu buraya ekleyin.
</b:includable>Yukarıdaki adımları doğru bir şekilde uyguladıktan sonra şablonu kaydedin ve blogunuzu kontrol edin.
Sosyal paylaşım butonları sadece yayınların bulunduğu sayfalarda görüntülenecektir. Eğer sosyal paylaşım butonlarını sabit sayfalarınızda da görüntülemek istiyorsanız, 1. adım eklemiş olduğunuz CSS kodunda ve 3. adımda eklemiş olduğunuz HTML kodda bulunan aşağıdaki etiketleri değiştirin.
Bknz: Blogger Yeni Veri Konumlandırma Etiketleri
Sadece yayın sayfalarında görüntülenmesini istiyorsanız aşağıdaki veri etiketini kullanın.
Yayın Sayfası Veri Etiketi
<b:if cond='data:view.isPost'> ... </b:if>Hem sabit sayfa hem de yayın sayfalarında görüntülenmesini istiyorsanız aşağıdaki veri etiketini kullanın.
Sabit ve Yayın Sayfası Veri Etiketi
<b:if cond='data:view.isSingleItem'> ... </b:if>Bu yazımızda CSS ve SVG ile oluşturulmuş olan blog sosyal paylaşım butonlarını paylaştık. Sosyal paylaşım butonları herhangi bir Javascript kodu içermediğinden dolayı blogunuz için sorun oluşturacak herhangi bir sorgu oluşturmaz. Bu yayınımız ile ilgili daha fazla bilgi almak için yorum formunu kullanabilirsiniz.