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.

Related Posts

Network Posts

Posted in Creative Resource, Design, Tutorials using the Tags: articles, Creative Resource, css, freebie, html, share, social, tutorials

---

---

---

You can leave a response, or trackback from your own site.

13 Responses to “Share Your Articles In Style”

jared thompson
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!)
Reply

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

Hesham @ FamousBloggers
Nice way to set share buttons on your blog! I love it, I just think the the codes should send the Title of post if possible!
Reply

fandy
Smart way to get reader attention
Reply

The Pro Designer
Excellent work… this is a really beneficial post, I will be sure to promote it…
Reply

Daniel
Thank you
Reply

Lucas Cobb Design
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.
Reply

Daniel
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.
Reply

nestdev
Hi Daniel ! thank’s for sharing. submit and promote your article in http://nestdev.com. join our community. thank’s
Reply

Trackbacks

• pligg.com
• zabox.net
• [User Link:Share Your Articles In Style] | Tips for Designers and Developers | tripwire magazine
• 90+ Fresh Inspirational Articles for Web Designers to Check Out | tripwire magazine