jQuery Social media icon script

This simple javascript is used to add a few social media links to your webpage. You can add any social media you like by extending the socialMedia object that contains the data.

This uses jQuery for selecting the element and appending content to it, but you could easily use document.getElementById('elementId').innerHTML = 'bla' instead if you want to include the media links without the jQuery.

drawSocialLinks = function(oContainers){
    	var l,i,socialList = [], socialHtm='';
    	var t = $('h1').eq(0).text();   /*  adjust this to select the title of your article */
    	var u = window.location.href;  /*  this selects the link to your article */
		var iconDirectory = 'images/icons/'; /* this is the director containing your icons */
 
		var socialMedia = [
			{linkText: 'Del-icio-us', icon:'delicious.png',href:'http://del.icio.us/post?url='+u+'&title='+t},
			{linkText: 'Stumbleupon', icon:'stumbleupon.png',href:'http://www.stumbleupon.com/submit?url='+u},
			{linkText: 'Facebook', icon:'facebook.png',href:'http://www.facebook.com/share.php?u='+u},
			{linkText: 'Digg', icon:'digg.png',href:'http://digg.com/submit?phase=2&url='+u+'&title='+t},
			{linkText: 'Twitter', icon:'twitter.png',href:'http://twitter.com/home?status='+u},
			{linkText: 'Google', icon:'google.png',href:'http://www.google.com/bookmarks/mark?op=edit&bkmk='+u}
		];
 
		l = socialMedia.length;
		for (i=0; i<l;i++){
			socialList.push('<li><a href="'+socialMedia[i].href+'" title="'+socialMedia[i].linkText+'"><img src ="'+this.webRoot+iconDirectory+socialMedia[i].icon+'" alt="'+socialMedia[i].linkText+'" /></a></li>');
		}
		socialHtm = '<ul>'+socialList.join("\n")+'</ul>';
		oContainers.append('<div class="socialMediaContainer">'+socialHtm+'</div>'); 
    }
drawSocialLinks($('#whatEverElementId'));
 

Example css -

div.socialMediaContainer{ padding-top:1em; margin-top:2em;  }
#contentHolder div.socialMediaContainer ul li,
#contentHolder div.socialMediaContainer ul{list-style:none;}
#contentHolder div.socialMediaContainer ul li{ display:inline; padding-right:1em}
 

There's a lot of free icon sets you can use for the images:

i used these:

http://www.iconspedia.com/pack/aquaticus-social-1367/