Oct 24
48
Share

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

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.

uploadicons

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):

stylecss

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.
footerphp

And that’s that!

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

Filed under: Technology | Tagged: Technology

48 Responses to “Create a Stylish Social Networking Set of Side Tabs for Your Blog”

  1. Steve Smith October 24, 2009 at 8:17 AM #

    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 :-)

    Reply
  2. Henry Zonio October 24, 2009 at 8:22 AM #

    The code you have to paste into the footer.php file doesn’t have the ‘class’ designations in them. Just FYI.

    Reply
    • Henry Zonio October 24, 2009 at 8:22 AM #

      BTW, I did figure that out and put them in myself. It works beautifully! Thanks for this.

      Reply
    • John October 24, 2009 at 8:30 AM #

      cool. fixed.

      Reply
  3. BrettBarner October 24, 2009 at 2:17 PM #

    Thanks John! Just added this to my site. They look so purdy. :)

    Reply
  4. Brian Alexander October 24, 2009 at 4:59 PM #

    Using..Thanks!

    Reply
  5. Mark Howell October 24, 2009 at 7:41 PM #

    very nice john! like the way it puts everything always in view.

    Reply
  6. jasonthebaldguy October 24, 2009 at 11:12 PM #

    Hey I just got finished setting this up at my blog and it works great! thanks for the slick and easy setup!

    Reply
  7. Jonathan Moss October 25, 2009 at 8:57 PM #

    Thanks for the walk-thru! Definitely helped a noob like me. Looks really clean!

    Reply
  8. David Miller October 27, 2009 at 9:21 PM #

    Used it and LOVE it. Thanks for being so helpful. I would have never known how to do this.

    Reply
  9. lancemartin October 28, 2009 at 3:30 PM #

    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

    Reply
  10. lancemartin October 28, 2009 at 3:40 PM #

    never mind got it

    Reply
  11. rodlie October 28, 2009 at 4:25 PM #

    hmm….I wonder how it would be different to add it to a blogger site?

    Reply
  12. Meiko seymour October 28, 2009 at 7:08 PM #

    started using this but having same problem as "lancemartin" did. any fix for this?

    Reply
    • human3rror October 29, 2009 at 1:46 AM #

      probably where you put the image files… did you put the icons in the theme folder?

      Reply
      • Meiko October 29, 2009 at 3:44 PM #

        I put them in the wp-thems folder. Should I put them in the theme folder that I am actually using?

        Reply
  13. Faye October 29, 2009 at 12:31 PM #

    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!

    Reply
  14. @chaselivingston October 29, 2009 at 9:16 PM #

    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.

    Reply
  15. Crystal October 30, 2009 at 4:46 PM #

    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!

    Reply
  16. David Knapp December 2, 2009 at 4:16 AM #

    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.

    Reply
  17. human3rror December 2, 2009 at 4:24 AM #

    perhaps i'll create one for you…!

    Reply
  18. David Knapp December 2, 2009 at 5:21 AM #

    That would be awesome. Let me know if this comes to fruition. :)

    Reply
  19. Nick_Shoemaker December 31, 2009 at 11:33 PM #

    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

    Reply
  20. @RealLifeSheri January 2, 2010 at 7:36 PM #

    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?

    Reply
    • human3rror January 2, 2010 at 7:47 PM #

      Edit the css code and the php calls. Also, some other css is overriding it.

      John

      Reply
  21. Sheri January 2, 2010 at 3:02 PM #

    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!

    Reply
  22. @RealLifeSheri January 3, 2010 at 3:20 PM #

    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/

    Reply
  23. NYMustangs.com January 21, 2010 at 7:21 AM #

    Thank you very much for this. I used this for a modified Register button with some WP conditionals. I appreciate this!

    Reply
  24. NickShoe January 23, 2010 at 7:07 AM #

    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.

    Reply
  25. NickShoe January 24, 2010 at 5:37 AM #

    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;}

    Reply
  26. NickShoe January 24, 2010 at 5:40 AM #

    I just figured it out! (At least the missing tab part- the border part is still not there.) It was the footer code. Thanks!

    Reply
  27. jonathan February 10, 2010 at 1:53 AM #

    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

    Reply
    • human3rror February 10, 2010 at 2:19 AM #

      i don't see a vimeo icon call in your code.

      —
      John Saddington
      JohnSaddington.com

      Reply
      • jonathan February 10, 2010 at 3:55 AM #

        Isn't it in the Vimeo portion?

        background:url(icons/vimeo.png)

        Reply
        • human3rror February 10, 2010 at 4:01 AM #

          ah, i guess i missed it.

          and it's not showing?

          —
          John Saddington
          JohnSaddington.com

          Reply
  28. jonathan February 10, 2010 at 4:00 AM #

    and I have a fix..My bad. Thanks for the thoughts John.

    Reply

Trackbacks/Pingbacks:

  1. Social Networking Sidebar Tabs - ChurchCrunch - October 24, 2009

    [...] wrote the tutorial here on how to get them. Go do it and stop banking on 3rd party services to give you the [...]

  2. Tweets that mention Create a Stylish Social Networking Set of Side Tabs for Your Blog – Human3rror -- Topsy.com - October 24, 2009

    [...] This post was mentioned on Twitter by duncanmacgregor, Wingspan Marketing. Wingspan Marketing said: RT @human3rror: Create a Stylish Social Networking Set of Side Tabs for Your Blog http://bit.ly/1ulx5L [...]

  3. Most Recommended Posts Week 43 - October 25, 2009

    [...] Create a Stylish Social Networking Set of Side Tabs for Your Blog Human 3rror posted a great article on how to make a very cool and stylish social networking set so you can put on your blog. A super duper tutorial with all the code ready for you to copy and paste. This is for you more advanced bloggers out there.. [...]

  4. My Manic Monday | To Whom It May Concern - October 26, 2009

    [...] screen.  Check out the social media links if you like, and big thanks to John Saddington for the easy step by step process on how to add it.  Because I’m no web developer by any [...]

  5. Site Updates | Refining Spiritual Community - October 27, 2009

    [...] links to my various social networking profiles. John was big help here as well with this excellent tutorial. I think I will end up adding a few more icons from Komodo Media for some profiles John [...]

  6. Collaborative Wordpress Experience | jonathancliff.com - February 23, 2010

    [...] at http://www.human3rror.com and http://www.churchcrunch.com.  It was even from his site that I picked up the cool toolbar over on the right side of my blog!I’d love to know what you’re using.  What am I missing out on? var addthis_language = [...]

Leave a Reply: