Add a Share Button to your Thesis Themes

Functions

function share () {
if (is_single( )) { ?>
<li class="share">
			<h3>Share this Article</h3>

<ul>
					<li class="facebook"><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" rel="external,nofollow" target="_blank">Share on Facebook</a></li>
					<li class="twitter"><a href="http://twitter.com/home?status=Reading on <?php bloginfo('name') ?> - <?php the_title(); ?> <?php the_permalink(); ?>" rel="external,nofollow" target="_blank">Tweet This!</a></li>
					<li class="delicious"><a href="http://del.icio.us/post?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" rel="external,nofollow" target="_blank">Save to delicious</a></li>
					<li class="digg"><a href="http://digg.com/submit?phase=2&url=<?php the_permalink();?>&title=<?php the_title();?>" rel="external,nofollow" target="_blank">Digg it!</a></li>
					<li class="stumble"><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" rel="external,nofollow" target="_blank">Stumble this!</a></li>

<?php }}
add_action('thesis_hook_byline_item', 'share');

Styling

.share ul {
padding-left:10px;
list-style:none outside none;
}
#content .share h3 {
background:url("http://www.ramoservice.com/wp-content/uploads/toolsicon_anim.gif") no-repeat scroll 4px 50% #F0F5F6;
border-bottom:1px solid #CCCCCC;
color:#19283B;
font-family:Arial,"Times New Roman",Times New Roman,serif;
font-size:19px;
font-style:normal;
list-style:none outside none;
margin:0 0 0.311em;
padding:1px 0 3px 20px;
text-align:center;
text-transform:capitalize;
}
#content .share {
-moz-border-radius:7px 7px 7px 7px;
background:none repeat scroll 0 0 #E2E6E8;
border:1px solid #F0F5F6;
float:right;
list-style:none outside none;
margin:20px 0 8px 10px;
width:193px;
position:inherit;
}
.share li {
padding:7px 0 6px 20px;
}
.share li a {
color:#333;
font-size:10px;
font-weight:lighter;
text-transform:uppercase;
}
.share li.facebook  {
background:url(images/facebook.png) no-repeat left;
}
.share li.twitter  {
background:url(images/twitter2.png) no-repeat left;
}
.share li.delicious  {
background:url(images/delicious.png) no-repeat left;
}
.share li.digg  {
background:url(images/digg.png) no-repeat left;
}
.share li.stumble  {
background:url(images/stumble.png) no-repeat left;
}

Download icons and save to images folder

Leave a Comment

Previous post:

Next post: