Digg-Style Dynamic Share Widget Using the Dojo Toolkit

By  on  
Digg Share Widget

I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site using the Dojo Toolkit.

The XHTML

<!-- My Custom Story Formatting -->
<h2>My Story 1</h2>
<p>
Mauris amet eu Vestibulum feugiat eget, est. senectus semper. tempor Pellentesque Aenean ante. quam egestas. ultricies fames sit ultricies sit placerat et ac Donec leo. morbi habitant mi eleifend tortor netus turpis libero et amet, tristique malesuada egestas quam, vitae, vitae. Mauris amet eu Vestibulum feugiat eget, est. senectus semper. tempor Pellentesque Aenean ante. quam egestas. ultricies fames sit ultricies sit placerat et ac Donec leo. morbi habitant mi eleifend tortor netus turpis libero et amet, tristique malesuada egestas quam, vitae, vitae.
</p>
		
<!-- Share Widget -- Don't Change -->
<div class="share-storylist">
	<a class="tool share" href="https://davidwalsh.name/demo/dojo-digg-share.php?My%20Story%201">Share!</a>
	<div class="share-hover">
		<input type="text" value="https://davidwalsh.name/demo/dojo-digg-share.php?My%20Story%201" class="share-diggbar-url" readonly>
		<ul class="share-actions">
			<li class="twitter">
				<a href="http://twitter.com/home?status=My%20Story%201:%20https://davidwalsh.name/demo/dojo-digg-share.php?My%20Story%201" target="_blank">twitter</a>
			</li>
			<li class="email">
				<a href="mailto:?subject=My%20Story%201:%20https://davidwalsh.name/demo/dojo-digg-share.php?My%20Story%201">email</a>
			</li>
			<li class="facebook">
				<a href="http://www.facebook.com/sharer.php?u=https://davidwalsh.name/demo/dojo-digg-share.php?My%20Story%201" target="_blank">facebook</a>
			</li>
		</ul>
	</div>
</div>

You can display the article or post however you'd like but the Digg share widget should closely follow what I've used above, which comes directly from Digg.

The CSS

/* Storylist Share */
.share-storylist { position:relative; float:left; }
.share-hover { background:url(storylist-share.png) no-repeat; width:138px; height:106px; position:absolute; top:19px; left:-35px !important; z-index:100; display:none; }
.share-diggbar-url { position:absolute; top:24px; left:14px; padding:5px; text-decoration:none; background:#fff; width:98px; border:1px solid #c6c6c6; -moz-border-radius:4px; -webkit-border-radius:4px; }
.share-hover span { font-size:85%; font-weight:normal; color:#9ab9d5; display:block; margin-top:-1px; }
ul.share actions, ul.share-actions li { list-style:none; }
ul.share-actions li a { text-indent:-999px; width:40px; height:26px; position:absolute; top:63px;} 
.share-actions li.facebook a { left:48px; width:42px;}
.share-actions li.email a {   left:7px;}
.share-actions li.twitter a {left:91px; }

/* Storylist Share Email Box */
#share-dialog { display:none; }
.share-email a.email-suggestion { background:#edf7e6 url(/img/lightbox-email-apps.png) 460px 7px no-repeat; display:block; margin:-16px -17px 15px; padding:15px 15px 15px 65px; font-size:1.15em; font-weight:bold; text-decoration:none; color:#64a715; border-bottom:1px solid #daecb0; }
.share-email a.email-suggestion:hover { color:#000033; }
.share-email label { float:left !important;  display:block; position:absolute;  color:#777; }
.share-email input[type="text"] { padding:5px; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; color:#777; margin:0 0 10px 0; width:490px; margin-left:50px; border:1px solid #ccc; font-size:1.1em; }
.share-email textarea { width:530px; padding:10px; height:12em; margin:10px 0 5px 0; font-size:100%; background:#fffdea; border:1px solid #dcd069; color:#39340b; }
.share-test-email .dialog-tray { text-align:left; }

This is the exact CSS from Digg -- nothing's been changed.

The Dojo JavaScript

dojo.addOnLoad(function() {
	dojo.forEach(dojo.query('a.share'),function(a) {
		//containers
		var storyList = a.parentNode,
			shareHover = dojo.query('div.share-hover',storyList)[0];	
		dojo.style(shareHover,'opacity',0);
		//show/hide
		dojo.connect(a,'onmouseenter',function() {
			dojo.style(shareHover,'display','block');
			dojo.fadeIn({node:shareHover}).play();
		});
		dojo.connect(shareHover,'onmouseleave',function() {
			dojo.fadeOut({node:shareHover}).play();
		});
		dojo.connect(storyList,'onmouseleave',function() {
			dojo.fadeOut({node:shareHover}).play();
		});
	});
});

The JavaScript is a piece of cake using the Dojo Toolkit. Simple show and hide.

One way to improve your website is to check out what the large sites are doing. Feel like you have a lame sharing widget of your own? Duplicate what Digg has done!

Recent Features

  • By
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    background-size Matters

    It's something that makes all men live in fear, and are often uncertain of. It's never spoken, but the curiosity is always there. Nine out of ten women agree in the affirmative. Advertisers do their best to make us feel inadequate but...

Discussion

  1. Would be even easier with jQuery :D

  2. Nice…

    Would love to see this implemented in mooTools, or is there anything similar already been done?

    regards

  3. Great post. I want to learn Dojo.

  4. @Khawaib: The MooTools version can be found here:

    http://davidwalsh.name/digg-share-widget

  5. Wish I had asked something even better. :-)

    I thought I had gone through all of your posts but seems I missed some.

    Thanks a lot.

    regards

  6. David, can you do the same on jQuery?
    And we will be able to compare all three examples.

    Thanks

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!