Add Social Sharing Widget built with Font Awesome 4.2.0

add post Sharing Widget built with Font Awesome 4.2.0

social sharing widget

Though social sharing widget is useful to increase the connectivity with blog post. Modern blog user use Font Awesome instead of the icons. So I have used Font Awesome 4.2.0  feature. This feature will display the social media icons instead of image. Remember that if you are using Font Awesome 4.2.0 then you don't have to add Font Awesome 4.2.0 file in your blog header section. So skip the Step 4. just follow the below steps-

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code <head>  by pressing Ctrl+F 

Step 4 Paste the below code  below/after <head>

<link href='//' rel='stylesheet'/>

Step 5 Now again Find this code ]]></b:skin>  by pressing Ctrl+F 

Step 6 Paste the below code  Before/above ]]></b:skin> 

/*Social Sharing Widget by */
.sotontroshare li {
float: left;
margin-right: 1.2%;
list-style-type: none;
.sotontroshare li .fa:before {
margin-right: 5px;
.sotontroshare li{width:17.6%;border:1px solid #EEE;padding:0}
.sotontroshare li a{padding:10px 0;background-color:#aaa;color:#FFF;display:block;border-radius:2px;}
.sotontroshare{overflow: hidden;
text-align: center;
margin: 20px 0;
padding-bottom: 15px;
.sotontroshare li a:hover{opacity:1}
.sotontroshare li .twitter{background-color:#55acee}
.sotontroshare li .facebook{background-color:#3b5998}
.sotontroshare li .gplus{background-color:#dd4b39}
.sotontroshare li .pinterest{background-color:#cc2127}
.sotontroshare li .linkedin{background-color:#0976b4}

Step 7 Now again Find this code <data:post.body/> or <div class='post-footer'>  by pressing Ctrl+F

Step 8 Paste the below code  below/after  <data:post.body/> or <div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sotontroshare'>
<li><a class='twitter' data-via='BloggerSpiceDotCom' expr:href='&quot;; + data:post.title + &quot;-&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='&quot;;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick=',&apos;sharer&apos;, &apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='&quot;; + 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='&quot;;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='&quot;; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>

Step 9 Now hit the Save template button.


After go through all the above steps check your blog post. This widget will appear at the end of every blog post. And now your blog readers will able to share your blog post easily. Thanks.

Post a Comment

Hi Mohammed, is really great, the only problem I have is that it does not work the color change effects when I press the buttons. Is there any idea?


Hi Evaggelos I didn't use any color changing effect in this widget. I have used Image opacity that means when you mouse over on widget then it will become bright. If you wish you can change the widget button color by changing color value--


Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *