Tipsy Social Icons Plugin For WordPress

This version is a major update but if you're interested in skipping most of the information, jump down to what's new in this version.

Tipsy Social Icons In January 2011, Atlanta was hit with a major snow storm that had many of us hanging out inside of our homes for days at a time. To say that I had cabin fever would be an understatement.

During that time, I wrote a really simple social icons plugin for WordPress. Because I used Jason Frame’s excellent jQuery plugin called Tipsy, I aptly named the plugin Tipsy Social Icons.

Since it was first released, I’ve done much more WordPress development and this plugin wasn’t up to par with my usual standards, so I’m updating it and am officially releasing Tipsy Social Icons 3.0.

About Tipsy Social Icons

Tipsy Social Icons is a simple WordPress widget that makes it easy to include a variety of social icons and custom labels into your WordPress blog or site.

It includes both 16×16 and 32×32 variations of the icons as well as optional hover effects. It allows you to:

  • Define a custom URL for each image
  • Easily customize each icon’s label
  • Modify the placement of the tooltips
  • Select which size icon you’d like to use
  • Is fully localized for translation
  • …and more

The plugin includes icons for:

  • Deviant Art
  • Digg
  • Dribbble
  • Email
  • Evernote
  • Facebook
  • Flickr
  • Forrst
  • FourSquare
  • GitHub
  • Google+
  • LastFM
  • LinkedIn
  • Picasa
  • Pinterest
  • Rdio
  • RSS
  • Skype
  • Soundcloud
  • Stack Overflow
  • Tumblr
  • Twitter
  • Vimeo
  • Yelp
  • YouTube

You can install the plugin from the WordPress Plugin’s Dashboard or from the project’s page.

As always, I’m open to suggestions, questions, and comments. Feel free to leave a comment or shoot me an email.

What’s New in 3.0?

Tipsy Social Icons 3.0 includes a number of major improvements:

  • The entire administration interface has been improved
  • I’ve brought the codebase up to the WordPress Coding Standards
  • Introduced placeholder text for each social icon field
  • The CSS and JavaScript has been combined minified in order to decrease the number of dependencies when the browser loads the plugin
  • Tooltips can now be completely disabled
  • I removed the Posterous icon
  • I added icons to Evernote, GitHub, Picasa, Rdio, Stack Overflow, Stumble Upon, Yelp, and ZooTool
  • The screenshots have been updated as well as the plugin header image

For more information, be sure to check out the documentation at the plugin’s page in the WordPress Plugin’s Repository.

Donations: If you’ve enjoyed using this plugin, please consider making a donation!

Note: Many of the icons are based on Rogie King’s excellent social networking icon pack. The license for the plugins is bundled with the plugin.

Thanks to Branco WebHostingGeeks.com for the Slovak translation!

52 Comments

How do I change the settings?

I love this widget and would love it if you added yfrog and reddit

I think I may need a bit of help :) Was able to install and get most links working well except for LinkedIn – this is the link I used: linkedin.com/pub/monica-parlee/32/700/390 and subscribe by e-mail – this is the link I used: http://feedburner.google.com/fb/a/mailverify?uri=blogspot%2FWYjyZR I checked and redid them a couple times. any suggestions? This is my blog site – http://oldermommystillyummy.com

Thanks so much,

Monica

    Hey Monica,

    For LinkedIn, the URL should be http://www.linkedin.com/pub/monica-parlee/32/700/390/ and that should work (I just tested it myself) and it look me to the right place.

    The email field is meant to have your email address so if you place that into the box, it should generate a link that, when clicked, opens a visitor’s email application.

    Try those and let me know!

      Thanks so much Tom, the LinkedIn url worked perfectly! I’m still having trouble with the e-mail, it takes me to a blank page. I’m sure it’s something I’m doing incorrectly…my email is monica.parlee@gmail.com…is that what I should be putting in?
      I thought the “envelope” button was a subscribe by e-mail button, is that available?

      Thank you so much for your help!
      Monica

        For this plugin, “Subscribe By Email” isn’t an option, but JetPack offers this and it lets you setup a nice widget to manage it.

        Back to the envelope icon, try this: Instead of just putting in your email address, drop this in the field:

        mailto:monica.parlee@gmail.com

        And see if that doesn’t have the effect you’d like.

        Let me know!

          Hi Tom,

          No, still didn’t work…takes you to a blank page. Maybe I’ll just have to remove the envelope. Thanks for your help…I’m off to check out JetPack, thanks for the link.

          Gotcha – this is one of those things that has to do with a user’s specific browser configuration and their email client so different people see different results.

          Anyway, good luck with JetPack and thanks for the comments!

I uploaded Tipsy to use on my website, but was disappointed to not find IMDb among the other icons. Any chance of adding it???

    Hey Cathy – not likely. It’s such a niche site that I’m sure sure many people would use it, but I could be wrong! If enough people request it, I’d be happy to add it!

Nice plugin, thanks a lot.

¿Could you please add Behance? http://www.behance.net/ Thank you.

Happy Holidays.

any way you can add instagram to your plugin you have the best social plugin out there thanks

Hey Tom. I’m having a real difficult time getting the links to work. Ive double checked the url adresses i’ve inputted in the sidebar in a separate tab and they work, however, the buttons on my footer (where I’m using your plugin) aren’t working.

Hey tom
I just instal the plugin and i would like to add the rss feed. But which url do i need to add this?
I hope you can read this because my english isn’t so good.

greetings
Julie

Love the plugin, thank you!!!

Any chance you could provide the ability to re-order the icon output?

Hello Tom -

I installed the plug-in and it looks great, but I get this error page when I click on the icon.

http://365movement.com/www.twitter.com/go365movement

Appreciate the help,

    Sure thing, Matt.

    Make sure that you’re supplying the full URL such as http://twitter.com/go365movement/ rather than twitter.com/go365movement/ and you should be good.

    Let me know, if not.

Hi,
I’ve juste used your plugin, but have no idea how to use the skype icon… for calling?

Please help.
Thanks a lot

Is it possible to change the order of the icons without touching the code? Anyhow very nice plugin, like it!

    Thanks!

    Unfortunately, no. The icons are ordered as you see in the dashboard.

      No probs. I will edit the code and reorder them based on my requirement. I think some sort of Drag and Drop functionality need to be implemented in the widget. I came across many social profile widgets but none of them have ability to re-order the icons. It would be great if you can include that option in future update. Just my thoughts.

I love this widget, it makes life so much easier and my blog so much neater! My buttons used to line up perfectly but lately I have noticed they are not, I tried re-installing a couple but still not lined up. I’m on W/P and her is my link if you would like to take a look. (http://oldermommystillyummy.com)
Also, any chance of adding a BlogLovin’ button next update?
Thanks,
Monica

    Hey Monica,

    It sounds like this may have to do with some CSS that has been introduced in your theme or a plugin. Shoot me an eamil referencing this particular comment and let’s see if we can’t get it taken care of.

Hi!! Congratulations for your work!! It’s nice!!
I have a question. After installed it, it appears 2 small orange arrows near to the FB icon. Do you know why? Thanks a lot for your help!!!

Excellent plugin. If you added “Yammer” I’d actually use it. Hope you do.

Hello,
I’m working with Acid theme. It uses your plugin but I’m not able to install it because when I try to active it, I receive this message:

Plugin could not be activated because it triggered a fatal error.
Fatal error: Cannot redeclare class Tipsy_Social_Icons in /mounted-storage/home103a/sub003/sc50191-ATAO/viscere.it/wp-content/plugins/tipsy-social-icons/plugin.php on line 306

Is it a my server side problem?
Please, could you help me to solve it?
Thanks

    Hey GP,

    Based on what you’ve provided, it sounds like the plugin is already installed elsewhere on your blog – its either already bundled with your theme or its added as a second plugin.

    Fatal error: Cannot redeclare class Tipsy_Social_Icons

    This means that the code responsible for the plugin is already located somewhere in your WordPress installation.

Hi Tom,

What information do I put in the Skype field, in order for people to be taken to connect with me on Skype when they click the icon? I used Skype Developer to generate the code, but the plug in does not accept the code when I copy and paste it into the relevant plug in field.

What am I doing incorrectly here?

Helen

This is what I have been looking for. Thanks

Hi Tom, what shortcode do I use to express the content in a non-widget area?

Can you add instagram icon?

Trackbacks and Pingbacks

[...] continue building plugins for WordPress – case in point, I release a new one last week and I updated another one, as [...]

[...] really no excuse when you can use something as simple as Tipsy Social Icons. Just pick the ones you want to feature, link them to your profiles, choose a style and bam, job [...]

[...] plugin that we’re gonna be covering today is called Tipsy Social Icons. It comes pre-configured with a large number of social network icon shortcuts which you can easily [...]

[…] in 2011, I released the first version of Tipsy Social Icons – a WordPress plugin designed to make it easy to add all of your social networking icons to […]