Jazzing Up Yoast’s Sociable WordPress Plugin to Spur More Sharing

Yoast’s Sociable plugin for WordPress is a popular tool to display social bookmarking buttons to quickly Digg, Stumble, Tweet, or otherwise share your posts with the World.

My problem, or maybe it is just a preference, is that I do not like teeny-tiny 16×16 icons. I want large in-your-face icons that just shout out “click me now”.

The current design is great for a location inline with your post heading. But the Sociable block of code follows your post or page content.

Assuming that your reader has ventured to the end of the post and has been interested, then shout at him/her with larger-than-life calls to action. Make it easy for them to see the buttons, do not dim them. Make them want to click that button now!

First replace the default icon set, two methods

Venture around on the web and look for a set of social bookmarking icons that will fit in nicely with your theme. There are several free icon sets out there – Google it. Or, you could just create your own (I can’t, not that graphically talented.)

Once you have found your icon set, rename image filenames to match the Sociable icon filenames. You may do this to none, some, or all of the files. Depends on the set.

Method One: Upload all of the new icons to the Yoast Sociable image directory, directly overwriting them. Keep a backup of your new icons for safe keeping in case Sociable update resets or you want to use for other theme designs.

Sociable image directory can be found in:

 (WPInstallDirectory)/wp-content/plugins/sociable/images

Method Two: Create a directory for your new icons inside of the Yoast Sociable image directory.

Open and edit main Sociable file sociable.php per the following:

// Find the following line around line 600:
$imagepath = $sociablepluginpath.'images/';

// Revise $imagepath to point to new directory
$imagepath = $sociablepluginpath.'images/newdirectoryname';

Hey Joost: It would be great to allow the user to set a custom directory for icon image sets. It would extend Sociable very nicely, allowing people to plop image sets in easily.

Image filetypes: The image filetypes of your custom icon set may not match the hard coded filetypes in the Sociable plugin. Filetypes are mostly PNG though, with some GIFs here & there.

You can either convert your icon to the Sociable image type, or edit the plugin code

I was lazy and edited the plugin! But you should probably convert to the correct type, and preserve the transparent areas of the image as well.

Another suggestion: Since most freely available icon sets on the Internet are PNG format, perhaps converting all icons in the default Sociable set to PNG? This would facilitate easy swapping of PNG icon sets. Might even spur some graphically talented individuals to develop sets for Sociable — that would be kewl.

And now, the CSS for “in-your-face”

This is the easy part.

First go into WpAdmin->Settings->Sociable and make sure the option for using the Sociable stylesheet is unchecked. Save your settings.

Add the following into your main theme stylesheet:

/*---:[ Yoast Sociable Plugin ]:---*/
.sociable { margin: 16px 0; text-align: center; background-color: #dcdcdc; border: 1px solid silver; padding: .7em 0; }
.sociable_tagline { padding-bottom: .7em;  font: bold 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;}
.sociable ul {  display: inline; margin: 0 !important;  padding: 0 !important; }
.sociable ul li {display: inline !important;  list-style-type: none; margin: .3em; padding: 1px;}
.sociable img {width: 48px; height: 48px;  }

.sociable-hovers {opacity: 1;  -moz-opacity: 1;filter: alpha(opacity=40);}
.sociable-hovers:hover {opacity: .45;-moz-opacity: .45;filter: alpha(opacity=100);}

.sociable a { border:0 !important; }      
.sociable a:hover {background-color: #dcdcdc; }  

Feel free to edit CSS to your own preference. This is just a basic, not hard to notice type of style.

Play close attention to the width/height of .sociable img class. I am using 48×48 here. If you have a lot of icons, you may want to adjust .sociable img to 32×32, thereby reducing the 48’s if you get squeezed for space.

I suggest using only buttons for the social sites you frequent regularly, if at all possible, plus a couple of the biggies & email. Focus on your crowd and give them the buttons they know and want to see. Too many choices for your users, and they may not notice their call to action.

You will also notice that I reversed the hover opacity. It is set to be fully visible, and will fade when hovered over. The reasoning is that some people, myself included, find it hard to see what is there without hovering over each icon individually only to find out there is no Stumble or whatever.

Hopefully, this will make it easier on your readers (less difficult actually) and will spur more clicking from them. You want them to smack that button, so show it off. Dimming and diminishing the size of these icons seems counter-productive, silly.

And feel free to test these buttons for me right now.