Share Your Articles In Style

We have been using various WordPress plugins to help promote our articles and showcases by giving the visitor the option to submit them to various social networks such as Facebook, Digg and Stumbleupon. But the problem was that no one was submitting them!

We were using Sexy Bookmarks which was a huge upgrade to what we had previously, whilst also giving us the option to choose our favourite Social Networks to submit content to.

We then started to mix Sexy Bookmarks with sharing buttons such as Facebook Share, The Digg Button and many others.

This instantly displayed how popular the post was, which is what we wanted to see. So we decided to scrap Sexy Bookmarks and just use the individual sharing buttons.

But on their own they can make your blog look quite unprofessional so we decided to work our magic and create something more appealing.

The CSS

#share-the-love{
 width:600px;
 height:200px;
 padding:50px 0 0 0;
 background:url(share-the-love-2.jpg) no-repeat;
 }

#share-the-love .share ul li{
 padding:2px;
 border:0;
 list-style-type:none;
 }

.li_share{
 display:inline;
 float:left;
 }

The HTML

<div id="share-the-love">

	<div class="share">

		<ul>

			<li class="li_share"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></li>

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

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

			<li class="li_share"><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></li>

			<li class="li_share"><script type="text/javascript">url_site='<?php the_permalink(); ?>'; </script> <script src="http://designbump.com/sites/all/modules/drigg_external/js/button.js" type="text/javascript"></script></li>

			<li class="li_share"><script type="text/javascript">url_site='<?php the_permalink(); ?>';</script><script src="http://thewebblend.com/sites/all/modules/drigg_external/js/button.js" type="text/javascript"></script></li>

		</ul>

	</div>

</div>

Working Demo

In this example we have included the following social submit buttons (some are configured to work only in a WordPress enviroment):

• Tweetmeme
• Facebook
• Stumblupon
• The Web Blend
• Design Bump

We have also included two backgrounds, but you are more then welcome to create your own!

If you are having  issues with getting this working, please post in the comments below and I am more then happy to assist.