Adding a Floating Social Media Share Button in Blogger

Social media buttons help visitors share your blog articles on sites such as Twitter and Facebook. Bloggers can attract more visitors to their blogs through links that are shared on these sites. Twitter and Facebook are two of the largest social networks on the Internet. In 2010, 100 million accounts were registered on Twitter. At the time of this publication, Facebook has more than 250 million active users. Finding an html code that works can be the hardest part of adding floating social media buttons in Blogger. With the correct html code, you can quickly add floating social media sharing buttons to your blog.

1. Login to your Blogger Dashboard and go to "Layout". 


2. Click on "Add a Gadget" > "HTML/JavaScript". 


3. Copy and paste the following code:

Float to Left



<p style="display:none;">Floating Social Media Share Button for Blogger by <a href="http://bloggerxtutorials.blogspot.com/">Blogger X Tutorials</a></p>
<style type="text/css">
* html #fsm-box{
position: absolute;
}
#fsm-box{
width: 70px;
background:#ffffff;border:1px solid #dedede;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;position:fixed;left:4%;
top: 20%;
height:200px;
height:auto;
}
#fsm-box div{
padding:6px 6px 4px 5px;
}
#icon_twitter,#icon_digg{
margin-left:-2px;
}
#icon_linkedin{
margin-left:-5px;
}
#sfs{
margin-left:-5px;
}
#fsm-get{
bottom: -20px;
clear: both;
color: #666666;
font-size: 9px;
left: 18px;
position: absolute;
text-align: center;
text-decoration: none;
}

</style>

<div id="fsm-box">
<div id="ssl-box">

<div id="icon_facebook">
<div id="fb-root"></div>
<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="450" data-show-faces="false"></div>
</div>

<div id="icon_googleplus">
<div class='g-plusone' data-size='tall' data-annotation='bubble' expr:data-href='data:post.canonicalUrl'></div>
<script type="text/javascript">
  window.___gcfg = {lang: '<data:language/>', parsetags: 'onload'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>

<div id="icon_twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div id="icon_digg">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</div>

<div id="icon_linkedin">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>
</div>

</div>
<a id="fsm-get" href="http://bloggerxtutorials.blogspot.com/">Get this</a>
<div style="clear:both;"></div>
</div>


Float to Right



<p style="display:none;">Floating Social Media Share Button for Blogger by <a href="http://bloggerxtutorials.blogspot.com/">Blogger X Tutorials</a></p>
<style type="text/css">
* html #fsm-box{
position: absolute;
}
#fsm-box{
width: 70px;
background:#ffffff;border:1px solid #dedede;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;position:fixed;right:4%;
top: 20%;
height:200px;
height:auto;
}
#fsm-box div{
padding:6px 6px 4px 5px;
}
#icon_twitter,#icon_digg{
margin-left:-2px;
}
#icon_linkedin{
margin-left:-5px;
}
#sfs{
margin-left:-5px;
}
#fsm-get{
bottom: -20px;
clear: both;
color: #666666;
font-size: 9px;
left: 18px;
position: absolute;
text-align: center;
text-decoration: none;
}

</style>

<div id="fsm-box">
<div id="ssl-box">

<div id="icon_facebook">
<div id="fb-root"></div>
<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="450" data-show-faces="false"></div>
</div>

<div id="icon_googleplus">
<div class='g-plusone' data-size='tall' data-annotation='bubble' expr:data-href='data:post.canonicalUrl'></div>
<script type="text/javascript">
  window.___gcfg = {lang: '<data:language/>', parsetags: 'onload'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>

<div id="icon_twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div id="icon_digg">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</div>

<div id="icon_linkedin">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>
</div>

</div>
<a id="fsm-get" href="http://bloggerxtutorials.blogspot.com/">Get this</a>
<div style="clear:both;"></div>
</div>



4. Click "Save". Facebook, Twitter and any other social media sites will appear as floating share buttons on your blog. It’s as simple as that!