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
- 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
- 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!

{ 5 trackbacks }
{ 134 comments… read them below or add one }
← Previous Comments
oh and one more thing
my stumbleupon icon tries to save only a specific blog. i dont know why it chooses that specific one so if you could please take a look at that as well
tnx
You are a legend! Great work.
I’m trying this on our test site and I’m not getting it. Cut and pasted code, copied your icons to my directories and adjusted the urls for those. The links appear at the bottom of the page as text. I’ll send you the url.
If you could take a look, I’d really appreciate it.
Joel
the URl for my test site is ccinodesign.com/blog
@Joel
Insert a “*/” somewhere before the CSS for the feedback. You have unclosed comments.
@Yiannis
Stumbleupon is simply responding to the address that you entered into it. If you change the address, it will change what it saves. Delicious is working fine for me.
@Craig
Thanks, man. Keep visiting and let me know if there is ever anything you need.
I can’t seem to figure this out with the Thesis 1.6. I tried following your instructions and ever time I do it, my site disappears and I get an error message that says like 20 of CSS code is incorrect. Any help would be greatly appreciated.
@buck daddy
The issue is unquestionably in your custom_functions, as that is the only thing that can cause an error of the type you are reporting. Go to line 20 of your custom_functions and make sure you don’t have any rogue spaces or periods. Also make sure you aren’t missing any semicolons. The code definitely works so make sure it is entered exactly as I have it. Copy and paste first, then go through and adjust. Let me know how it turns out.
I am back and trying this again. Seems that it works nicely in IE but in Firefox the icons are sitting at the bottom of the page.
Thank you Matt.
Mary Ann
Awesome work. Really a simple and compelling application.
Very cool. I had issues with using Open Hook. When it code was added to the before HTML hook I got a parse error for an unmatched }. Cutting the same code out and placing it in the custom_function.php made it work great!
Wow, this is cool! But my icons are showing up at the bottom of the page.
Any ideas?
Thanks!!
@Chris
In the very first “.custom #feedback” you are missing the “.” before “custom.” 99.999999999% of the time the error is just that simple
Ha! Thanks! Have a great day.
@ Matt
i managed to get it but not how it’s supposed to i guess
i changed no-repeat 0 -32px into no-repeat 0 0 and now they show up
the only downside is i still can’t get the hover effect
Where can I find a matching tumblr icon?
Got It!!!
created hover icons, but to add padding 8px to get it right
check on http://www.carlovanderpluijm.com
thanks
Great work Matt! Can I get the icons?
Hi Matt,
Are Google Reader or Foursquare on the table for icons you can make?
Thanks.
Easy installation and worked like a charm. thank you for the great mod.
Awesome stuff
However i’m struggling to get these to display on my website.
-Jason
@Jason Schappert
You need to re-copy the code in custom_functions.php. Yours was simply entered incorrectly.
Hey Matt,
Thanks for the reply, sorry to keep being a pain.
I copied it just like it is on the site and it still won’t come up. If you scroll down to the bottom it just comes up as a bunch of invalid text links
Sorry to bug you again,
Jason
@Jason Schappert
No worries. The id=”twitter” and so on are all messed up. they must exactly match what I have in the tutorial.
Copied it just like the video and still no luck
could it be a tag conflict?
@Jason Schappert
I looked at your site again and the id’s are still not right. So I can show you what I mean, I am including some pics of what is currently in your site’s HTML markup. You will see that the id’s do not match what is in the tutorial.
feedback
twitter
facebook
Each of those should read:
id=”feedback”
id=”twitter”
id=”facebook”
ALL of your id’s suffer from the same problem.
The icons will NOT work until the id’s match exactly what I have in the tutorial.
Thank You!
Ok Matt I have to admit I thought you were going crazy!
I didn’t see any of those forward slashes when I was editing in Openhook. However I saw what you saw when I looked at my source page.
So I opened it up in a text editor. Took out the forward slashes and FTP’ed the file to the folder to avoid openhook and BAM!
You my friend are very good.
Thanks,
Jason
Thanks a lot for the tutorial. This type of icons is precisely what I was looking for!
Great work man. From many days I was searching for this feature & finally got her. Thanks.
I’m having an interested problem with this at http://greenyourdecor.com
The links are all there, but the icons are showing up only upon rollover. You can see them until you roll over them. I have them on the left side, and they are there although you can’t see them. Any idea why?
I had to make slight changes to the code because my icons are 40 pixels wide. Could that be the problem?
Thank you so much for all of your tutorials, and especially for this one. I had it up in closer to 3 minutes! I really appreciate your easy-to-follow instructions and your giving nature. I will return again and again to your site. Although I think I’ve already implemented almost all of your suggestions already, so can’t wait for new ones…
Aloha, Beth
Thanks Matt. A few things have me puzzle. When I add my own icons and url nothing shows up. When I leave your url icons show up. Sometimes half of my icons show up. They are 50px
@George
The right image size or an adjustment is CSS is required.
Hi Matt,
Awesome code!!Would you be willing to provide the icons so a user can store them on their server? Also, I personally find the spacing a bit tight. Assuming, the icons are 20×20(hypothetically) each for a full space of 80 px, how do I get a spacing of 20px after each icon for a full space of 80px+20+20+20=140px.
It’s not a css spacing issue cos I’ve tried that…the rollovers don’t…roll.
@Avinash
Actually, it is 100% CSS. Just add
margin-bottom: 20px;to each icon id (i.e. #twitter) that you want space after. That’s it.As far as the images, just type in their address on my server (I give them in the tutorial), right click, copy paste in an image editor. If you don’t have Photoshop, pick up GIMP. It’s free.
← Previous Comments