How Social share custom codes are better ?
- When you use Sumo me or Add this you are adding some Javascript in your template.That means it will affect your page load speed.
- But when you use custom social share codes you are including comparatively fewer javascript so the effect on page load speed is negligible.
You should know that page load speed also affects SEO.You can check the affect of different scripts and codes on your page loading by using pingdom.com .The faster your pages load,the better your SEO.So try to avoid using heavy javascript codes and look for lighter alternatives.
Social Share Button Style #1
The Demo of style 1 is the first image in the post title image.
CSS :
<style>
/*Social Sharing Widget by http://blograbbit.blogspot.com*/
.blograbbitshare li {
float: left;
margin-right: 1.2%;
list-style-type: none;
}
.blograbbitshare li .fa:before {
margin-right: 5px;
}
.blograbbitshare li{width:17.6%;border:1px solid #EEE;padding:0}
.blograbbitshare li a{padding:10px 0;background-color:#aaa;color:#FFF;display:block;border-radius:2px;}
.blograbbitshare{overflow: hidden;
text-align: center;
margin: 20px 0;
padding-bottom: 15px;
}
.blograbbitshare li a:hover{opacity:1}
.blograbbitshare li .twitter{background-color:#55acee}
.blograbbitshare li .facebook{background-color:#3b5998}
.blograbbitshare li .gplus{background-color:#dd4b39}
.blograbbitshare li .pinterest{background-color:#cc2127}
.blograbbitshare li .linkedin{background-color:#0976b4}
</style>
HTML :
<b:if cond='data:blog.pageType == "item"'>
<div class='blograbbitshare'>
<ul>
<li><a class='twitter' data-via='BloggingRabbit' expr:href='"http://twitter.com/home?status=" + data:post.title + "-" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/share.php?v=4&u=" + data:post.url + "&t=" + data:post.title' onclick='window.open(this.href,'sharer', 'toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
</ul>
</div>
</b:if>
Social Share Button Style #2
The demo of style 2 is the second image you observe in the post title image.
CSS :
<style>
/* CSS Share Button by blograbbit.blogspot.com*/
.brshare{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.brshare li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;box-shadow:0 0 0 -1px #e3e3e3;}
.brshare li:hover{box-shadow:4px 4px 0 -1px #e3e3e3;}
.brshare li a{padding:5px 0 6px 35px;color:#fff;display:block;border-radius:2px;}
.brshare li a:hover{background:#555555;color:#fff;}
.brshare li .twitter{background-color:#85c5f5;}
.brshare li .facebook{background-color:#6381c0;}
.brshare li .gplus{background-color:#ed6d5d;}
.brshare li .pinterest{background-color:#e44d52;}
.brshare li .linkedin{background-color:#2c9ad8;}
.brshare li .twitter:hover,.brshare li .facebook:hover,.brshare li .gplus:hover,
.brshare li .pinterest:hover,.brshare li .linkedin:hover{color:#fff;}
.brshare li:last-child{margin-right:0}
.brshare li .fa:before{position:abrolute;top:0;left:0;display:inline-block;padding:4px 15px;font-family:fontawesome;text-align:center;background:#444444;color:#FFFFFF;line-height:20px;}
.brshare li .fa {display:initial;}
</style>
HTML :
<b:if cond='data:blog.pageType == "item"'>
<div class='brshare'>
<ul>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='twitter' data-via='BloggingRabbit' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
</ul>
</div>
<div style='clear:both'/>
</b:if>Installation :
- Copy and Paste the CSS above </head> tag (Use CTRL+F to find it )
- Find </data:post.body> in your template.You will find it three times.Paste it just after the second one.
- Replace blue-coloured BloggingRabbit with your twitter username.
Last Words :
I hope you like this Social share pack.If you like it please share this post with others on social media.If you faced any problem feel free to comment.Thanks
0 comments:
Leave a Comment
1-No spamming (links etc unless necessary)
2-Ask what's related to the post