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.

Displaying code snippets in WordPress can be a chore. Fortunately there are several plugins to choose from that will help you maintain the original formatting.

My plugin of choice right now is Scott Reilly’s Preserve Code Formatting. Scott’s plugin prevents modification by WordPress and other plugins while retaining original whitespace and characters.

I looked at other plugins that included syntax highlighting, but quickly dismissed them. Syntax highlighting produces a ton of inline style spans wrapping the code fragments, and frankly, my choice of styling choices may not agree with your choices.

Now I can just paste code into <code>, <pre>, and/or other tags I can additionally specify and this plugin will:

Prevent WordPress from HTML-encoding text (i.e. single- and double-quotes will not become curly; -- and --- will not become en dash and em dash, respectively; ... will not become a horizontal ellipsis, etc)
Prevent most other plugins from modifying preserved code
Optionally preserve whitespace (in a variety of methods)
Optionally preserve code added in comments

One caveat with the plugin is that you turn off the Visual Editor in your WordPress settings. No biggy, I do this anyway.

Another quirk to the plugin is that it appears that the code block seems to get double wrapped with the <pre> tag. Why it does this, I do not know. But I took advantage of the quirk in my style sheet to apply a border effect.

     /* additional <pre> element added to Html output */
  /* start of my post's code snippet */
         ... my code snippet sample here
      

The option to preserve code in comments (on by default) was left on. This will come in handy for any commenters who wish to leave sample code snippets if they wish. So give it a try, that will be kewl to do.

Leave a comment if you are using this plugin and tell me about it. Or another plugin that you are using. Will be interested in seeing some samples in action.

I am now starting from scratch with WordPress 2.7 — this is the first time I have used this later version. The backend Admin area was totally rearranged. I rather like it though, especially the way Posts are laid out. It felt more comfortable to use to me.

What follows is an abstract for some of the high-points during the creation of this blog. More for documentation purposes, and in the future will be updated to include links to newer posts in which I can go into more detail.

WordPress Settings

Moved WordPress to the root domain per Codex article.

Turned off the Visual Editor in profile settings.

Custom structure for Permalinks /%category%/%postname%/

WordPress Plugins

Akismet, of course.

That is about it. Pretty much lean and mean.

WordPress Theme (Webstractive)

Early stages of theme development

Future Work

Will update this post as needed, add in screenshots, document procedures, etc. yada, yada. As mentioned in my inaugural post, there is an undocumented ‘snafu’ with the is_home() and is_front() functions in the WP core – more on that later too.