How to Add custom Social Sharing Icons in Blogger Posts

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='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;t=&quot; + 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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;title=&quot; + 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='&quot;http://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + 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='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank' title='Pin It !'>
   <i class='fa fa-pinterest'></i>
 </a>
</li>
<!-- Linkedin -->
<li class='share-lkd'>
 <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://www.printfriendly.com/print/v2?url=&quot; + 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&amp;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.

Leave a Reply