Skip to main content

Adding Floating Social Media Buttons and Customising it

You might have seen floating share buttons in many sites. We also have one in our site, so we thought to share that with our viewers. It is very easy to include and in this post we will look at how to add them and customise them to your requirements.

There are several advantages in adding social media buttons to your web pages, as it will help the readers to easily share the pages, also it helps the publishers to reach wider audience. There are so many different social media platforms available, but it is impossible to include all of them to your site. Firstly you need to select which ones to include. Then you can modify the following code to add them. In our site we have included the following,
  1. Facebook like button.
  2. Stumbleupon button.
  3. Reddit button.
  4. Facebook share button.
  5. Twitter button.

Now we will look at how to add Facebook like button to it. Firstly you need to generate the code "Facebook Like" button. Then copy the "IFRAME" code and replace the phrase in red colour (<!-- Copy the "Facebook Like" button "IFRAME" code here-->) in the following code. Then copy that code into a "HTML/Java Script" gadget in Blogger (please use similar widget in other platforms).
<style>
<style>
#socialshare {
position:fixed; 
bottom:15%; 
margin-left:-650px; 
float:left; 
border: 1px solid black; 
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#eff3fa;
padding:0 0 2px 0;
z-index:10;}
#socialshare .sharebuttons {
float:left;
clear:both;
margin:5px 5px 0 5px;}
</style>

<div id='socialshare' title="Share This With Your Friends">
<div style="text-align: center">Pls share
</div>
<div style="text-align: center">this page
</div>

<div class='sharebuttons' id='facebook' style='margin: 0 0 0 10px;'>
<!-- Copy the "Facebook Like" button "IFRAME" code here-->
</div>

<div class='sharebuttons' id='reddit' style='margin: 0 0 0 10px;'>
<script type="text/javascript" src="http://www.reddit.com/static/button/button2.js">
</script>
</div>

<div class='sharebuttons' id='su' style='margin: 0 0 0 10px;'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5">
</script>
</div>

<div class='sharebuttons' id='pintrest' style='margin: 0 0 0 13px;'>
<a href='javascript:void(run_pinmarklet1())'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjm1ULkkApsHarmVEwViTioFR7quCV2PMjyotk5sBVdn8LPmwdSshTFfBc2llS2Y7z6OZjij_gboMX4QwnCUXe_8j9bIol9VnrJ7XLvuVV20UJE7szi6yHdtFvNReKpTnVFSn9roi60AMA/h120/pinmask2.png" style='margin:0; padding:0; border:none;'/>
</a>
<script type='text/javascript'>
function run_pinmarklet1() {
  var e=document.createElement('script');
  e.setAttribute('type','text/javascript');
  e.setAttribute('charset','UTF-8');        e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
  document.body.appendChild(e);
}
</script>
</div>

<div class='sharebuttons' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>
</div>

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

<div style="text-align: center">
<a href="http://www.realexposer.com/2012/05/adding-floating-social-media-buttons.html">
Get This
</a>  
  
</div>
</div>


Customising the floating share buttons:


This code by default floats on the left side of your page; to make it float on the right side of it, change the 7th line as follows:
float:right; 

To change the horizontal location of this widget change the 6th line appropriately. Only change the value of it (i.e -650) to a value suitable to your site.
margin-left:-650px;

If you would like to add more buttons or need help in modifying the code, please specify them in your comments.

Update: Modified the code to include Pinterest button and all the buttons were aligned to centre.

You may also interested in reading:

Comments