Saturday, August 13, 2011

Adding a floating share widget to your blog/website

Sharing the content on social media is an important way of gaining traffic to your website and it also helps us to buid up a good audience . The most popular sharing mediums are facebook , twitter , google+ , stumbleupon , digg etc .
I was looking to for such a wiget and then came across a nice and simple floating widget . 
The main thing is how you customize your widget according to your needs. 
You will find lots of such widgets which will provide you simple code to be added to your blog and you are done .
But here I will explain you how you can customize the widget according to your own need like floating on left instead of right , adding more buttons etc .

The step to apply this widget on your blogger is simple
You simply have to go to your layout setting > add a widget > HTML/javascript and copy paste the code that is mentioned below.

Click Here to view the script (right click to open in new window)

Understanding the script

Ther are some basic things that you should understand about the script so that you can customize it according to your own need.
I would suggest you to go through the code first .

Adjusting the float option - 

#pageshare {position:fixed; bottom:15%; margin-left:-800px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000;padding:0 0 2px 0;z-index:10;}

looking at these lines of code closely you can adjust your widget appearance on your page.
As you can see the value of margine-left is set to -800px . This negative value will push the widget to the left. The more is the negative value , more will be the indentation towards left . Positive value will shift the widget to right side.

Adjusting the colour and style-
background-color will help you adjust your widget color according to your blog/website. Just set the color value or name it .

Adjusting button types-
You can also adjust the look and size of the buttons in your widget . You have to be a bit carefull here as oversizing the buttons will prevent them from being displayed on the widget pannel.

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}

Here you can adjust the look and feel of the buttons that are their on the widget pannel but i would suggest that you leave it to the default values.

Adding more buttons:
you can add more buttons but you will have to set up the #pageshare and #pageshare.sbutton properties to initialize the button type and then build a seperate div class in the code

<div class='sbutton' id='newshare'>

Rest portion of the code is easy and simple to understand. You can copy the code in your blog and can play with it to learn more. In case you find any difficulty then you can comment here.



  1. not so good dude...loved other posts..

  2. i am having problem with adding a new button.

  3. thanks for the post..

  4. I m always looking for these kind of stuff.Information you provide is very nice and deep.
    MBA in Delhi
    Masters of Banking & Finance