Fixing Various Issues With The Sociable Plug-In For WordPress

I decided recently that I wanted to use a social bookmarking plug-in* on this blog. The choice came down to one of two: Add To Any or Sociable.

After a day of fiddling with both, I finally opted for Sociable. Both plug-ins are very good, and each has things it does better than the other. The reasons I decided on Sociable vs. Add To Any:

  • Add To Any uses a pop-up layer to display some top bookmarking sites, then an additional click to select all. Sociable allows you to select which bookmarking sites you want to display as 16×16-pixel icons. I figure it’s enough to show just the most popular, rather than virtually every bookmarking site.
  • Sociable requires less space to accomplish the same basic tasks.
  • Add To Any requires JavaScript to work; Sociable doesn’t require it for most functions.
  • Sociable looks prettier on my pages. The Add To Any icon didn’t fit well on my page; it does allow you to make your own icon, but I didn’t want to bother with that, especially when, again, Sociable’s icons all work on their own, right on the page.
  • Add To Any doesn’t easily allow you to rearrange icons or add / remove certain links / services; Sociable makes selecting the order of icons (and which to use) quite easy.

That said, Add To Any does have some strengths over Sociable:

  • Add To Any’s code is a bit cleaner; but again, we’ll soon discuss how to fix Sociable’s faults.
  • Sociable requires a knowledge of CSS to customize; Add To Any allows n00bs to easily change colors and certain display settings.
  • That Add To Any allows users to select virtually any bookmarking site, rather than a list the blogger determines, may be considered a strength by others.

So even though I opted for Sociable, I had to clean up some problems, such as display problems due to my theme; the alignment of the icons; and incomplete information for certain icons.

Issue 1: My Template Showed The Icons Twice

Sociable’s settings panel allows you to determine when the bookmarking icons should be displayed. However, no matter how I adjusted those settings, Sociable’s icons would appear on every page at least once; twice, if I had actually indicated the page should display the icons.

The reason for this was my theme. I am using Typo-XP 2; I still think it is one of the most attractive WordPress themes ever created, even though its parent version first came out two years ago.

TypoXP 2 was last updated in October, but WordPress has changed quite a bit in that time. Among those  changes is an all-new method of handling plug-ins; that is, “widgetization.”

Technically, widgets have been around since late March, 2006, but they didn’t become the standard presentation methodology for WordPress plug-ins until WordPress 2.2 came out, over a year later.

Previous to the full employment of widgets, if you wanted a plug-in to work, you generally had to add some code to your template pages, along the lines of this:

<?php if(function_exists('sociable_html')) { print sociable_html(); } ?>

And sure enough, that very line of code exists in several TypoXP 2 templates, namely archive.php (used to display older posts / category listings); page.php (used to display pages); single.php (used to display single posts) and index.php (used to display most everything).

The problem is that since WordPress 2.2, plug-ins have been able to automatically make themselves appear when and where they need to appear, thanks to widgets. But the old-school way of making plug-ins appear — slapping tags on your template pages — still works, too. So the template tags have to go.

Commenting out the relevant PHP line in each of the template files resolved the problem of the phantom Sociable line. To comment out the above line of PHP code, you add two forward slashes before the if() statement:

<?php //if(function_exists('sociable_html')) { print sociable_html(); } ?>

Issue 2: Right-Aligning The Icons

By default, Sociable aligns its bookmarking icons to the left. I decided I’d rather have them aligned from the right margin. To accomplish that, I had two options:

  1. Check off the option to use Sociable’s default CSS styles, and add my own styles to my theme’s style.css stylesheet / let Sociable’s elements inherit their CSS styles; or
  2. Hack up the sociable.css stylesheet, located in the plug-in directory, to align the icons right.

The latter option seemed most sensible. In my case, the very first line of sociable.css was the one I needed to change. It originally read:

div.sociable { margin: 16px 0; }

I just needed to add text-align: right; to the styles for that class:

div.sociable { margin: 16px 0; text-align: right; }

Issue 3: Incomplete Icon Information

I wanted to display the icons for DotNetKicks and DZone fairly prominently, since this blog is largely about development (OK, and pissing and moaning about Tony Kornheiser).

Unfortunately, when you mouse over the icons for those services, the alt / title tags for the icons display “description,” rather than the name of the service.

This is due to some code that needs to be cleaned up in the sociable.php script itself.

Sociable stores each bookmarking service in a two-dimensional array. The first dimension is an array of associative arrays, each of which is one of the bookmarking services available for display. The second dimension is an associative array that contains the icon file to be displayed; the URL to send to the page / post to the bookmarking site selected; and, optionally, a description tag that will be used as the alt / title tag value for the icon.

Unfortunately, the code on sociable.php is not as clean as it could be, and this is especially noticeable in the first few lines of the bookmarking sites array declaration:

$sociable_known_sites = Array(

	'BarraPunto' => Array(
		'favicon' => 'barrapunto.png',
		'url' => '<;story=PERMALINK',

	'blinkbits' => Array(
		'favicon' => 'blinkbits.png',
		'url' => ';source_url=PERMALINK&amp;title=TITLE&amp;body=TITLE',

Notice the commas at the end of the values for the url keys. Those extra commas add an index with a null key and null value to the end of each array. Although the code doesn’t seem to suffer from the presence of these nulls, ideally, the extraneous commas should be removed.

If we look at the entries for DotNetKicks and DZone, we see that each has an extra index, named description, with a value of description:

'DotNetKicks' => Array(
		'favicon' => 'dotnetkicks.png',
		'url' => ';title=TITLE',
		'description' => 'description',

	'DZone' => Array(
		'favicon' => 'dzone.png',
		'url' => ';title=TITLE',
		'description' => 'description',

(And these lines, too, include an extraneous null cell in the associative array.)

To resolve the problem, we simply clean up the code to remove the description key and value from the array:

	'DotNetKicks' => array(
		'favicon' => 'dotnetkicks.png',
		'url' => ';title=TITLE'

	'DZone' => array(
		'favicon' => 'dzone.png',
		'url' => ';title=TITLE'

Alternatively, I could have kept the description indexes, and simply changed their value to be whatever I wanted displayed.

Overall, Sociable is a pretty good plug-in; it certainly accomplishes my goals quite handily. However, I can understand why another developer decided he needed to make an alternate version, given what appears to be poor attention to detail from Sociable’s developers.

I considered that alternate version, but I am loath to take on code that doesn’t have at least a roadmap, if not a version history; Sociable at least has a history, and the developers respond to support requests about as well as unpaid labor can be expected to respond.

The tweaks I made were not onerous and have got the plug-in working pretty much the way I hoped it would. I’m very pleased and recommend it highly.

*: I know I’ve ranted against social networking sites. That’s because they’ve largely been taken over by children — or, at least, people who act like children — looking to hook up with other children. Social bookmarking is mostly used by adults — or at least, people who act like adults — who want to share knowledge or interesting things. So social networking, bad; social bookmarking, good.

One thought on “Fixing Various Issues With The Sociable Plug-In For WordPress

  1. Pingback: | The Web home of Doug Vanderweide » More Sociable Hacks: Adding MySpace And Yahoo! Buzz, Changing The Look

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>