Side Floating Social Media Buttons

Side Floating Social Media Buttons ImageAs asked by some of my readers, here’s a tutorial on how to add a Side Floating bar of social media buttons to a Blogger blog. I made it into a gadget, so you don’t have to go into your template HTML to install (or remove) them. Just drop the whole code into a HTML/Javascript gadget.

I have included Facebook Share, Tweet, Stumble, Delicious and Digg This buttons in the bar. Each of them comes with a live counter. These buttons are from ShareThis.com so you can track your shares easily too. There is also a added a functionality for closing this sidebar if your readers don't like it. You can add more social bookmarking or sharing buttons later if you wish.


Demo











Adding the Side Floating Buttons

1. Login to your Blogger account.
2. Go to Design > Page Elements.
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Copy the code below and paste it inside the content box. (See how to Copy Easily)

<style>
#pageshare {position:fixed; top:25%; left:5px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#f8f8f8;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

span.linkopacity {
filter:alpha(opacity=0.1);
-moz-opacity: 0.1; 
opacity: 0.1;
-khtml-opacity: 0.1;}

span.linkopacity:hover {
filter:alpha(opacity=100); 
-moz-opacity: 1.0; 
opacity: 1.0;
-khtml-opacity: 1.0; }
</style> 
<div style='margin-left: auto; margin-right: auto;'>

<span class='st_facebook_vcount' displaytext='facebook'/>
<span class='st_twitter_vcount' displaytext='tweet'/>
<span class='st_digg_vcount' displaytext='digg'/><center><span class='st_delicious_vcount' displaytext='save'/>
<span class='st_stumbleupon_vcount' displaytext='share'/></center>
</div>


Note: After pasting this code into the gadget , you will have to go to This URL and after sharing selecting any button arbitrarily , Click on Oauth Widget > Get the Button and then on the other page copy the second Code containing the scripts. Paste this code into the Gadget. The Main purpose of this code is to make the buttons work as well as tracking the share activity.






6. Save the gadget.
7. Drag the gadget and reposition it under Blog Posts gadget.
8. Click Save button on upper right corner.


Customizing



1. Vertical alignment
Change the value of top in code line 2. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.

2. Horizontal alignment
Change the value of left in code line 2. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.

3. Removing and Adding Buttons
Just go to ShareThis.com and get the button code of your choice and place it in the Line 32 of the Code, for Eg

<span class='st_facebook_vcount' displaytext='facebook'/>

Now incase you want to track your share activity , just Register with ShareThis.com and Go to their Dashboard.From their you can easily track the share activity.

4. Making it Appear on Selective Page 
If you want this to appear on only Post pages then you will have to go to Design > Edit HTML (As per new Interface Go to Template > Edit HTML).Tick the "Expand Widget Templates" and Then search for the Title of Gadget (If you have not given any title then give a dummy title like "abcd" and search using CTRF+F for this term) . Now see the following code

<b:widget id='WidgetID' locked='false' title='abcd' type='HTML'>
<b:includable id='main'> 
PUT CONDITIONAL TAG HERE  
  <b:if cond='data:title != &quot;&quot;'> 
    <h2 class='title'><data:title/></h2> 
  </b:if> 
  <div class='widget-content'> 
    <data:content/> 
  </div> 
<b:include name='quickedit'/> 
<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if> 
</b:includable> 
</b:widget>


List of conditional tags


Replace the "PUT CONDITIONAL TAG HERE" in the above code with any one of the thing.

1. Index (list) pages

Index pages include homepage, labels page and yearly archive page.
<b:if cond='data:blog.pageType == "index"'>

2. Post (item) page

<b:if cond='data:blog.pageType == "item"'>

3. Static Page

<b:if cond='data:blog.pageType == "static_page"'>

4. Archive page

<b:if cond='data:blog.pageType == "archive"'>

5. Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>

6. Specific page/url

<b:if cond='data:blog.url == "PUT_URL_HERE"'>


Now after putting the conditional tag, Preview the code and then Save.

Have any suggestions, feel free to share


Demo

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Allen said...

@ Prayag - Thanks for sharing this great post and also thanks for answering my question. This gadget will be of great help for my Blogspot blogs. You rock!

Thanks for the great tutorial. How can I add Google+ button to widget? I can't see one there.

@Explosion Resource Center
Just paste the following code in Line 35 of the First code block in the page (just before the closing center tag)
<span class='st_plusone_vcount' ></span>

Basically, there are tutorials about how can you add these floating buttons. I'm using one developed by Blogger Sentral. I only showed 4 buttons. Facebook, Twitter,Digg and Plus one.

@Detroit Personal Injury Attorney
The main difference in this widget is its ability to be closed as per the user wish

Unknown said...

where should I put the jQuery code exactly ?

@أسامة سعد

Paste the jQuery library just before the </body> tag in Edit HTML or include it with the gadget

But I have checked your blog, it already has the jQuery library , you don't have to include it again

Unknown said...

and do u have any idea why it appears horizontal not vertical in my blog ?

Unknown said...

@Prayag Verma
then why doesn't the close button work ?

Paste this code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#pageshare {position:fixed; top:25%; left:5px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#f8f8f8;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

span.linkopacity {
filter:alpha(opacity=0.1);
-moz-opacity: 0.1;
opacity: 0.1;
-khtml-opacity: 0.1;}

span.linkopacity:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='margin-left: auto; margin-right: auto;'>
<div id='pageshare'><input class='button' onclick='fade(&apos;pageshare&apos;, this)' type='button' value='close'/>
<script>
function fade(div_id, button) {
if(button.value == &#39;Close&#39;) {
$(&#39;#&#39; div_id).fadeOut(&#39;slow&#39;);
b…

@أسامة سعد

In case you are having problems then try out this

http://sharethis.com/publishers/get-hovering-buttons

Unknown said...

@Prayag Verma
well I deleted the whole gadget but nothing yet ! actually there's a warning window that keeps popping out telling me that " A script on this page may be busy or may have stopped working " !
I copied the new code but it's still the same ..

@أسامة سعد

remove the w.sharethis javascript from the above code and get that part again from sharethis.com

Unknown said...

@Prayag Verma
thank u .. the new link really helped although there's a little issue with the position :)it's slightly deviated to the left

rahul said...

why this widget is not working right now!

@rahul
The Close button is not working because of other jQuery plugins that are present ,add the following code in the starting of the this widgets code:

<script type='text/javascript'>
jQuery.noConflict();
</script>

Still not working T_T

This is the template i use
http://masutoliso-custombloggertemplates.blogspot.com/

@Danialde4
Can you tell me what exactly is not working, is the whole widget not showing up or the Close button is not working ,please be more specific

Anonymous said...

@Prayag
The whole widget not show up only the close button but the close button not working also T_T

@Danialde4
can you give a demo url where you have put this, I can help you faster that way

Anonymous said...

@Prayang
here the url ~ http://the4crack.blogspot.com/
Sorry for make you hard...(^_^)

@Danialde4
This is how it will look tentatively on your blog:
http://dl.dropbox.com/u/27675057/the4crack.html

To add this, add a JavaScript/HTML widget and copy the following code into it

<script type='text/javascript'>
jQuery.noConflict();
</script>
<style>
#pageshare {position:fixed; top:25%; left:5px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#f8f8f8;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

span.linkopacity {
filter:alpha(opacity=0.1);
-moz-opacity: 0.1;
opacity: 0.1;-khtml-opacity: 0.1;}

span.linkopacity:hover {
filter:alpha(opacity=100);-moz-opacity: 1.0;
opacity: 1.0;-khtml-opacity: 1.0; }
</style>

<div style='margin-left: auto; margin-right: auto;'>
<div id='pageshare'><input class='button' onclick='fade(&apos;pageshare&apos;, this)' type='button' value='Close'/>
<script>
functi…

Anonymous said...

Thanks prayang i love it ^_^

MUXLIMO said...

Hi Bro.. i dont see the demo anymore here.. (???)

Fixed that issue

i try it. but that make my web page messy..sigh..
any clue?

Alex said...

Does anyone tried it in vertical mode somewhere?

Anonymous said...

can it work on a webpage designed in dreamweaver (html & css)?