MENU
POPULAR POSTS
-
Adding Post Thumbnails To WordPress 3.0
Post Thumbnails were first introuduced in the release of WordPress 2.9, but seeing how the...
-
50 Free Premium WordPress Themes Released in 2010
WordPress became one of the most popular CMS platform around the internet, being used by...
-
I Want that T-shirt: Amazing T-shirt Designs From Across the Web
Here I wanted to showcase some real great t-shirts designs, be they illustrative, text art...
-
Can Selling WordPress Themes Online Become A Full Time Job?
The original idea behind nenuno was to offer WordPress conversions from HTML or PSD templates,...
-
Up & Coming Design Blog’s To Follow
As you are aware, there are hundreds of designer related blogs showcasing creative resources, inspiration,...
FRIENDS
Share Your Articles In Style
Posted by Daniel in Creative Resource, Design, Tutorials on May 2nd, 2010 with 14 Comments
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>
In this example we have included the following social submit buttons (some are configured to work only in a WordPress enviroment):
- Tweetmeme
- 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.
Posted in Creative Resource, Design, Tutorials using the Tags: articles, Creative Resource, css, freebie, html, share, social, tutorials
Related Posts
- Key WordPress Code Snippets That Will Boost Functionality #2
- Free Download Professional Buttons & Create Superior web Buttons
- Building Your Own WordPress Gallery – Part 1: Image Rollover
- Create A Simple Contact Form With Validation
- Find Nenuno Creative on Facebook & Across the Web
- How To Add Automatic Short su.pr URLs In WordPress
I love all things fantasy and you see that within in the content I produce for nenuno creative.
See all posts by Daniel
Network Posts
You can leave a response, or trackback from your own site,
14 Responses to “Share Your Articles In Style”
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
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!)
It made a huge impact to my blogs design when I changed how the buttons were layed out, very effective as you can see! :)
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!
Smart way to get reader attention :)
Excellent work… this is a really beneficial post, I will be sure to promote it…
Thank you :)
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.
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.
Hi Daniel ! thank’s for sharing. submit and promote your article in http://nestdev.com. join our community. thank’s :)
great post !!
very usefull
thanx for sharing.
Graphic designer