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://lh4.googleusercontent.com/-keCy65OphQU/T9ct2DBA9FI/AAAAAAAAAKc/XEHlE-kXckg/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.

Comments

Popular posts from this blog

Advantages and Disadvantages of Electro-oculography (EOG)

In the previous post we looked at what is EOG? In this post we will look at the advantages and disadvantages of EOG.

How to Convert Excel Charts into High Resolution Images

Microsoft Excel is widely used to generate graphs and to analyse data due to its simple graphical user interface. Have you ever tried to convert the charts into images? If yes, you might have used "Print Screen" feature to easily convert the charts into images. However most of the scientific journals require the images in high resolution TIFF format. So in this post we will look at how to convert Microsoft Excel Charts/Graphs easily into high resolution images.

Online Radio Stations

Some of the popular Tamil radio stations are listed here. You can listen to those radios here.