Table of Contents
Allow users to share your blog posts on popular social networks such as Facebook, Google, Twitter, LinkedIn, and Email with this quick-loading, social sharing widget. It uses ‘Font Awesome’, allowing you to easily customize the icons using pure CSS.
Step 1. Adding Font Awesome
Just below the opening <head> tag in your template adds the following code.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>Step 2. Social Sharing Icons
Find the <data:post.body/> tag (usually the second one) in your template and add the following code right below it.
<!-- Social Sharing Icons -->
<!-- Code by: helparchive.blogspot.com -->
<div id='share-btns'>
<!-- CSS -->
<style>
#share-btns img {float: left; width: 60px; margin-right: 10px}
#share-btns ul {list-style-type: none;}
#share-btns ul li {display: inline-block; padding: 3px 5px 0 1px;}
</style>
<img src='http://3.bp.blogspot.com/-BLgbb6up_zY/U_t74dcn6EI/AAAAAAAADU8/lvYsGSZKhKY/s1600'/>
<ul class='post-sharing-menu'>
<!-- Google Plus -->
<li class='share-gpl'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Share on Google +'>
<i class='fa fa-google-plus'></i>
</a>
</li>
<!-- Facebook -->
<li class='share-fbk'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'>
<i class='fa fa-facebook'></i>
</a>
</li>
<!-- Twitter -->
<li class='share-twt'>
<a expr:href='"http://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' rel='nofollow' target='_blank' title='Share on Twitter'>
<i class='fa fa-twitter'></i>
</a>
</li>
<!-- Pinterest -->
<li class='share-pnt' >
<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title' target='_blank' title='Pin It !'>
<i class='fa fa-pinterest'></i>
</a>
</li>
<!-- Linkedin -->
<li class='share-lkd'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share on Linkedin'>
<i class='fa fa-linkedin'></i>
</a>
</li>
<!-- Print -->
<li class='share-prn'>
<a expr:href='"http://www.printfriendly.com/print/v2?url=" + data:post.url' rel='nofollow' target='_blank' title='Create PDF And Print Friendly !'>
<i class='fa fa-print'></i>
</a>
</li>
<!-- Email -->
<li class='share-eml'>
<a href='mailto:?Subject=ENTER_SUBJECT_HERE&Body=Hey! Check out this article...' rel='nofollow' target='_blank' title='Email This'>
<i class='fa fa-envelope-o'></i>
</a>
</li>
</ul>
</div>
That’s it. The best thing about this widget is that there’s no JavaScript used. You can also customize the icons using CSS only. Here are a few customizations:
Original Colors
<!-- CSS -->
#share-btns ul li {display: inline-block; width: 30px; text-align: center;}
#share-btns ul li a {color:white;}
.share-gpl {background: #E13728;}
.share-fbk {background: #4A6EA9;}
.share-twt {background: #2DAAE1;}
.share-pnt {background: #CB1F26;}
.share-lkd {background: #0092C1;}
.share-prn {background: #A29F9F;}
.share-eml {background: #7CB09F;}
Rounded Icons in DarkSeaGreen
<!-- CSS -->
#share-btns ul li {display: inline-block; background: darkseagreen; text-align: center; width: 30px; border-radius: 50%;}
#share-btns ul li a {color:white; text-shadow: 1px 1px 1px rgb(38, 40, 39);}
Custom Icons
You can use your own icons simply by replacing the code “<i class='fa fa-...'></i>” with the URL <img src='URL_HERE'/> of the image, you would like to use.
