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

29 Replies to “Side Floating Social Media Buttons”

  1. @ 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!

  2. Paste this code

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script&gt;
    <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&quot;, {"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.

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

  4. @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&#39; 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

Leave a Reply

Your email address will not be published. Required fields are marked *