Add Social Media Icons to Thesis

I was asked by a reader of my blog how I added the social media sharing icons below each post. Should I ever change the way these look on this blog, here’s how they appear as of the time I wrote this post:

They’re added to the end of each post below the related posts. It doesn’t really matter how they look, because you should create your own styling or your own buttons, but here’s the code I used to create this. Before I get to that, I wanted to give credit where credit is due. These icons were inspired by the share icons I saw on the Blogussion blog. I also found the code for the share links on a blog which I just can’t recall right now, but it’s pretty standard code.

Anyway, here’s the code. Put this in your custom-functions.php file:

The Code

function share_buttons() {
?>

<?php if (is_home() || is_category() || is_page() ){ ?>
<?php } else { ?>

<ul id="share-buttons">
	<li>
		<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" title="Stumble It!" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/custom/images/su.png" alt="StumbleUpon" /></a>
	</li>
	<li>
		<a rel="nofollow" title="Tweet About It!" href="http://twitter.com/home?status=<?php the_title(); ?> <?php the_permalink(); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/custom/images/twitter.png" alt="Twitter" /></a>
	</li>
	<li>
		<a href="http://digg.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" title="Submit to Digg" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/custom/images/digg.png" alt="Digg" /></a>
	</li>
	<li>
		<a rel="nofollow" href="http://delicious.com/save?url=<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>', 'delicious', 'toolbar=no,width=550,height=550'); return false;" title="Bookmark this post on del.icio.us"><img src="<?php bloginfo('template_directory'); ?>/custom/images/delicious.png" alt="Delicious" /></a>
	</li>
</div><!--end social-media-->

<?php } ?> 

<?php
}

add_action('thesis_hook_after_post_box','share_buttons');

I should point out that this will add share links to StumbleUpon, Twitter, Digg and Delicious only. If you Google around town, you can probably find the code for others too. So this code will add the social media icons to your Thesis theme below each post. I used the thesis_hook_after_post_box hook, but you can use whichever hook you’d like. You can read this post I wrote about Thesis hooks.

Something else I wanted to point out is that you’ll notice I’m using some conditional tags at the top so that the icons do not appear on the home page, category pages and pages. It didn’t make sense for me to include them there, but you can adjust those where needed for your situation.

Also, you’re going to need to place your icon images in the images folder inside your custom folder in Thesis, and make sure they’re named correctly based on the image names you see in the code above.

The Styling

You can style these however you’d like, but this is the css code I used which you can insert in the custom.css file:

.custom #share-buttons { 
	list-style-type:none; 
	overflow:hidden; 
	margin:0; 
	height:60px;  
}

.custom #share-buttons li { 
	float:left; 
	padding:7px 6px;
}

	.custom #share-buttons li a {
		display:block; 
		text-decoration: none; 
}

.custom #share-buttons img { 
	width:125px; 
	height:45px; 
}

	.custom #share-buttons img:hover {
		cursor:pointer;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 */
		filter: alpha(opacity=70); /* IE 5-7 */
		-moz-opacity: 0.7; /* Netscape */
		-khtml-opacity: 0.7; /* Safari 1.x */
		opacity: 0.7; /* Good browsers */
	}

Be sure to put the correct height and width for your icon images on line 19 and 20. Of course, you can style this however you want. I also added a hover state using opacity. I think I got this neat trick from Chris Coyier at css-tricks.com. Something I didn’t add here is that I wrapped it all in another div so I could create that grey background behind the icons. I’ll leave that to you as to how you want to style it.

So that’s how to add the social media share icons to your Thesis theme. Now go ahead and click them below and share this post!

Tagged as: Social Media, thesis tips