I would like to share with you how I added a share button for each of the main social networking sites on the left-hand side of my blog. You may also notice that as you scroll down the page, the share buttons follow along so that the user always has a "share this" call to action. My scrolling share button implementaion uses the Yahoo! User Interface (YUI 2) javascript library. I am goinig to assume that you have HTML and Javascript knowledge. If you do not have any HTML and Javascript skills, you might want to look into a widget or plugin for your blogging platform.
Getting the Share Button Code
The first step is to get the share button code from each of the social networking sites you want your users to be able to use. Personally, I picked the four that I felt are most popular--at least for my site. If you go too crazy here and add a share button for every social networking site on the planet, you'll end up with an overwhelmingly cluttered page. I chose to have a share button for Facebook, Twitter, Digg, and Stumble Upon. You can get a Javascript snippet for each of these buttons on the following websites:
- Facebook Share Button
- Twitter Retweet Button (using tweetmeme)
- Digg This Button
- Stumble Upon Share Button
Once you have each of those javascript snippets, you can simply add them to a container <div> at the bottom of the page and give the <div> element an id attribute that we will use in the Javascript. The reason they are added at the very bottom of the page is so that a delay in loading the buttons does not hold up the browser rendering the content of the blog post. This HTML would most likely be in a template file depending on your blogging platform. If you have no clue what I'm talking about then these instructions might not be right for you. Here is the markup from my blog:
<div id="socialBookmarks">
<!-- facebook -->
<div class="social-bookmark">
<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>
<!-- twitter -->
<div class="social-bookmark">
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<!-- digg -->
<div class="social-bookmark">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<!-- stumble upon -->
<div class="social-bookmark">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
</div>
You may also notice that I wrapped each of the share button scripts in another <div> element with a class of 'social-bookmarks'. I used this class to add a 10 pixel margin to the bottom of each share button container DIV.
Include YUI Javascripts For Share Button
In my share button implementation, I use several parts of the YUI framework. I use the a YUI Overlay widget as the container for the share buttons, the YAHOO Global Object for the namespace feature, and the YUI DOM Collection for event and DOM handling. Using the YUI Dependency Configurator I get the following javascript include and put it into the <head> tag of my pages:
<!-- Combo-handled YUI JS files: --> <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.1/build/container/container_core-min.js"></script>
The Share Button Scrolling Javascript
Here is where the share button scrolling magic happens. A YUI Overlay widget is created from the markup in the <div> with id 'socialBookmarks' and renders it to the document body. By doing this, the <div> element is moved in the DOM to a child of the <body> element which allows it to be positioned anywhere on our page. When the overlway is instantiated, we specify a context element in which to align the overlay. In my case, I aligned the top-right edge of the overlay with the top-left edge of a <div> with id 'mainCol'. The 'mainCol' <div> on my site is the main column in which all of the post contents are. That's why you see my share buttons on the left-hand side of this post.
We connect to the window scroll event which fires when the user scrolls the page. In order to prevent the movement of the share button overlay from being twitchy, a 100ms timeout is used. By checking a flag to see if the user is still scrolling, we can continually reset the timeout until the user has stopped scrolling for at least 100ms. Only then do we move the overlay along the Y-axis so that it is still visible on the screen.
// create Blog namespace
YAHOO.namespace("Blog");
// initialize our share buttons once the DOM is in a usable state
YAHOO.util.Event.onDOMReady(function() {
var shareButtonId = 'socialBookmarks';
var mainColumnId = 'mainCol';
// create overlay and set initial position
YAHOO.Blog.socialBookmarks = new YAHOO.widget.Overlay(shareButtonId, {
context:[mainColumnId,"tr","tl", ["beforeShow", "windowResize"]]
});
YAHOO.Blog.socialBookmarks.render(document.body);
YAHOO.Blog.socialBookmarks.show();
// flag to test if timeout is already set
YAHOO.Blog.socialBookmarksTimout = false;
// connect to the window scroll event
YAHOO.widget.Overlay.windowScrollEvent.subscribe(function() {
if (YAHOO.Blog.socialBookmarksTimout) {
clearTimeout(YAHOO.Blog.socialBookmarksTimout);
}
YAHOO.Blog.socialBookmarksTimout = setTimeout(function() {
var scroll_top = getScrollTop();
var top = YAHOO.util.Dom.getXY(mainColumnId)[1];
var y = top + 10;
var x = YAHOO.Blog.socialBookmarks.cfg.getProperty("x");
if (scroll_top > top) y = scroll_top + 10;
YAHOO.Blog.socialBookmarks.moveTo(x, y);
}, 100);
});
});
// get scroll top
function getScrollTop(){
if(typeof pageYOffset != 'undefined') {
return pageYOffset;
} else {
var B= document.body; //IE 'quirks'
var D= document.documentElement; //IE with doctype
D= (D.clientHeight)? D: B;
return D.scrollTop;
}
}
