Add Slick Social Media Icons to Thesis

So as it currently stands there are some pretty sweet social media plugins and even some killer social media tutorials out there for Thesis, but personally I wanted to roll something custom for Art of Blog.

Thesis Social Media Icons Video:

Today’s video will show you how to quickly implement sleek unobtrusive social media links/smart icons to your Thesis site without a plugin. These smart icons can be found right under this posts’s title.

Implementation

Now that you have watched the video on how to implement the code its time to grab the code below. Simply add these two snip-bits to your custom_functions.php and custom.css and you will have a slick looking social media setup.

Add to your custom_functions.php

Make sure to change $twitter=’artofblog’; to $twitter=’[Insert your Twitter Account]‘;

To implement the code below simply copy and paste it into your custom_functions.php. Don’t forget to add your twitter name. This code sets up the social media “smart icons” along with the HTML to allow us to effectively style it.

<? 

function social_icons(){
  if(is_single()){
$twitter='artofblog';
	global $post;
?>
			<div class="social">
					<strong>Spread it!</strong>

				<div class="social_button dg">
                	<a class="DiggThisButton"><img src="http://digg.com/img/diggThisCompact.png" height="18" width="120" alt="DiggThis" /></a>
                </div>

                <div class="social_button tm">
				<script type="text/javascript">	tweetmeme_source = '<?php echo $twitter; ?>';	tweetmeme_style = 'compact';	</script>
				<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
                </div>

                <div class="social_button fb">
                <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a>
                </div>

                <div class="social_button su">
                <a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" id="stumbleupon" target="_blank"><img src="http://cdn.stumble-upon.com/images/badgeStumble.png" alt="submit to Stumble Upon"/>
                </a>
                </div>
                <div class="social_button em">
              <a href="mailto:?subject=Sharing: <?php the_title(); ?>&body=I wanted to share this with you. Thought you might enjoy it:%0A%0A<?php the_permalink(); ?>" title="Email This" target="_blank">Email This</a>
              </div>
			</div>
			<div class="clear"></div>
			<? 

			function digg_footer(){
				echo '<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>';
				echo '<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>';
					}
			add_action('wp_footer','digg_footer');
   }
}
add_action('thesis_hook_before_post','social_icons'); ?>

Add to Your custom.css

Now that we have added the smart icons we need to style them. Please make note of the .social{margin:-15px auto 10px;} You may need to change the -15px to something else depending on your customizations.

	.social { border: dashed #ddd; border-width:1px 0 1px 0; margin: -15px auto 10px; display:block; padding: 3px 0 1px 0px;  overflow: hidden; }
	.social .social_button {float: left; display: inline; overflow: hidden; height:22px; }

	.social .social_button.dg { margin: 0px 0 0 20px ; padding-top: 4px;}
	.social .social_button.tm { margin: 0px 0 0 12px;  padding-top: 4px;}
	.social .social_button.fb { margin: 0 0 0 15px;  padding-bottom:0px;}
	.social .social_button.su { margin: 0px 0 0 30px;  padding-top: 2px;}
        .social .social_button.em { margin: 0 0 0 20px;  padding-top: 0px;}
        .social .social_button.em a{background:#eee url(images/emailthis.gif) 3px 50% no-repeat; padding:2px 3px 2px 20px;  font-size:10px; border:#ddd 1px solid; text-decoration:none; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
		.social .social_button.em a:hover {background:#ddd url(images/emailthis.gif) 3px 50% no-repeat}
	.social .social_button a img { border: 0; padding: 0; }
	.social strong { font-size: 11px; float: left; margin:2px 0 0 0; color:#555;}

.clear{clear:both;}

Closing:

Matt Langford created an awesome post on how to add the Facebook like button with Thesis. Make sure to check it out.

Note: Thanks to the help and suggestion by Scott Wyden we have added “Email This” functionality. Here is the image you need . Right Click -> Save Image as. Make sure you grab the email icon and add it to you custom/images folder.

Hopefully this quick tutorial has helped you figure out how to implement social media into your Thesis Theme.

If you have any questions on implementation or the code please feel free to leave us a note in the comments.