Helf India

Add Floating Social Share Button on the left side of Blogger

Today, in this article “How to Add Left Side Floating Social Share Button in Blogger”, I should be telling you to add a social media floating button in blogger which will be visible on the left side of your blog.

So that readers of your blog can share the blog post directly on social media networks, read further, it is explained.

Add Floating Social Share Button on the left side of Blogger

Social media is the best way to increase the traffic of a blog, as well as it gets optimized.

Every blogger wants people to share their posts as much as possible, so the post get more reach.

If you not yet added social media follow button, read this “How to Add Beautiful Social Media Follow Button in Blogger“.

How to Add Floating Social Share Button on the left side of Blogger?


Step 1:

1. First of all copy the below-mentioned code.

<style type="text/css">
#social-buttons {
padding:0 0 2px 0; }
#social-buttons .button-share{
margin:2px 2px 0 2px; }
<div id='social-buttons' title='Get This Widget'>
<div class='button-share' style='margin-left:3px; id='pinit'>
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.manidin.com%2F&media=http%3A%2F%2Fwww.manidin.com%2F&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="above"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60">
<script type="text/javascript">
 (function() {
   var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
   po.src = 'https://apis.google.com/js/platform.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
<div class='button-share' id='like' style='margin-left:3px;'>
<div id="fb-root">
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false">
<br />
<div class='sbutton' style="margin-left: 3px;" >
<a class='twitter-share-button' data-count='vertical' data-via='Manidin' expr:data-counturl='data:blog.url' href='https://twitter.com/share' rel='nofollow'>Tweet</a><script src='https://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
<script type="IN/Share" data-counter="top"></script>
<br />
<div class='button-share' style='margin-left:3px;' id='su'>
<script src="https://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='button-share' id='digg' style='margin-left:3px; width:45px'>
<script src='https://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>

2. Bottom: 10%; Margin-left: –740px; With the help of the code, you can set the place of social share button.

Step 2:

1. Go to your Blogger dashboard >> layout of the blog.

2. Now click on Add a Widget.

3. Select HTML/Javascript gadget and paste the copied code.

4. Then click on Save, click on Save arrangement.


Now you have added a share button on your blog.

If you have not understood the steps mentioned in this post, do let me know in the comment, I will be happy to assist you.

Also, Read Our Other Posts:

I hope now you can add a floating follow button on the left side of your blog with the help of our post “Add Floating Social Share Button on the left side of Blogger”, if so, then do share this post on social media.

Somehow, for someone on social media, it will be helpful.

Leave a Comment

Your email address will not be published. Required fields are marked *