Egyptian blogger from Cairo.
Revolutionary Socialist.
Partner & Creative Director at ThePlanet.

Sharing Blog Posts With Sociable

It’s refreshing to see scores of blogs and micro-sites on the Internet that are using WordPress. Not only is it the clear leader when it comes to creating personal or professional blogs, but it has also stepped into the realm of CMS-driven websites, and is in many cases the best choice. The free, open-source web application prides itself in how powerful, yet simple, it is, and it can only become even more successful.

Suffice to say, with thousands of plugins available out there, it is not always ease to take full advantage of the features that are brought to you by the extensions developed by the WordPress community. Some users go overboard with numerous plugins that are not bringing added value, and are therefore inefficient. Meanwhile, others are missing out on the basics. When you’ve gone online with a blog, it is absolutely vital to attempt to attract the largest crowd possible, and there are various methods at hand. Besides some quality Search Engine Optimization, sitemap submissions, and permalinks (explained here), it is crucial to facilitate the way in which the website visitors can share your posts with friends and family.

Any user can simply copy the URL and past it in an IM chat or email. But let’s not kid ourselves: users of the Web are lazy, and that’s not going to change anytime soon. If it’s not sorted out in two clicks, at most, then no one will be bothered. For that reason, you’d be crazy to skip integrating a plugin that allows users to share your posts via social network websites and the likes. There are a handful of post-sharing plugins out there, the most prominent of which, is Sociable.

By installing and activating Sociable, you will have automatically placed a row of icons at the end of each post that makes the visitor a click away from publishing a link to your post from sites such as Twitter, Facebook, Technorati, Digg and many more. In fact, the complete list of websites available boasts over 60 options:

Sociable Options

Sociable Options

Using the settings page integrated into the WordPress administrative menu, you can configure which ones you would like to appear, and in what order. Moreover, you can opt to place your own icons, as oppose to the standard ones that ship with the plugin. It is as simple as creating a directory, placing the icons in the proper names (follow the standard set by the original icons pack), and enter the URL to the image folder via the settings page. With a wealth of options within reach on all corners of the internet, even if you are not willing to design your own icons, you can download any of the free packs available with an appropriate license.

As a result, any user who finds your post of interest, can easily choose his or her website/service of choice, and spread the word. The downside of the Sociable plugin is a bizarre problem, with a very easy fix.

XHTML Validation

A recent update to the plugin changed the classes associated with each icon displayed to an id. That is plain blasphemy as it means that on the main posts’ page, for example, a given id is repeated ten times (once with each post), which causes the XHTML validation to go out the window. You might’ve spent endless hours and sleepless nights on end to get your website to validate correctly, and with a simple plugin such as Sociable, all your efforts will have gone down the toilet. Interestingly, the plugin originally used classes, and then switched to ids, and then there have been two more updates since, but the plugin remained XHTML invalid!

Not to worry, though, the solution is very simple:

  1. From the WordPress control panel menu, click on “Plugins”
  2. Find the Sociable plugin, and click “edit” underneath
  3. Choose the file sociable.php, and scroll down to the following segment:
    /**
     * Start building the link, nofollow it to make sure Search engines don't follow it,
     * and optionally add target=_blank to open in a new window if that option is set in the
     * backend.
     */
     $link .= '<a rel="nofollow"';
     $link .= ' id="'.esc_attr(strtolower($sitename)).'"';
     if (get_option('sociable_usetargetblank')) {
     $link .= " target=\"_blank\"";
     }
     $link .= " href=\"javascript:window.location='".urlencode($url)."';\" title=\"$description\">";
    

    And replace the “id” with “class” as such:

    /**
     * Start building the link, nofollow it to make sure Search engines don't follow it,
     * and optionally add target=_blank to open in a new window if that option is set in the
     * backend.
     */
     $link .= '<a rel="nofollow"';
     $link .= ' class="'.esc_attr(strtolower($sitename)).'"';
     if (get_option('sociable_usetargetblank')) {
     $link .= " target=\"_blank\"";
     }
     $link .= " href=\"javascript:window.location='".urlencode($url)."';\" title=\"$description\">";
    
  4. From the settings page, uncheck the “use Sociable stylesheet” and use your own classes to make the icons look the way you want. Or you can simply dig into the sociable.css file and change the “#” of the links’ names to “.” in order to turn them into classes and not ids. However, it is recommended to add the CSS classes to the stylesheet you are already using in order to assure that the icons integrates seamlessly into your design

Remember that after a plugin update, if the author has not fixed the problem himself, you would needt to make the change again. Even though it might seem like a bit of a hassle, the “fix” is done in a couple of minutes, and is well worth the effort. Providing users with the ability to share your posts is an absolute must, and Sociable is by far one of the best plugins to do so.

Related posts

Leave a reply