Sayaçlı Sosyal Medya Butonları Yapma

Milyonlarca insanın aktif olarak yer aldığı sosyal medya artık blog ve web siteleri için çok önemli hit kaynakları haline geldi. Bu durumu değerlendirmek için en iyi yöntem hiç şüphesiz ki sayfalarınızda paylaşım butonlarının olmasıdır. Sosyal medya buton kodlarını çoğu kaynaktan kolayca bulabilirsiniz. Benim bu makaleyi kaleme almamdaki amacım özellikle blog sahiplerinin makalelerinin sosyal medyada paylaşım sayılarını görebilmeleri için sayaçlı paylaşım butonları yapmayı anlatacağım. Paylaşım butonlarının görüntüsü aşağıdaki hale dönüşecektir:

Blogger kullanıcıları için şablonda ]]></b:skin> kodunu aratarak aşağıdaki kodların bu koddan önde yapıştırılması gerekli:

#mblSocialFloat {
    clear: both;
    padding: 6px 0;
    display: block;
    background: #FFFFFF;
}
#mblSocialFloat td {
    padding: 4px;
    margin: 0;
    border: none;
}
#mblSocialFloat td iframe {
    max-width: 82px;
    width: 82px !important;
}
.horizontalsocial {
width: 100%;
border-top: 1px solid #d2d2d2;
float: left;
max-height: 50px !important;
background: #ffffff;
padding-bottom: 6px!important;
padding-top: 2px!important;
border-bottom: 1px solid #d2d2d2;
margin-bottom: 15px;
margin-left: -5px;
}
.horizontalsocial .sharertitle {
    float: left;
    border-right: 1px solid #d2d2d2;
    padding: 3px 10px 2px 0px;
    margin: 0 0px 0 0;
    color: #b1a9a5;
    text-transform: uppercase;
    line-height: 25px;
    vertical-align: middle;
    font-size: 14px;
}
.horizontalsocial .fb-like {
    width: 100px;
    float: left;
    border-right: 1px solid #d2d2d2;
    padding: 3px 0 2px;
    height: 25px;
}
.horizontalsocial .sharertwitter {
    float: left;
    width: 115px;
    border-right: 1px solid #d2d2d2;
    margin: 0 15px 0 0;
    padding: 3px 0 2px;
    height: 25px;
}
.horizontalsocial .sharergplus {
    float: left;
    width: 90px;
    margin: 0 15px 0 15px;
    padding: 3px 0 2px;
    border-right: 1px solid #d2d2d2;
    height: 25px;
}
.horizontalsocial .sharerbubble {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJMTMyM7WEgdW8cJLGHWk_7w9CZsEN_9ZUadytjign4ilb94a4p-fsU-hlBmYx1v2T9d80Y27ZUdtBKOK-Mt0ZiX-3BXz53MbRkMDjC2IYjBLL9WczyfL0HxElTMIo73vKpjSOmTPy3Xwd/s1600/Commentz.png) no-repeat;
    height: 25px;
    min-width: 25px;
    float: left;
    margin: 7px 0 0;
    line-height: 18px;
    vertical-align: top;
}
.horizontalsocial .sharerbubble a {
    color: #2d2520;
    padding: 0px 0 0px 30px;
    font-size: 18px !important;
    font-family: 'Lora', Arial, Helvetica, san-serif !important;
}
.horizontalsocial.fixed {
    position: fixed;
    top: -2px;
    z-index: 99999;
}
.social-buttons a {
    color: #666;
    text-decoration: none;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}

Ardından yine şablonda <data:post.body/> aratılarak aşağıdaki kodların <data:post.body/> kodunun altına eklenmesi gerekli:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='mblSocialFloat' id='mblSocialFloat'>
<table class='mblSocialFloat' width='100%'>
 <tr>
<td><div class='sharertitle'>Socialize It &#8594;</div>  </td>
  <td>
   <div class='sharertwitter'><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
  </td>
  <td>
   <div class='fb-like'><iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/></div>
  </td>
  <td>
<div class='sharergplus'><div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
  </td>
  <td>
<div class='sharerbubble'><span class='thecomments'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>0</b:if><b:if cond='data:post.numComments == 1'>1</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/></b:if></a></b:if></span></div>
  </td>
 </tr>
</table>
</div></div>
</b:if>
<!-- MyBloggerLab.com Floating Social Bar -->