I’ve been working with jQuery quite a lot over the past week to get the commentluv settings page up and running and get the new commentluv plugin working as promised. It always amazes me at how incredibly easy it is to get it to do cool things with a web page.

Not just Ajax things, simple effects that allow you to take a page from a digital piece of paper to a digital pop-up book! Click here for an example..

Look at me!

Send me back up

Example explained

(you should have the jQuery library loaded in the head of your document, my wordpress already does this but if yours doesn’t you’ll have to put a line like this in the head of your page)

step 1: create a hidden div with an id of “first” and put something in it.

<div id="first" style="border: 1px solid #000">
<img><p style="color:white">Look at me!</p>

You can set the style inline with the div or your could add something like this to your style sheet

#first { display: none; } 

Something to note, an ID= is used if it is the ONLY one, a class= is when you have more than one. If you’d used class=”first” on the div above and had an entry in your stylesheet like this

.first { display: none; } 

then every div or img or span you gave a class of “first” to would be initially invisible.

step 2: Now you need to trigger an event to slide the div down. That’s as simple as putting a html link with an onclick attr and use a built in jQuery effect.
onclick is an attribute you can put on html objects like ‘a href’ links or images or other parts of your page. You put the javascript or function you want running in the quotes and whenever that object is clicked, the javascript gets run.

<a href="#">Click here for an example..</a>

Here, the javascript we want to run is jQuery(‘#first’).slideDown(1000);

It’s this little bit that does the magic.

Sometimes people use $ instead of the word jQuery which will work in most cases but here on WordPress there is the prototype library too and that uses the $ symbol for it’s calls so to be safe and get it to work without clashing with other libraries we use jQuery.

We call jQuery and tell it what we are targeting in the brackets. Because we are using an ID, we use ‘#first’. Had we used a class then we would put ‘.first’ and then we attach the slideDown event with a speed of 1000 ms by putting .slideDown (notice the captial ‘D’) on the end of the target and a speed 1000 in the brackets.

step 3: slide it back up
You should be able to guess how this was done, instead of using slideDown, we used slideUp

<a href="#">Send me back up</a></h2>

That’s it, easy peasy!

You can find out all the commands available to jQuery here

Here is a widget and plugin combined for Stumbleupon and WordPress. I rewrote it from scratch to be a little better, thanks to the suggestion of mcangeli in the comments!

This will display a list of titled links to up to 10 of your last pages that you gave a thumbs up to with Stumbleupon, it can also show as icons for web page, image, flash file, quicktime. Use it as a widget or as a plugin.

Upload it and activate it to see a widget called ‘Stumbled’ in your tray, drag it to where you want it to be displayed on your blog and click the options square to add your Stumbleupon username, how many of your last thumbs up sites you want to display, choose to display as Text links or Icons. If you chose to display as text then you can put in the maximum amount of characters to show.

You can also use it as a plugin if you don’t like widgets, see below for code examples..

here’s what it looks like in the sidebar as icons..

here it is as text..

and the options….

Just download the zip file below and extract the folder, upload the whole folder to your plugins directory and activate it in WordPress, then, visit the widgets section under Presentation and drag it to the sidebar, click the square to change the options and that will be it!

For non-widget-ers, you can use it as a plugin by using this syntax..

stumbled_as_plugin(username,quantity to show,text or pic,html before list, html after list,max length of characters);

ie. for showing text links with a numbered order..

if(function_exists(stumbled_as_plugin)) {
stumbled_as_plugin("glytch",10,"text","<ol>","</ol>",33);
}

will show this…
<?php if(function_exists(stumbled_as_plugin)) {
stumbled_as_plugin(“glytch”,10,”text”,”

“,”

“,33);
}?>

Or as images with no numbering..

if(function_exists(stumbled_as_plugin)) {
stumbled_as_plugin("glytch",10,"pic","","",33);
}

will show this…

If you have any problems with it, please let me know!.

Download Stumbled Widget & Plugin For WordPress

I had my first SURGE of stumbleupon traffic and managed to capture the event on Camtasia!

I think I only got the tail end of it but it lasted for a nice while, it even came back the next day although at a reduced rate, stats and geekery below the video.

.

I’m guilty of giving some of my own posts a thumbs up now and then to start a trickle of Stumbleupon traffic to an article I have written or seen elsewhere such as the Hide a rar file in a jpeg. I saw it on a blog completely obliterated with adsense blocks so I decided to reprint it here in a cleaner-easier-to-read way. It got some traffic and upped my feed subscriber count but, the traffic wasn’t huge, just a few hits each hour, but still nice to have some new readers to my new blog

Then, I saw a small side article in a daily newspaper (yes, there is news available outside the internet!) about how Tussauds in London was due to show it’s first ever computer game character, it looked like a great story and I did a bit of research on Google for “Tussauds” ,”London” and “master chief”.

There were plenty of articles but none that mentioned London. Great!, there was one page that I found about Master Chief being in the Las Vegas version of Tussauds, it had some good information and some really great pics so I thought I would snag the pics, do some Photoshopping on it to give them a London edge and “make me an article” for here.

I was quite pleased with the Master chief is coming to London and gave it a thumbs up on my work browser and finished off for the day and went home content with writing a new article that didn’t suck and wasn’t a copy and paste of some content found elsewhere.

When I got back home, I went to my Live page (a plugin [link] that displays hits to your site in realtime) in my WordPress dashboard to see what was going on at FiddyP and I was amazed!, the video above is the tail end of what I saw.

These are the load times in the middle of the spike..

So, even with 141 at a time coming in, the server was still able to send the page in less than 5 seconds to most of the world.

I think the difference with this self stumble was that it was for a unique article and a few people gave it a thumbs up one after the other, I think that if you can get a few thumbs up as soon as the submitted page goes into circulation then you get a sort of exponential increase which could lead to another one and so on. As long as you keep getting thumbs up, the traffic will keep coming.

The hits started again the next day..

Some google stats..
One of the (many) good things about Google analytics is the way you can refine the stats so you can see all the individual stats for a particular referrer or page, here’s what was found just for the stumbleupon visitors

Not bad, average of 2 pages per visit means a lot of them took the time to see what else was on the site. 33% is a pretty good bounce rate for a social networking happening.

Encouragingly, nearly 90% of the people coming in were using Firefox. Sensible people use Stumbleupon

The vast majority of visitors had bigger than a 1024×768 screen, most had widescreens which surprised me, there must be a lot more widescreens out there than I thought.

I’ve seen a lot of advice about being a top Stumbler or increasing your ‘juice’ at places like StumbleGods that say you should add as many friends as you like and be a social junkie with comments and reviews of peoples profile pages. I think they’re right but for someone as busy as me, it’s hard to dedicate time to spend all my day trying to make contacts, the upside is, the contacts I do make are because they have recommended particularly good pages or I’ve ‘met’ them through this blog.

I was trying to think how I could repeat the event with a new post and spent a little while thinking what “they” want but, I don’t want to try and predict what people that come here will like, that’s not why I started this blog.

The best thing that I can do is, not worry about what Stumblers want and carry on making my blog for me for fun and writing about things that I find interesting without re-hashing stuff that’s already been done, if people like a post they will stumble it and if it’s good enough then sure as eggs is eggs, other people will and so on.

Overall, it was a good experience being bathed in hits for a short while. At least my server didn’t crash and it has given me some encouragement to carry on doing the things I like to do anyway and that’s plenty of geekery with a sprinkle of humour and a drop or two of nice pictures.

Thanks Stumbleupon! (and users) it was fun while it lasted!

Here’s a little plugin I made for Stumbleupon visitors, I got the idea while playing with the Digg This plugin.

Hello Stumbler plugin will display a note at the top of your post (or wherever you put the call) when it detects that the person viewing the page came through the Stumbleupon button and ask them to give you a thumbs up.

Simply download the plugin, upload it to your plugins directory and activate it. Once you have done that, go to your single post template page and add the following command under the entry-content line (click image to see example).

?php if (function_exists(hellostumbler)) { hellostumbler();}?>

It’s as simple as that! I have tried it by showing the link if this blog is the referring page and it works, hopefully it will do the same when the post is stumbled upon with the toolbar button (it’ll take me ages to stumble and stumble until this post shows to truly test it, but it should work!).

If you came here via a stumble button press, please let me know if you can see the “thanks for stumble-ing” message at the top of the post. thanks!

Download the plugin here Hello Stumbler

[edit]To see a tutorial on how I made this plugin, see here: wordpress plugin sourcecode tutorial