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.

10 Comments

  1. Extremely jealous of this little setup! it works so well with your template background. Makes my mish mash promote buttons look a little messy (to say the least!)

  2. It made a huge impact to my blogs design when I changed how the buttons were layed out, very effective as you can see! :)

  3. I just went through and redesigned my social share section last week. I like what you did with yours. Great work and I hope people start clicking for you.

  4. I am also going to design something similar to this for getting more of our vistors to subscribe to our RSS feed. Depending on how work is I may get something up this week.

  5. great post !!
    very usefull
    thanx for sharing.

    Graphic designer

Leave a Reply to Lucas Cobb Design Cancel reply

Your email address will not be published. Required fields are marked *