jQuery is essentially a web designer’s dream. It’s a javascript library that makes it easy to write javascript code for web designers (at least that’s the way I see it). It’s built to be similar in structure to the way cascading stylesheets (CSS) are written. We here at iSynergy Webdesign use jQuery quite often to do many scripting events and effects.

What we’ll be doing today is setting an auto rotating CSS that swaps out after a certain amount of time. This effect can be used for a variety of things, such as changing the background along with some text styles.

See an example of the jQuery rotating CSS using setInterval.

Read the rest of this entry »

Once again, another post about the Sociable WordPress plug-in, which has, apparently, been taken over by a group called BlogPlay. This time, it’s about HTML Validation. If you use the sociable plugin, you’ll notice that it doesn’t validate if you use it on category post lists or any page that compiles a list of posts. This is because the link uses an id rather than a class to identify the link. Valid HTML does not allow duplicate ids. As such, having multiple sets of sociable links on a page invalidates the page. There’s an easy fix to this, which was already incorporated into the previous URL Shortening and Google Tracking modifications we did. However, I forgot to mention that part and how to do it. This post, hopefully, will rectify that oversight.

Using Sociable 3.5.1, if you look within the file, sociable.php, on line 777, note the following string of code:

$link .= ' id="'.esc_attr(strtolower(str_replace(" ", "", $sitename))).'" ';

Simply change the “id” to “class” and voila, it’s fixed. Your final code should look like this:

$link .= ' class="'.esc_attr(strtolower(str_replace(" ", "", $sitename))).'" ';

That should validate now and work just as it did before.

Note: If you modified the sociable.php, then the line number where the code appears may be different, simple do a search of the line of code to find where it is located.

That’s it. You’re done.

Back in August, we wrote a little tutorial on how to update the Sociable WordPress plugin by Joost de Valk to use a URL shortener and add Google Tracking. We’ve updated our download for the recent release of 3.5.1.

To download the latest package: sociable-bitly-mod-3.5.1

See the original post here: URL Shortening and Tracking in WordPress: Sociable Plug-in

The WordPress Multibox Plugin is another great plugin for WordPress. We don’t use it here on the official iSynergy Webdesign blog, but we do use it in a few other implementations for clients. It’s great because, unlike most lightbox effects, it works with things other than images. It can add overlay effects to videos, pdfs, and any other web-based content.

However, there’s a minor problem with the multibox.js script. It appears to break within Firefox when the overlay effect is placed on only 1 object on the page (which happens quite often in individual posts). It has to do with the playNextButton and playPreviousButton objects that show up in slideshow mode. When there’s only 1 object with the overlay effect, the two buttons become undefined and end up breaking the overlay script.

To fix this, we’ll have to modify the js file within the plugin. Depending on which mootools version you’re using for the plugin, go into the plugin folder and navigate to either mtv111 (for mootools 1.11) or mtv120 (for mootools 1.2) and open either the multibox.js (for mootools 1.11) or multibox-1.3.1.js(for mootools 1.2).

Read the rest of this entry »

The Sociable WordPress plug-in is a great extension and we use it here at the official iSynergy Webdesign blog, but it’s still missing a few key features.

Tracking

One key feature is the ability to track the data of how many shares are made through sociable. Using Google Analytics, it’s possible to set up event tracking as a means to keep tabs on the data.

To do this, go into the sociable plug-in folder and open the social.php file in a text editor. Go to line 703 or look for the following code (for 3.4.4):

$link .= " href=\"javascript:window.location='".urlencode($url)."';\" title=\"$description\">";

or the following (For 3.5.1 and 3.5.2):

$link .= " href=\"".$url."\" title=\"$description\">";

Add the following into the anchor tag:

 onclick=\"pageTracker._trackEvent('Sociable', 'Shared Link', '".$title."');\"

The code should look like this after (for 3.4.4):

$link .= " href=\"javascript:window.location='".urlencode($url)."';\" title=\"$description\" onclick=\"pageTracker._trackEvent('Sociable', 'Shared Link', '".$title."');\">";

Or like this (for 3.5.1 or 3.5.2):

$link .= " href=\"".$url."\" title=\"$description\" onclick=\"pageTracker._trackEvent('Sociable', 'Shared Link', '".$title."');\">";

And that’s it. As long as you have Google Analytics set up on the page already, it should start tracking events for sociable links.

Note: you can find event tracking in Google Analytics under: Content > Event Tracking

Read the rest of this entry »