Create a Stylish Social Networking Set of Side Tabs for Your Blog

Posted on October 24, 2009 by admin

socialnetworkingsidetabs

Pretty slick, huh? It’s actually super easy to do!

The reason I decided to create these was because I was tired of having to rely on 3rd-party services that could break or “hang” my site due to long load times.

Why not just create them myself and host them on my own server? In addition, I wanted the ability to style it myself and give it a personalized look and feel. I also wanted to be able to add as many as I wanted.

So, here’s how to get your own set of social networking side tabs for your blog…

Ready?

Get a Set of Icons

The first thing you’ll need to do is fine a good set of icons that have the same consistent look and feel. I settled on Komodo Media’s Social Networking Icon Set which I think are beautiful.

Download this and then upload it into your WordPress Theme folder. You can download my chosen set of icons here.

Once you’ve got the icons uploaded you’re ready to add the styling.

Add Styling in CSS

This next part is easy since I’ve done a lot of the work for you already.

Just simply copy and paste the following CSS into your style.css file in your WordPress theme:


.twitter_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:200px;width:38px;z-index:100000;border-left:solid 3px #f07f00;border-top:solid 3px #f07f00;border-bottom :solid 3px #f07f00;background:url(icons/twitter.png) no-repeat #fff 8px 6px;}
a.twitter_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;}
a.twitter_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.rss_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:240px;width:38px;z-index:100000;border-left:solid 3px #f07f00;border-top:solid 3px #f07f00;border-bottom :solid 3px #f07f00;background:url(icons/rss.png) no-repeat #fff 8px 6px;}
a.rss_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;}
a.rss_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.email_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:280px;width:38px;z-index:100000;border-left:solid 3px #f07f00;border-top:solid 3px #f07f00;border-bottom :solid 3px #f07f00;background:url(icons/email.png) no-repeat #fff 8px 6px;}
a.email_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;}
a.email_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.facebook_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:320px;width:38px;z-index:100000;border-left:solid 3px #f07f00;border-top:solid 3px #f07f00;border-bottom :solid 3px #f07f00;background:url(icons/facebook.png) no-repeat #fff 8px 6px;}
a.facebook_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;}
a.facebook_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.posterous_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:360px;width:38px;z-index:100000;border-left:solid 3px #f07f00;border-top:solid 3px #f07f00;border-bottom :solid 3px #f07f00;background:url(icons/posterous.png) no-repeat #fff 8px 6px;}
a.posterous_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;}
a.posterous_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.technorati_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:400px;width:38px;z-index:100000;border-left:solid 3px #f07f00;border-top:solid 3px #f07f00;border-bottom :solid 3px #f07f00;background:url(icons/technorati.png) no-repeat #fff 8px 6px;}
a.technorati_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;}
a.technorati_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.friendfeed_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:440px;width:38px;z-index:100000;border-left:solid 3px #f07f00;border-top:solid 3px #f07f00;border-bottom :solid 3px #f07f00;background:url(icons/friendfeed.png) no-repeat #fff 8px 6px;}
a.friendfeed_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;}
a.friendfeed_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

I’ve put this at the bottom of my style.css file. I’ve already optimized it and killed all the spacing for you.

Of course, you can always change this up, add more styling, add more social networking icons, etc. Just remember to provide the right spacing if you add any more (start with 200px, add 40px for each new one):

Ok, now the last step is to simply add some code to your footer.

Adding the Tabs to Your Theme

The next step is to simply add a few lines of code to your footer and changing them to link properly to your social networks.

You can copy and paste this code and throw it in your footer.php file:

<a href="###" target="_blank" class="twitter_tab">Twitter</a>
<a href="###" target="_blank" class="rss_tab">RSS Feed</a>
<a href="###" target="_blank" class="email_tab">Email Subscription</a>
<a href="###" target="_blank" class="facebook_tab">Facebook</a>
<a href="###" target="_blank" class="posterous_tab">Posterous</a>
<a href="###" target="_blank" class="technorati_tab">Technorati</a>
<a href="###" target="_blank" class="friendfeed_tab">FriendFeed</a>

As you can see from the image below I put this just before the end of the file and the </body></html> tag.

And that’s that!

Have fun with it and let me know if you use it!

54 thoughts on “Create a Stylish Social Networking Set of Side Tabs for Your Blog”

Pingback: Social Networking Sidebar Tabs - ChurchCrunch
Pingback: Tweets that mention Create a Stylish Social Networking Set of Side Tabs for Your Blog – Human3rror -- Topsy.com
Steve Smith on October 24, 2009 at 8:17 am said:

Can you believe I was looking for the code that showed the original Twitter side tab just as you updated! Where was the original from? I may still use the new ones though
- John on October 24, 2009 at 8:20 am said:
  
  I’ve blogged about it somewhere here… i think…
- Steve Smith on October 24, 2009 at 8:46 am said:
  
  Found it at: http://wordpress.org/extend/plugins/wp-followme/ – Thanks
Henry Zonio on October 24, 2009 at 8:22 am said:

The code you have to paste into the footer.php file doesn’t have the ‘class’ designations in them. Just FYI.
- Henry Zonio on October 24, 2009 at 8:22 am said:
  
  BTW, I did figure that out and put them in myself. It works beautifully! Thanks for this.
- John on October 24, 2009 at 8:30 am said:
  
  cool. fixed.
BrettBarner on October 24, 2009 at 2:17 pm said:

Thanks John! Just added this to my site. They look so purdy.
Brian Alexander on October 24, 2009 at 4:59 pm said:

Using..Thanks!
Mark Howell on October 24, 2009 at 7:41 pm said:

very nice john! like the way it puts everything always in view.
jasonthebaldguy on October 24, 2009 at 11:12 pm said:

Hey I just got finished setting this up at my blog and it works great! thanks for the slick and easy setup!
Pingback: Most Recommended Posts Week 43
Jonathan Moss on October 25, 2009 at 8:57 pm said:

Thanks for the walk-thru! Definitely helped a noob like me. Looks really clean!
Pingback: My Manic Monday | To Whom It May Concern
Pingback: Site Updates | Refining Spiritual Community
David Miller on October 27, 2009 at 9:21 pm said:

Used it and LOVE it. Thanks for being so helpful. I would have never known how to do this.
lancemartin on October 28, 2009 at 3:30 pm said:

thanks so much for the post. Having a small problem. The links work but the boxes are empty. no graphic. Cant figure out how to make the graphics show up. Any suggestions? http://www.LanceMartin.net
lancemartin on October 28, 2009 at 3:40 pm said:

never mind got it
rodlie on October 28, 2009 at 4:25 pm said:

hmm….I wonder how it would be different to add it to a blogger site?
Meiko seymour on October 28, 2009 at 7:08 pm said:

started using this but having same problem as "lancemartin" did. any fix for this?
- human3rror on October 29, 2009 at 1:46 am said:
  
  probably where you put the image files… did you put the icons in the theme folder?
  - Meiko on October 29, 2009 at 3:44 pm said:
    
    I put them in the wp-thems folder. Should I put them in the theme folder that I am actually using?
Faye on October 29, 2009 at 12:31 pm said:

Installed it on http://churchofthecove.org Love it… only thing, when I go to the page they aren't there until I reload. I just had a friend check it and it came up right for him. As long as it works overall, I'm good! Thanks, John!
@chaselivingston on October 29, 2009 at 9:16 pm said:

Just installed them and love them so far. One small problem, for some reason, I don't get the orange border like the ones on your site.
Crystal on October 30, 2009 at 4:46 pm said:

Finally got them up and working. Changed the background to black so they blended in better with my site, but for some reason I can't get the borders on there. I'm loving it the way it is!
David Knapp on December 2, 2009 at 4:16 am said:

I really wished this was a plugin because I can't mess with my footer code. If I do then my random posts don't work. Oh well.
human3rror on December 2, 2009 at 4:24 am said:

perhaps i'll create one for you…!
David Knapp on December 2, 2009 at 5:21 am said:

That would be awesome. Let me know if this comes to fruition.
Nick_Shoemaker on December 31, 2009 at 11:33 pm said:

I haven't been able to get the borders to show up? Anyone know if I'm missing something?

Here's my CSS:

.twitter_tab {color:#8EDB25;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:200px;width:38px;z-index:100000;border-left:solid 3px #8EDB25;border-top:solid 3px #8EDB25;border-bottom:solid 3px #8EDB25;background:url(images/twitter_16.png) no-repeat #fff 8px 6px;} a.twitter_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;} a.twitter_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.rss_tab {color:#8EDB25;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:240px;width:38px;z-index:100000;border-left:solid 3px #8EDB25;border-top:solid 3px #8EDB25;border-bottom:solid 3px #8EDB25;background:url(images/rss_16.png) no-repeat #fff 8px 6px;} a.rss_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;} a.rss_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.facebook_tab {color:#8EDB25;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:280px;width:38px;z-index:100000;border-left:solid 3px #8EDB25;border-top:solid 3px #8EDB25;border-bottom:solid 3px #8EDB25;background:url(images/facebook_16.png) no-repeat #fff 8px 6px;} a.facebook_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;} a.facebook_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.vimeo_tab {color:#8EDB25;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:320px;width:38px;z-index:100000;border-left:solid 3px #8EDB25;border-top:solid 3px #8EDB25;border-bottom:solid 3px #8EDB25;background:url(images/vimeo_16.png) no-repeat #fff 8px 6px;} a.vimeo_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;} a.vimeo_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.wordpress_tab {color:#8EDB25;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:360px;width:38px;z-index:100000;border-left:solid 3px #8EDB25;border-top:solid 3px #8EDB25;border-bottom:solid 3px #8EDB25;background:url(images/wordpress_16.png) no-repeat #fff 8px 6px;} a.wordpress_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;} a.wordpress_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

Really like this- but would LOVE to have the border up!

~NickShoe
- human3rror on December 31, 2009 at 11:49 pm said:
  
  where's the site?
  - Nick_Shoemaker on January 1, 2010 at 1:35 am said:
    
    http://nick5hoe.com
    
    ~Nick
@RealLifeSheri on January 2, 2010 at 7:36 pm said:

Love this feature. Im having same problem as Lance in that my boxes are there but no graphic is in them. Also how to you code it to link to your specific Social Media sites?
- human3rror on January 2, 2010 at 7:47 pm said:
  
  Edit the css code and the php calls. Also, some other css is overriding it.
  
  John
Sheri on January 2, 2010 at 3:02 pm said:

You rock for helping and making the available! I figured out how to direct the links to the right places and they are working but I’m still not seeing the actual icons?

I’m using this one to play around and figure it out before I jack up my actual site
My recent post Hello world!
@RealLifeSheri on January 3, 2010 at 3:20 pm said:

Figured it out and totally LOVE it. They are super clean and sharp. I like the prominence of the links. Thanks again for sharing the code and instructions. Here is where I put it in and what I did with it… http://sherimoritz.com/Training/
- human3rror on January 3, 2010 at 5:16 pm said:
  
  wow, great!
NYMustangs.com on January 21, 2010 at 7:21 am said:

Thank you very much for this. I used this for a modified Register button with some WP conditionals. I appreciate this!
NickShoe on January 23, 2010 at 7:07 am said:

I'm still having issues with this. I've added an email subscribe spot and it's not showing up. Anyone have any ideas?

My recent post I don’t watch the news.
- human3rror on January 24, 2010 at 4:05 am said:
  
  I'd have to see your code bro.
NickShoe on January 24, 2010 at 5:37 am said:

Here's my current code:

.twitter_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:200px;width:38px;z-index:100000;border-left:solid 3px #8EDB25;border-top:solid 3px #8EDB25;border-bottom:solid 3px #8EDB25;background:url(images/twitter_16.png) no-repeat #fff 8px 6px;} a.twitter_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;} a.twitter_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.rss_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:240px;width:38px;z-index:100000;border-left:solid 3px #8EDB25;border-top:solid 3px #8EDB25;border-bottom:solid 3px #8EDB25;background:url(images/rss_16.png) no-repeat #fff 8px 6px;} a.rss_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;} a.rss_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.email_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:280px;width:38px;z-index:100000;border-left:solid 3px #8EDB25;border-top:solid 3px #8EDB25;border-bottom :solid 3px #8EDB25;background:url(images/email_16.png) no-repeat #fff 8px 6px;} a.email_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;} a.email_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.facebook_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:320px;width:38px;z-index:100000;border-left:solid 3px #8EDB25;border-top:solid 3px #8EDB25;border-bottom:solid 3px #8EDB25;background:url(images/facebook_16.png) no-repeat #fff 8px 6px;} a.facebook_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;} a.facebook_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.vimeo_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:360px;width:38px;z-index:100000;border-left:solid 3px #8EDB25;border-top:solid 3px #8EDB25;border-bottom:solid 3px #8EDB25;background:url(images/vimeo_16.png) no-repeat #fff 8px 6px;} a.vimeo_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;} a.vimeo_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.wordpress_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:400px;width:38px;z-index:100000;border-left:solid 3px #8EDB25;border-top:solid 3px #8EDB25;border-bottom:solid 3px #8EDB25;background:url(images/wordpress_16.png) no-repeat #fff 8px 6px;} a.wordpress_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;} a.wordpress_tab:hover {margin-left:auto !important;margin-right:-4px !important;}
NickShoe on January 24, 2010 at 5:40 am said:

I just figured it out! (At least the missing tab part- the border part is still not there.) It was the footer code. Thanks!
jonathan on February 10, 2010 at 4:00 am said:

and I have a fix..My bad. Thanks for the thoughts John.
jonathan on February 10, 2010 at 1:53 am said:

I have used this since you posted it, and just recently went to add a Vimeo icon… and I have the box, but now Vimeo icon. The icon is in my themes/icons/ folder, and it's all spaced correctly… any guesses??

I have used this since you posted it, and just recently went to add a Vimeo icon… and I have the box, but now Vimeo icon. The icon is in my themes/icons/ folder, and it's all spaced correctly… any guesses??

STYLE.CSS:

.twitter_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:200px;width:38px;z-index:100000;border-left:solid 3px #f07f00;border-top:solid 3px #f07f00;border-bottom :solid 3px #f07f00;background:url(icons/twitter.png) no-repeat #fff 8px 6px;}
a.twitter_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;}
a.twitter_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.facebook_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:240px;width:38px;z-index:100000;border-left:solid 3px #f07f00;border-top:solid 3px #f07f00;border-bottom :solid 3px #f07f00;background:url(icons/facebook.png) no-repeat #fff 8px 6px;}
a.facebook_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;}
a.facebook_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.rss_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:280px;width:38px;z-index:100000;border-left:solid 3px #f07f00;border-top:solid 3px #f07f00;border-bottom :solid 3px #f07f00;background:url(icons/rss.png) no-repeat #fff 8px 6px;}
a.rss_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;}
a.rss_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.email_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:320px;width:38px;z-index:100000;border-left:solid 3px #f07f00;border-top:solid 3px #f07f00;border-bottom :solid 3px #f07f00;background:url(icons/email.png) no-repeat #fff 8px 6px;}
a.email_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;}
a.email_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

.vimeo_tab {color:#FFFFFF;cursor:pointer;height:28px;left:0;margin-left:-7px;overflow:hidden;position:fixed;text-indent:-100000px;top:360px;width:38px;z-index:100000;border-left:solid 3px #f07f00;border-top:solid 3px #f07f00;border-bottom :solid 3px #f07f00;background:url(icons/vimeo.png) no-repeat #fff 8px 6px;}
a.vimeo_tab {left:auto !important;margin-left:auto !important;margin-right:-7px !important;right:0 !important;}
a.vimeo_tab:hover {margin-left:auto !important;margin-right:-4px !important;}

FOOTER:
Twitter
Facebook
RSS Feed
Vimeo
Email Subscription
- human3rror on February 10, 2010 at 2:19 am said:
  
  i don't see a vimeo icon call in your code.
  
  —
  John Saddington
  JohnSaddington.com
  - jonathan on February 10, 2010 at 3:55 am said:
    
    Isn't it in the Vimeo portion?
    
    background:url(icons/vimeo.png)
    - human3rror on February 10, 2010 at 4:01 am said:
      
      ah, i guess i missed it.
      
      and it's not showing?
      
      —
      John Saddington
      JohnSaddington.com
Pingback: Collaborative Wordpress Experience | jonathancliff.com
afifa on August 3, 2010 at 3:09 pm said:

hello.. i try so many time.. but.. it doesnt work.
btw.. is it work with tumblr?
can u help me?
- John on August 4, 2010 at 9:56 am said:
  
  doesn’t work there i’m afraid.
Stephanie Kempka on October 4, 2010 at 2:49 am said:

Thank you SO Much!
This looks awesome, I was able to customize it and everything!
You Rock!
- Stephanie Kempka on October 4, 2010 at 2:50 am said:
  
  You’ve made me so very happy
David Vogel on December 1, 2010 at 10:45 pm said:

Staight forward, easy to grasp. Great Post

Thxs
chris on March 24, 2011 at 7:30 pm said:

Very usefull!, it took me ages to find this.

Thank You.