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

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and 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

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

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

@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;);
button.value = &#39;Reappear&#39;;
}
else {
$(&#39;#&#39; div_id).fadeIn(&#39;slow&#39;);
button.value = &#39;Close&#39;;
}
}
</script>

<span class='st_facebook_vcount' displaytext='facebook'/><br/>
<span class='st_twitter_vcount' displaytext='tweet'/>
</div></div><span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x=true;stBlogger2.init("http://w.sharethis.com/button/buttons.js", {"twitter":["large","","<br />"],"facebook":["large","","<br />"],"email":["large","","<br />"],} );var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i ) { try { c[i].style.display = "none"; } catch (err) {}}</script>

The problem was that there was no new line tag ( <br/> )in between the buttons so they were appearing horizontally

The Close button was not working because the jQuery library was declared after this widget, so i included it before it,

You will have to do one thing that in the Recent Post gadget remove the jQuery library from there.

@أسامة سعد

In case you are having problems then try out this

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

@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

@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>

Danialde4 said...

Still not working T_T

Danialde4 said...

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

Danialde4 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

Danialde4 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>
function fade(div_id, button) {
if

(button.value == &#39;Close&#39;) {
$(&#39;#&#39; div_id).fadeOut(&#39;slow&#39;);
button.value =

&#39;Reappear&#39;;
}
else {
$(&#39;#&#39; div_id).fadeIn(&#39;slow&#39;);
button.value = &#39;Close&#39;;


}
}
</script>

<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></div>


<script type='text/javascript'>var switchTo5x=true;</script><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'></script><script type='text/javascript'>stLight.options({publisher:'603a0588-038d-4f2c-9538-8804a33cc666'});</script>

For showing them vertically, add a <br/> tag inbetween the span elements

Danialde4 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)?