ABC Article Directory banner displaying blue butterfly logo. Click to go directly to the main Homepage


The Vertical Floating Social Buttons Bar For Websites






     I have been looking to get this social buttons script for a while and was fortunate enough to come across something that I could fiddle with and adapt to my abcarticledirectory.com script. I first saw this vertical floating collection of social media share buttons on Mashable.com and immediately said to myself "I gotta have this a.s.a.p".

I dropped everything and did a quick Google search for 'floating social media buttons' and instantly got links to hundreds of ways to add this wonderful tool to my Wordpress or Blogger site. Problem was, I wasn't looking to add this to any blog. I was adding it to an article directory that runs on the old AD script. "OK...no problem" I thought, "I'll just search for 'floating social media buttons for websites' and find hundreds of scripts for any website; right?....Wrong!

There wasn't any code that I could find that I could easily add to my html pages and run. I tried several different variations of code and tried adapting it but failed miserably until I came across one site that had a script for Blogger that looked like something I could tweak. With my limited skills as a programmer I muddled about adding and taking away little bits and pieces until "Eureka...I think I got it!". I found that it worked as it should in Firefox,Opera and Google Chrome. It did not work 100% in Internet Explorer because the social media buttons did not float and stay in the same position left of the article pages as the user scrolled up and down.

Floating share buttons are supposed to float When readers scroll up or down and the share buttons also move along with the screen. These share buttons appear only in the article pages. Explorer is just plain finicky and I wasn't going to worry too much about altering everything for one lousy browser. Besides...it is visible in the top left margin...it just doesn't scroll up or down. Perhaps in time I will get the urge to find a solution but for now I am quite happy with the way it is functioning on all other major browsers. I have a similar problem with Disqus Comments and the Wibiya bar which will not render my pages properly in any version of Internet Explorer.

I modified the version of the widget and added the large Google Buzz and Google +1 Counter Buttons for a few more additional options for your visitors to socialize your content. Be sure to add " " to the head section of the html pages of your article template.

I am just going to show you the code as it is nestled on my article template instead of telling you where to put it on your site. You should be able to figure out where to put it on your pages by perusing the script. Just be sure to back up your script before you attempt to modify your pages! I still have a copy of my old page script just in case ;)

Here is The Vertical Floating Social Buttons Bar For Websites:

////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<head>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>



<!-- Floating Social Buttons Starts-->

<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id='pageshare' title="Share This With Your Friends">

<div class='sbutton' 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='sbutton' >

<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 class='sbutton' >

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

</div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>

<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>

<a class="DiggThisButton DiggMedium"></a>

</div>

<div class='sbutton'>

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class='sbutton' >

<a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="en_GB"></a>

<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></div>

<div class='sbutton' >

<g:plusone size="tall"></g:plusone></div>

<div style="clear: both;font-size: 10px;text-align:center;"><a href="http://www.abcarticledirectory.com/Article/The-Vertical-Floating-Social-Buttons-Bar-For-Websites/1369991">Get this</a></div>

</div>

<!-- Floating Social Buttons Ends -->



*etc

*etc

*etc

</head>
///////////////////////////////////////////////////////////////////////////////////////////

Hope this works for you and good luck with your website.






Article Source: http://www.abcarticledirectory.com

Additional SocialNetworking Articles may be found at the www.abcarticledirectory.com/


Posted on 2011-06-23, By: *

* Click on the author's name to view their profile and articles!!!


Note: The content of this article solely conveys the opinion of its author.


Animated RSS Symbol for the ABC Article Directory rss category feed ... Get Every New SocialNetWorking Article Delivered Instantly!



Facebook Comments


" data-width="470" data-num-posts="10">




Cartoon image of a figure holding a magnifying glass looking for articles in the ABC Article Directory

Still Searching? Last Chance to find what you're looking for with a Google Custom Search!



Custom Search

Or.... You can search this site using our Bing Custom Search!

Bing




Did You Like/Dislike This Article? Give It YOUR Rating!

Please Rate this Article

Total Ratings = 6 | Rating = 3.7/5





/EDF Publishing. All rights reserved. Script Services by: Sustainable Website Design
Use of our free service is protected by our Privacy Policy and Terms of Service | Contact Us

User published content is licensed under a Creative Commons Attribution-No Derivative Works 3.0 Unported License
.
Wiredtree web hosting banner
Increase your website traffic with Attracta.com

Valid CSS!


ABOUT SSL CERTIFICATES
Date:


Powered by ABC Article Directory