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.

In this example, we’ll be rotating 3 CSS files (style1.css, style2.css, and style3.css). To start off, we’ll need to set our first CSS onload.

<link href="styles/style1.css" rel="stylesheet" id="stylesheet" />

For the above code, please note that I added an id attribute. This is important because this will be the anchor reference for what we’ll be doing in a little bit.

Now, within the header still, but after the call of the jQuery library script (see How jQuery Works), we’ll start our script.

var interval
$(document).ready(function() {
	var r = Math.floor(Math.random()*3+1);
	$("#stylesheet").attr({href : "styles/style"+r+".css"});
	interval = setInterval("getCSS()", 5000);// 5 secs between requests
});
var currentStyle = $("#stylesheet").attr("href");

First we want to set a variable for the interval via var interval. This will be used a little bit below to call the function to swap the CSS after a certain amount of time.

After that, we’ll want to set the ready event that waits for the document to load before executing the script:

$(document).ready(function() {

//

});

Within that, the next few lines are where the script truly begins. The first line sets a variable to randomize a number. The count used to randomize can be altered by changing the digit that is represented by 3 within our code. We are using 3 in this case because that’s how many stylesheets we have. Feel free to change that for your personal needs.

The next line references the stylesheet anchor (the id we set earlier) and changes the href attribute to our randomized stylesheet. This way, a different stylesheet can be loaded each time the page is loaded.

The last line within the ready event is our timer. It calls a function, getCSS, every 5 seconds (represented by 5000 milliseconds). The amount of time can be changed by altering the milliseconds. We’ve set it on a short timer so it’s easier to see the effect.

After we close the ready event, we want to store the current stylesheet in a variable, which is represented by the last line. This variable will be used later when we rotate the stylesheet.

Now, we’ll write out our getCSS function, which will do the actual stylesheet rotation.

function getCSS() {
	if (currentStyle == "styles/style1.css") {
		$("#stylesheet").attr({href : "styles/style2.css"});
		currentStyle = "styles/style2.css";
	} else if (currentStyle == "styles/style2.css") {
		currentStyle = $("#stylesheet").attr({href : "styles/style3.css"});
		currentStyle = "styles/style3.css";
	} else {
		currentStyle = $("#stylesheet").attr({href : "styles/style1.css"});
		currentStyle = "styles/style1.css";
	}
}

We’ve added in an if statement so that when we rotate the stylesheet, we won’t rotate in a new stylesheet that is the exact one as the current stylesheet (because then, no change will be visible). So we do a check to see what the currentStyle variable (which stores what the current stylesheet href attribute is) is at the moment. If it is style1.css, then we swap in style2.css. After that, we set the new currentStyle variable to style2.css. Rinse and repeat until we’re done setting all 3 instances. That’s it.

The final script should look like the following (nested within a script tag):

<script type="text/javascript">
var interval
$(document).ready(function() {
	var r = Math.floor(Math.random()*3+1);
	$("#stylesheet").attr({href : "styles/style"+r+".css"});
	interval = setInterval("getCSS()", 5000);// 5 secs between requests
});
var currentStyle = $("#stylesheet").attr("href");

function getCSS() {
	if (currentStyle == "styles/style1.css") {
		$("#stylesheet").attr({href : "styles/style2.css"});
		currentStyle = "styles/style2.css";
	} else if (currentStyle == "styles/style2.css") {
		currentStyle = $("#stylesheet").attr({href : "styles/style3.css"});
		currentStyle = "styles/style3.css";
	} else {
		currentStyle = $("#stylesheet").attr({href : "styles/style1.css"});
		currentStyle = "styles/style1.css";
	}
}
</script>

One caveat for IE that is not related to the above script, if you intend on setting a background that spans the entire browser and swapping that background using the above script, you’ll need to add a few lines to your CSS to make sure the swap gets the intended effects. Mainly:

html { height: 100%; overflow: auto; margin: 0 }

body { height: 100%; overflow: auto; margin: 0 }

IE doesn’t seem to understand the dimensions for html and body unless it’s explicitly declared. As such, when the CSS rotation occurs, the effect doesn’t translate to the entire body of the page and only to the parts that have dimensions declared. The above should fix that problem.

Download jQuery rotating CSS using setInterval (zip containing all example files from above).

No related posts.

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.

Related posts:

1. URL Shortening and Tracking in WordPress: Sociable Plug-in

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

Related posts:

1. URL Shortening and Tracking in WordPress: Sociable Plug-in
2. HTML Validation for Sociable WordPress Plug-In
3. Fixing WordPress Multibox Plugin

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).

For multibox.js, find line 95. For multibox-1.3.1.js, find line 97. Note the following lines of code:

if(this.options.slideshow) {
	this.playPreviousButton = new Element('div').addClass('MultiBoxPlayPrevious').injectInside(this.controls).addEvent('click', this.playprevious.bind(this));
	this.playNextButton = new Element('div').addClass('MultiBoxPlayNext').injectInside(this.controls).addEvent('click', this.playnext.bind(this));
}

Essentially, the playPreviousButton and playNextButton elements aren’t created unless the slideshow option is on. This is the culprit that causes the undefined that occurs later in the script.

Now to actually fix this problem, for multibox.js, find line 115, for multibox-1.3.1.js, find line 118. The lines correspond to the following code:

this.playNextButton.setStyle('display', 'none');
this.playPreviousButton.setStyle('display', 'none');

To fix the problem, we’ll just nest the above code within an if statement that is the same as the one used to create the elements to begin with. Our final bit of code should look like this:

if(this.options.slideshow) {
	this.playNextButton.setStyle('display', 'none');
	this.playPreviousButton.setStyle('display', 'none');
}

So essentially, if it’s not in slideshow mode, we won’t create the elements and we won’t call the elements later, either. That’s it.

No related posts.

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

URL Shortening

Another key feature is the ability to use a URL shortener other than awe.sm. The problem with awe.sm is that it’s in beta and it isn’t publicly open to everyone. You have to apply and hope to be accepted in order to use it. URL shorteners are essential to some of the sociable links, such as Twitter, which limit the amount of characters you can use in the share message. So how can we get a URL shortener to work other than using awe.sm?

Well, I’ve found and adapted a way to use a URL shortener by way of bit.ly. I’m basing this off a topic from here. Much the same as that post, it requires modifications to the sociable plug-in. Which essentially means that the con of this modification is that it won’t work if you update the sociable plug-in with another official release in the future. However, it may not be too difficult to get it working again after an update. Just a few copy and pasting here and there. Anyway, the following is how to get it done:

Go into the sociable plug-in folder and look for the sociable.php file. Open it and search for the following line of code:

$sociable_known_sites = Array(

Under that array is a list of all the social sites that sociable supports. From here, you can pick and choose any of the social sites and replace the url string with the following:

'url' => $sociablepluginpath.'bitly.php?url=PERMALINK&title=TITLE&blogname=BLOGNAME&socialsite=[SOCIAL SITE]',

Be sure to replace [SOCIAL SITE] with the name of the social site that is associated with the string.

Now, create a new file called bitly.php in the sociable plug-in folder and paste in the following:

$url = $_GET['url'];
$excerpt = $_GET['excerpt'];
$blogname = $_GET['blogname'];
$title = $_GET['title'];
$sociablesite = $_GET['socialsite'];

// Ondemand function to generate dynamic bit.ly urls
function getBitlyUrl($url) {
    // fill up this 2 lines below with your login and api key
    $bitlylogin = '[BITLY LOGIN]';
    $bitlyapikey= '[BITLY API KEY]';

    // you dont need to change below this line
    $bitlyurl = file_get_contents('http://api.bit.ly/shorten?version=2.0.1&longUrl='.$url.'&login='.$bitlylogin.'&apiKey='.$bitlyapikey);  

    $bitlycontent = json_decode($bitlyurl,true);

    $bitlyerror = $bitlycontent["errorCode"];

    if ($bitlyerror == 0){
        $bitlyurl = $bitlycontent["results"][$url]["shortUrl"];
    }
    else $bitlyurl = $url;

    return $bitlyurl;
}

Be sure to replace [BITLY LOGIN] and [BITLY API KEY] with the appropriate credentials (you can acquire them from bit.ly once you create an account).

Next, below the above code, add in the following:

if ($sociablesite == 'Twitthis') {
	header('Location: http://twitter.com/home?status='.$title.'%20-%20'.getBitlyUrl($url));
	exit;
} elseif ($sociablesite == 'Twitter') {
	header('Location: http://twitter.com/home?status='.$title.'%20-%20'.getBitlyUrl($url));
	exit;
}

Note the following code:

$sociablesite == 'Twitter'

The ‘Twitter’ and ‘Twitthis’ needs to be the same exact word/phrase as the word/phrase that was used to replace [SOCIAL SITE] within the sociable.php file.

If you want to do it for other supported sites, all you have to do is duplicate the elseif statement and replace the $sociablesite variable and the location with the matching url from the sociable.php array.

[UPDATED 02/18/2010]

You can download the completed files here:
3.5.2 – sociable-bitly-mod-3.5.2
3.5.1 – sociable-bitly-mod-3.5.1
3.4.4 – sociable-bitly-mod-3.4.4

The above set of files also includes the modifications from HTML Validation for Sociable WordPress Plug-In.

[END UPDATE]

It contains both the modified sociable.php file (including google tracking) and the completed bitly.php file. It’s also only set up for a few select sites (BarraPunto, email, Facebook, FriendFeed, Identi.ca, Ping.fm, Techmeme, and Twitthis/Twitter). Some of the social sites (Digg, StumbleUpon) don’t work with bit.ly or disallow the use of shortened URLs, so it may not be advisable to set up bit.ly for them. However, the bitly.php file contains all the sites, so, you can set it up to use bit.ly if you want. All you have to do is find the site you want in sociable.php and replace the url string with the modified url string from above.

Important Note: The provided bitly.php has a placeholder for the [BITLY LOGIN] and [BITLY API KEY]. You will need to enter your own credentials for this to work.

Related posts:

1. URL Shortening – Sociable Plug-In 3.5.1
2. HTML Validation for Sociable WordPress Plug-In

Creating a website can be a difficult but rewarding process for your business. It takes time, creativity, and dedication to push out that first website and once it’s done, you can just leave that part of the business behind you, moving onto other goals. Then again, nothing lasts forever.

Even if you design a website for your current goals and vision, it’s always difficult to anticipate the entire future growth and expansion of your business. As your business changes, you can make minor updates and keep the website fresh, but at a certain point, it may need a complete redesign. When is this point?

Some signs that show it’s time for a website redesign include:

Business Growth and/or Change

Businesses change over time. Maybe your business’ goals, visions, mission statement, products, services, and/or size have experienced a shift. As a result, your website should change in order to accommodate the differences within your business. The website should always be a reflection of the current state of your business and should be restructured if necessary to represent it.

Website Look and Feel

If your website hasn’t been updated in a decade, it’s highly possible that the look and feel of the website (as well as technologically) could be out of date. Aesthetics change over time. What may seem hip and modern 10 years ago probably isn’t the case anymore. Some signs of an outdated website include:

• The website is served up in frames (loaded in multiple individual panes within the browser) – Framed websites are not bookmark friendly nor are they search engine friendly.
• Depending on the website purpose, it uses a splash page with a “click to enter” link in order to get to the main website – In most instances, splash pages only hinder users from getting to the real content that they came to your site to see.
• It uses a tiled background that obscures the foreground text – If the text is important, it should be as clear and legible as possible.
• It contains a message that suggests that the website is “best viewed in [insert browser name]” – Most of the time when a message like this is displayed, it is because the website isn’t designed to be cross-browser compatible. Modern browsers still have some incompatibility issues, but modern website design can be made to work in all major browsers with little incompatibility problems.

The majority of the above are signs of an unprofessionally designed website. As such, your business could lose credibility if it appears outdated.

Your Own Thoughts

You should feel proud of your website. If you have to apologize to potential clients or users when interacting with them because you feel your site has out-of-date information, poor design, poor content, is hard to use, or any other reasons, it will reflect poorly on you and your business.

Search Engine Results

If your site is designed poorly, chances are, it won’t rank very well in search engine results. Some signs of a poorly designed site for search engine optimization include:

• The architecture of the site is convoluted and confusing. If you don’t know where to find the pages you are looking for, most likely, search engine spiders are having the same problem. Simplifying and designing a clear hierarchy of links and navigation would go a long way in alleviating this problem.
• Most of the text contents are images. If it’s textual content, it should be displayed as text in the HTML.
• Your site is in flash. Search engines have come a long way in being able to crawl through a flash website, but the jury is still out on how effective it is. To be on the safe side, important content should not be flash-based.

Sales, Leads, and Inquiries

A website should be an informational site for potential clients and users, but it should also be able to acquire sales, leads, and inquiries. A lot of older sites were designed almost as a brochure in a website format. These types of sites weren’t designed to draw in interactions from clients and users. Most likely, these sites lack some essentials, such as:

• Call-to-actions – Call-to-actions are buttons and links that guide a visitor to do something on your website, whether it is to buy an item, submit their contact information, or inquire about something.
• Newsletter, white papers, blogs, and other information – Newsletter sign-ups allow you to gather contact information from your clients and allow you to send them regular information on your updates. White papers, blogs, and other information pieces are just ways to improve your overall website content. Blogs also help to improve interactions on your website through the comments section and keeps content fresh.
• Contact forms – Contact forms make it easier for your users to contact you. No need to fire up their own e-mail client.

These are just some of the signs that hint at the need of a website redesign. The important thing is in identifying all of them before embarking on a website redesign project.

Related posts:

1. Search Engine Friendly Web Design – SMX West 2009

The 2009 BlogWorld & New Media Expo will take place at the Las Vegas Convention Center, beginning with the exclusive “Social Media Business Summit” conference on October 15th and continuing with the BlogWorld & New Media Expo and Conference October 16th-17th. This is first and only industry-wide tradeshow, conference, and media event dedicated to promoting the dynamic industry of new media including: Blogging, Podcasting, Social Media, Online Video, Music, TV, Radio, Gaming, Entertainment and Communities.

Sign up before July 1 to save, use TWEET20 as your coupon code for 20% off.

Related posts:

1. SMX Advanced 2009 – Seattle

Related posts:

1. SMX Advanced 2009 – Seattle
2. Blog World Expo – Las Vegas, NV – October 2009
3. ad:tech San Francisco 2009

Attend SMX Advanced for:

• Exceptional content so compelling, you’ll want to implement what you’ve learned before leaving the conference. Super-charged sessions on PPC, SEO, social media marketing and other hot button topics will help you flourish today, tomorrow and in the future.
• Invaluable connections made possible by the ultimate mix of structured networking opportunities and social events. Meet new contacts, reconnect with colleagues – SMX makes it easy to interact and exchange ideas with other industry thought leaders.
• Essential conveniences to help you juggle your every-day responsibilities while maximizing your conference time. Always available and free Wi-Fi; hot lunches, snacks and beverages all day; access to all presentations and tools to pre-plan your custom itinerary – SMX has got you covered.

Related posts:

1. Blog World Expo – Las Vegas, NV – October 2009

ad:tech is an interactive advertising and technology conference and exhibition.
Worldwide shows blend keynote speakers, topic driven panels and workshops to provide attendees with the tools and techniques they need to compete in a changing world.

To find more information about ad:tech, or to find more information about their conference, visit:
http://www.ad-tech.com/sf/adtech_san_francisco.aspx

Related posts:

1. Social Media in the Enterprise – San Francisco – June 2009
2. SMX Advanced 2009 – Seattle