Practical WordPress Development

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!

48 Comments

  1. Jayant Tyagi

    Simple and Good plugin

    • Tom McFarlin

      Thanks Jayant!

  2. Jack

    How do I change the settings?

    • Tom McFarlin

      All of the settings are contained within the widget’s admin panel when you drag it into a sidebar.

  3. Ev

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

  4. Monica

    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

    • tommcfarlin

      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!

      • Monica

        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

        • tommcfarlin

          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!

          • Monica

            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.

          • tommcfarlin

            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!

  5. Cathy Fielding

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

    • tommcfarlin

      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!

  6. Ricardo

    Nice plugin, thanks a lot.

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

    Happy Holidays.

    • tommcfarlin

      Making a note – will see what I can do for the next version.

  7. gabe

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

    • tommcfarlin

      Thanks – I’ve added this as a feature request and will see about getting it in soon!

  8. Jeremy

    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.

    • Tom McFarlin

      Hey Jeremy – this likely has to do with your theme or a conflicting plugin. Regardless, I’d be glad to take a look. Shoot me an email at this page and we’ll go from there.

  9. Julie

    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

  10. Ephraim

    Love the plugin, thank you!!!

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

  11. Matt

    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,

    • Tom McFarlin

      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.

  12. Bara

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

    Please help.
    Thanks a lot

    • Tom McFarlin

      You should be able to provide the following info in the URL field:

      skype:username?call

  13. Ramsay

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

    • Tom McFarlin

      Thanks!

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

      • Ramsay

        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.

        • Tom McFarlin

          Thanks!

          I used to have this available in a a premium version of the plugin, I cancelled it.

          I’m considering bringing it back, but it’ll be under a slightly different business model, so I’ll definitely consider bringing this feature back into the fold.

          • Ramsay

            Glad to know this. Will be waiting for that. Thank you.

  14. Monica

    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

    • Tom McFarlin

      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.

  15. fernando

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

    • Tom McFarlin

      This has to do with a style in your theme. If you’re interested, I can help by providing the necessary CSS to clean this up. Shoot me an email.

  16. Bob

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

    • Tom McFarlin

      Hey Bob – I’ll definitely take this into consideration and see about doing a release for it sometime soon!

  17. gp

    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

    • Tom McFarlin

      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.

  18. Helen D'Silva

    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

    • Tom McFarlin

      Hey Helen,

      You should be able to add this: `skype:skypename` where “skypename” is your Skype username.

  19. ken murika

    This is what I have been looking for. Thanks

    • Tom McFarlin

      Sure thing!

  20. Sharon Vaz

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

    • Tom McFarlin

      Hey Sharon,

      Unfortunately, the plugin doesn’t support shortcodes so it can only work in a widgetized area.

      Thanks a lot for the question!

      • Sharon Vaz

        Tom, thank you for your speedy response in clarifying this.

  21. Enrico

    Can you add instagram icon?

    • Tom

      Hey Enrico – unfortunately, I just retired this project today.

© 2020 Tom McFarlin

Theme by Anders NorenUp ↑