Luckily, someone informs you can get traffics from social networks as well and it will benefit in a long run. Without a second thought, you search for social sharing buttons to add in your blogger blog. But then, there are hundreds and thousands of social sharing widgets/plugins and you need to choose one.
Sometimes having too many options is as bad as having few. You can’t decide and end up choosing some heavy share plugin that will surely impact page speed. The page loads slowly and visitors leave quickly without even reading and sharing, which results in increasing bounce rate and slowly getting buried in search results.
I had been there as well — the phase with a plethora of options.
In this article, I want to help bloggers by providing simple and super lightweight social sharing plugin/widget that won’t affect page speed and have important social networks installed.
This plugin can be installed anywhere in the post: top, middle or at the end of post. The optimal place is at the end of post article. That way, once readers finish reading, they can share in a single click.
Please note: This is a horizontal social sharing widget. In case, you want a vertical social widget that floats along with a scroll, check out this : Responsive Floating Social share widget for blogger.
Features of this social sharing plugin
- Super Light Weight - Simple CSS and HTML calls
- Easy to Install - Only copy and paste
- No external API calls - Links are generated via anchor tags
- No tracking and bloats
- Responsive Design - Appears on mobile devices
- SVG Icons used - No Font Awesome Plugin needed
- Supports 5 Social channels - Facebook, Twitter, Pinterest, LinkedIn, Email
- Clean Design - Clear and easy to notice
Live Demo of super light weight social sharing buttons
Don't forget to hover and press the buttons ! Also, resize your browser to check responsiveness.
How to add social sharing buttons in blogger?
It is quite simple to add this widget in your blog. Copy and paste the below codes in your theme and hit save button. Also, don't forget to backup your blog before proceeding.Here's the HTML Part : Add this code to the location where you want this widget to appear.
<!-- Social Sharing Widget By TwistBlogg.com-->
<div class='tb-social'>
<!-- Email Button -->
<a class='icons-email' expr:href='"mailto:?subject=" + data:post.title + "&body=Visit:%20" + data:post.canonicalUrl' title='Email this'>
<i class='fa'>
<svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
<path d='M21.386 2.614H2.614A2.345 2.345 0 0 0 .279 4.961l-.01 14.078a2.353 2.353 0 0 0 2.346 2.347h18.771a2.354 2.354 0 0 0 2.347-2.347V4.961a2.356 2.356 0 0 0-2.347-2.347zm0 4.694L12 13.174 2.614 7.308V4.961L12 10.827l9.386-5.866v2.347z'/>
</svg>
</i>
<span>Email</span>
</a>
<!-- Facebook Button -->
<a class='icons-facebook' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='"http://www.facebook.com/share.php?v=4&u=" + data:post.url + "&t=" + data:post.title' rel='nofollow noopener noreferrer' target='_blank' title='Share on Facebook'>
<i class='fa'>
<svg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'>
<path d='M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z'/>
</svg>
</i>
<span>Share</span>
</a>
<!-- Twitter Button -->
<a class='icons-twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='"http://twitter.com/share?text=" + data:post.title + "&url=" + data:post.url + "&via=twistblogg"' rel='nofollow noopener noreferrer' target='_blank' title='Tweet this article'>
<i class='fa'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'>
<path d='M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 1-2.48 2.71z'/>
</svg>
</i>
<span>Tweet</span>
</a>
<!-- LinkedIn Button -->
<a class='icons-linkedin' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=" + data:post.snippet' rel='nofollow noopener noreferrer' target='_blank' title='Share to linkedin'>
<i class='fa'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'>
<path d='M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z'/>
</svg>
</i>
<span>Share</span>
</a>
<!-- Pinterest Button -->
<a class='icons-pinterest' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title' rel='nofollow noopener noreferrer' target='_blank' title='Share to pinterest'>
<i class='fa'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'>
<path d='M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z'/>
</svg>
</i>
<span>Pin</span>
</a>
</div>
Now, we will add CSS code to make this social sharing widget look premium. Here's the CSS Part : Append it within style tag or b:skin tag.
/* Social Sharing Widget By TwistBlogg.com */
/* Keep the Credits Intact */
.tb-social {
overflow: hidden;
margin: 15px 0;
}
.tb-social a {
float: left;
width: 18.4%;
display: block;
margin-right: 2%;
height: 32px;
line-height: 32px;
background-color: #303030;
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.tb-social a:last-child {
margin-right: 0;
}
.tb-social a:hover,
.tb-social a:active {
color: #fff !important;
}
.tb-social .fa {
float: left;
width: 32px;
display: block;
height: 32px;
line-height: 32px;
text-align: center;
margin-right: 15px;
}
/* Change height and width attributes to increase/decrease icon size */
.tb-social svg {
height: 16px;
width: 16px;
fill: #fff;
}
.tb-social span {
position: relative;
width: 61px;
text-align: center !important;
}
/* Color Codes for Icons */
.icons-email .fa { //Email Icon
background-color: #5cbe4a;
}
.icons-facebook .fa { //Facebook Icon
background-color: #3c5b9b;
}
.icons-twitter .fa { //Twitter Icon
background-color: #2daae1;
}
.icons-linkedin .fa { //LinkedIn Icon
background-color: #0173b2;
}
.icons-pinterest .fa { //Pinterest Icon
background-color: #cb2027;
}
/* Responsive Design Code */
@media screen and (max-width: 620px) {
.tb-social .fa {
margin-right: 0;
width: 100%;
float: none;
}
}
That's all. No scripts, just few HTML Calls and CSS properties to install this premium light weight social sharing buttons in blogger or wordpress. Hope you liked it. Feel free to leave a comment and share this tutorial using our social share icons :P Happy Blogging !
This plugin is a part of "Premium Blogger Plugins Series".