How To Add Killer Social Icons With Thesis

IE7 and IE8 display issue is fixed!

Changed the background position from “-3.2em” to “32px.” Changed width from “3.2em” to “32px.” Simply make those changes and it should work great! Thanks to gtalbot.org, who listed it as number 37 of 171 allegedly fixed bugs in IE 8 [fixed as of 6001.18343]. Sorry I didn’t notice this sooner, guys!

Social Icons Code Update: 8/14/2009

The code for this tutorial has been updated in the text, with a new video coming momentarily. Please make sure that you make the proper adjustments. This now validates like a mofo

Share Yourself In Under Seven Minutes

So, as I sit here and get severely tortured by my wife’s new obsession called “More To Love”, I figured I should share a really awesome way to display some social networking icons, RSS and email just like you see to the left on my site. In less than 7 minutes you will be able to connect your readers/users/subscribers to your Twitter, Facebook, RSS and Email all using Thesis Hooks. Below is the code you need to make it all happen.

Put This In Your Custom_Functions.PHP

function social_iconz() {
?>
<div id="feedback"><a href="http://twitter.com/yourusername" id="twitter">[your name] on Twitter</a><a href="http://facebook.com/yourusername" id="facebook">[your name] on Facebook</a><a href="Your RSS Feed URL" id="rss">[your] RSS Feed</a><a href="mailto:youraddress@whatever.com" id="email">[your] Email</a></div>
<?php
}
add_action('thesis_hook_after_html','social_iconz');

Put This In Your Custom.CSS

.custom #feedback { background: transparent; width: 3.2em; position: fixed; top: 40%; left: 0.25%; }

.custom #feedback a { display: block; text-indent: -9999px; height: 32px; outline: none; }

.custom #feedback #twitter { background: url('http://thesistutor.com/wp-content/uploads/2009/07/twittericon.png') no-repeat 0 -32px; }
	.custom #feedback #twitter:hover { background-position: 0 0; }

.custom #feedback #facebook { background: url('http://thesistutor.com/wp-content/uploads/2009/07/facebookicon.png') no-repeat 0 -32px; }
	.custom #feedback #facebook:hover { background-position: 0 0; }

.custom #feedback #rss { background: url('http://thesistutor.com/wp-content/uploads/2009/07/rssicon.png') no-repeat 0 -32px; }
	.custom #feedback #rss:hover { background-position: 0 0; }

.custom #feedback #email { background: url('http://thesistutor.com/wp-content/uploads/2009/07/emailicon.png') no-repeat 0 -32px; }
	.custom #feedback #email:hover { background-position: 0 0; }

Special Cases

Special cases will be updated as I discover them. Special cases can, from time to time, cause HTML validation errors. The errors are NOT a product of my work, but are issues with the way that sites such as Delicious and StumbleUpon work their magic. If you have a validation concern, please email me.

For Delicious, the CSS principle stays the same but what goes into custom_functions changes.

<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;" id="delicious">Bookmark this</a>

For StumbleUpon, the CSS principle stays the same but the custom_functions changes.

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" id="stumbleupon" target="_blank">Stumble</a>

AND DON’T FORGET!
You are WELCOME to use the images I have made for YOU! In fact, if you want me to make others, I will!

Here are the ones I can make:

• AIM
• Apple
• Bebo
• Blogger
• BrightKite
• Delicious http://thesistutor.com/wp-content/uploads/2009/07/deliciousicon.png
• DesignFloat
• Digg http://thesistutor.com/wp-content/uploads/2009/07/diggicon.png
• Dopplr
• Flickr http://thesistutor.com/wp-content/uploads/2009/07/flickricon.png
• FriendFeed http://thesistutor.com/wp-content/uploads/2009/08/friendfeedicon.png
• Gamespot
• Google
• GoogleTalk
• Last.fm
• LinkedIn http://thesistutor.com/wp-content/uploads/2009/07/linkedinicon.png
• Mixx
• MobileMe
• MySpace http://thesistutor.com/wp-content/uploads/2009/07/myspaceicon.png
• NetVibes
• NewsVine
• OpneID
• Picasa
• Plurk
• Posterous http://thesistutor.com/wp-content/uploads/2009/07/posterousicon.png
• Reddit
• Skype
• StumbleUpon http://thesistutor.com/wp-content/uploads/2009/07/stumbleuponicon.png
• Technorati
• Tumblr
• Viddler http://thesistutor.com/wp-content/uploads/2009/07/viddlericon.png
• Vimeo http://thesistutor.com/wp-content/uploads/2009/07/vimeoicon.png
• Virb
• Windows (though I won’t be happy)
• WordPress
• Yahoo
• YahooBuzz
• Yelp http://thesistutor.com/wp-content/uploads/2009/07/yelpicon.png
• Youtube http://thesistutor.com/wp-content/uploads/2009/07/youtubeicon.png

How To Get Your Icon

In order for me to make an icon you may either leave me a comment on this post or send me an email by clicking the little mail image to the left of the screen.

Don’t Forget To Pick Up Your Copy Of Thesis!

Also, help keep Thesis Tutor alive by donating!