I’m working furiously behind the scenes at CommentLuv and haven’t been able to squeeze in any time for Fiddyp.
For good reason though, I am working with another blog owner to produce a free email course called Blog From Scratch which, unlike other “how to blog” tutorials and series, will show you exactly what you need to know from the beginning of creating a blog to the methods used to promote it, populate it and of course, monetize it!

The first part is up and ready and the rest is being edited by me and will be up as soon as possible.

There will be an extra oomph to the whole thing though, that’s where it will get interesting! For now, know that it will offer something that no other site can give you and will be a significant benefit to you and your own readers. I’m not ready to say what it is yet but I honestly think it could be massive for the commentluv site!!

Have to go now and get the rest of the lessons online..

This is part 5 of the AJAX Tutorial Series.
You can see the other Beginners AJAX Tutorials here.

• Part 1 – An introduction to AJAX
• Part 2 – Hello world!
• Part 3 – The Object of my desire
• Part 4 – Are you ready?

Hurrah! this tutorial will actually download some data (yey!) We will use everything we have learned so far and add just a little bit that will allow us to download data from the server and put it somewhere on the page without a refresh. (I know, you must have goosebumps!)

XMLHttpRequestObject.send(null);

We need this command to initiate the object send. We created an object, created a place for the data to go, we created a routine to wait patiently for the object to be ready and sent the object to the data source using the above command. The patient routine for the waiting will take the response to the data source and put it in the div we created in the HTML of the page.

We can replace the bit from the last bit of complete code (on part 4) with this command and instead of it saying it’s ready to download, it will actually do the fetching for the obj.innerHTML=XMLHttpRequestObject.responseText; which is called when the readyState and Status are ok.

[HTML]

var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open(“GET”, dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML=XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}

Fetching data with Ajax

[/HTML]

I’ll try and make this code easier to understand with a picture using pretty colours!

The blue bit gets called when the user clicks the button, if the object was successfully created then create a routine that ‘listens’ to the objects readyState and status. Then the XMLHttpRequestObject.send(null); command does the action and when that goes ahead and activates XMLHttpRequestObject.open(“GET”, dataSource); which goes off and gets the data pointed to by dataSource which of course changes the objects status and readyState. When it is at what we want, we inject the responseText to the div pointed to by divID.

Simple! :-/

You can see it in action here

Exciting huh? LOL . It’ll display anything that is in the oranges.txt file, not much use yet but at least we know we can fetch data!

What if, instead of displaying the contents of a text file, we used a php script to ‘echo’ out something?.. replace oranges.txt with this code..

[PHP]
echo “these are some oranges created by php!”;
echo “
ooooooooooooooooooooooooooooooooo”;
?>
[/PHP]

(don’t forget to enclose any php script with <?php and ?> or it wont work – I cant put them in here otherwise it will run the script instead of showing the code. Also, change the onclick event in the html to call oranges.php (if you saved the php with that name) instead of oranges.txt

You can see that in action here

There may be a pause between you clicking and the message being displayed. We can let the user know that something is happening by adding another if condition to look for a readyState of 1 (loading) and displaying the message “off to get oranges…” like this..

if (XMLHttpRequestObject.readyState == 1)
{
	obj.innerHTML="off to get oranges...";
}

we just chuck that into the anonymous function that is called when the readyState changes…

XMLHttpRequestObject.onreadystatechange = function()
          {
            if (XMLHttpRequestObject.readyState == 4 &&
              XMLHttpRequestObject.status == 200) {
		obj.innerHTML=XMLHttpRequestObject.responseText;

            }
	    if (XMLHttpRequestObject.readyState == 1)
	    {
	 	obj.innerHTML="off to get oranges...";
	    }
          }

See that in action here

You can download all the files used in this tutorial here.

Now we’re getting somewhere! But, what if we want to send data to the php file so it can do something more than print a hardcoded message?
Actually, it’s quite easy! come back next week to see the final part where we’ll send something to the php file and have it send back something it made with what we sent. (it could be a username or contents of a text field – think form validation!)

You can subscribe to my feed with the button at the top right of this blog or add your email to the box on the sidebar of the main page to subscribe by email. I hope you can come back and learn a bit more, enough at least to make your own php script and AJAX page….

It’s a pain in the arse when someone copies your content, especially when they hotlink your images so your bandwidth gets used instead of their own so here’s a neat way of adding to your .htaccess file so you prevent particular blog networks from displaying images from your hosting by hotlinking them.
Use this code:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?myspace\.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?blogspot\.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?livejournal\.com/ [NC]
RewriteRule .*\.(jpe?g|jpg|gif|bmp|png)$ http://www.commentluv.com/images/antihotlink.jpg [L]
</IfModule>

Just open up your .htaccess file (found in the root of your web space) and add the above lines. That should prevent blogs from myspace,blogspot and livejournal from hotlinking your images. You can add the url of a blog you know is hotlinking your images by following the format of the other RewriteCond statements.

Change the image url for the RewriteRule to one you have hosted somewhere (not on the same hosting because that will get redirected in a loop every time it is linked to).

It works pretty well, look at this screen shot of a self confessed content copier….

There a couple of my posts on that blog and they are littered with images telling the (probably non existent) readers to come and read the article here instead. Another reason to always have an image in my articles!

It’s a shame there isn’t a way to do that with content though! If you are having trouble with spam blogs scraping your content and images, you can read a fantastic article here on what to do when someone steals your content by Lorelle who has a treasure trove of WordPress and blogging information. Well worth a look!

This is part 4 of the AJAX Tutorial Series.
You can see the other Beginners AJAX Tutorials here.

• Part 1 – An introduction to AJAX
• Part 2 – Hello world!
• Part 3 – The Object of my desire

In this part of the tutorial series we will get ready to rumble! download data using the object we created in the last part…

onreadystatechange

What the hell is that? lol, it’s not move states when you’re ready.. it’s what we use on the object we created to see what state it is in, the different states are:

• 0 – Uninitialized
• 1 – Loading
• 2 – Loaded
• 3 – Interactive
• 4 – Complete

We can check for an objects state to see where it’s at to decide if we can output the result or not, we can combine this with a test for the HTTP status of a download to see if it was successful, we can check for a value of 200 which means everything went ok. (a value of 404 would mean file not found just like normal HTTP status codes).

To use the readystate property, just bang it on the end of the object name and put that in an ‘if’ statement. Ie…

if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{do something}

(the && means AND, so we check the readystate AND the status, if they are BOTH correct then execute the code in the curly brackets)

To put that in the code of the last tutorial, replace the bit that outputs the message about the oranges box being collected with an anonymous function that is attached to the objects readystate. It’s not named an anonymous function because it has a secret identity, it is just a nice way of running a function with no name when a certain thing happens like the objects’ readystate being changed.

For example, if we put
XMLHttpReqestObject.onreadystatechange = function()
{
do something
}


We have attached the onreadystatechange to the object we created, as soon as that objects readystate has altered, the anonymous function takes action and executes the commands contained in the curly brackets ({do something }).

That’s exactly where we put the test to see what the HTTP status and readystate number is. Ie.

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{
data downloaded, do something with it...
}
}

You may have noticed little graphics that are synonymous with web 2.0 and AJAX ( ). You can add one of those to let the user see something is happening. In the code above, you can check for a readyState of 1 (loading) and add some text like this:

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 1)
{
obj.innerHtml="Loading...";
}

if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{
data downloaded, do something with it...
}
}

The FiddyP amazing analogy:
Last time we had created a box for the oranges that we want from the AJAX shop
XMLHttpRequestObject = new XMLHttpRequest();
then we opened it and sent it to the AJAX shop with a label of what we want.
XMLHttpRequestObject.open("GET", dataSource);
And we wait for the signal that the box we sent was filled ok and ready to go
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)

Your whole code will now look like this…

    <title>FiddyP AJAX Tutorial Series Part 4</title>

      var XMLHttpRequestObject = false;
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
      function getData(dataSource, divID)
      {
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID);
          XMLHttpRequestObject.open("GET", dataSource);

          XMLHttpRequestObject.onreadystatechange = function()
          {
            if (XMLHttpRequestObject.readyState == 4 &amp;&amp;
              XMLHttpRequestObject.status == 200) {
            }
          }
	   obj.innerHTML = "Ready to download";

        }
      }

    <h1>Fetching data with Ajax</h1>
    <form>

    </form>
    <div id="targetDiv">
      <p>The fetched data will go here.</p>
    </div>

OK, so you have your box at the AJAX shop full of oranges.txt, next tutorial we’ll do something with the oranges…

If you’ve been following the other tutorials then the code above shouldn’t be so hard to understand (shyeah right!), it’s just a bit more added to what we’ve already covered. You can copy the code from above and try it out yourself or you can click here to see it in action (hold on to your hat )

We’re still in the AJAX starting blocks waiting for the bang to start us on the AJAX runway but don’t despair, next tutorial we will actually download data from a server and display it on the page without a reload which is what AJAX is all about. Once we can actually display the data, we can start doing things with it and then we can start to make pretty little scripts that do amazing things like count the amount of times a pink box has been clicked. hehehe, we’ll do more than that I promise!

This is part 3 of the AJAX Tutorial Series.
You can see the other Beginners AJAX Tutorials here.

• Part 1 – An introduction to AJAX
• Part 2 – Hello world!

In this part of the tutorial series we will open the object that you created in the last tutorial. So far, we have created an object to handle the data and made sure it is created in whatever browser you are using. Now, if we want to work with the created object, we need to open it…

Open The XMLHttpRequest Object

Opening the object prepares it for use to fetch the data from a server, the act of opening the object doesn’t actually fetch any data yet.

The FiddyP amazing analogy :- Imagine you created a page to collect a box of oranges from the local AJAX fruit shop. In the last tutorial, you created the box (object), now you need to open it so the AJAX oranges can fit inside…

The open comand: [square brackets] = optional arguments.

open("method", "url" [, asyncFlag[, "username"[, "password"]]])

Explanation:

• method is the HTTP method to use when opening the connection. It can be ‘GET’, ‘POST’, ‘PUT’ or ‘HEAD’
• url is the URL you want to download from
• asyncFlag is a Boolean (one or the other) value used to indicate that the call is asynchronous. (no waiting for it to finish)
  This defaults to TRUE or 1 so is not needed unless you want to specify that the page waits for completion.
• username is if you need a username to access the page identified by URL
• password is for a password if it’s required.

Make sense? lol, maybe not. Here’s how it looks in use:

XMLHttpRequestObject.open("GET","oranges.txt");

We just add the open bit of code on to the end of the name of the object we created. Here’s an example page where we create a form in HTML and add a button for the user to click to open a remote file on the server with AJAX. Because AJAX uses CSS to change elements of the page, we need to create a <div> on the page to show the data we retrieve from the remote file. We’ll also have to create a function to take action when the button is clicked (we can’t do it the normal way with the <form> action because that would cause the page to reload).

Here’s the form and div html:

<form>

</form>

<div id="targetDiv">
  <p>The oranges box will go here.</p>
</div> 

You can see that the button has an ‘onclick’ event. That’s the javascript bit that calls the function when the button is clicked. The <div> has an id so the function will know where to put the collected data.

The javascript function is held in the <head> part of the document;

function getData(dataSource, divID)
      {
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID);
          XMLHttpRequestObject.open("GET", dataSource);

          obj.innerHTML="Oranges Box Opened!";
        }
      }

The function is called with the name of the data file we want (dataSource) and where to put the output (divID)
The first line checks if the XMLHttpRequestObject was created (we did that last time so you know it should get to this point)
If it finds that the object was created, it moves on to set the variable obj to the <div> we created by using getElementByID
Next, we use the open command on the object we created earlier, set the option to GET and point it to the external data file we specified when calling the function.
Once that is done, we can output a message to the <div> we assigned to the variable obj by using .innerHTML=

We’ll just put this function in place of the “hello world” message that we put in the last tutorial..

The whole code looks like this…

    <title>FiddyP AJAX tutorial, open the object</title>

      var XMLHttpRequestObject = false;
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }

      function getData(dataSource, divID)
      {
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID);
          XMLHttpRequestObject.open("GET", dataSource);
          obj.innerHTML="Oranges Box Opened!";
        }
      }

    <h1>Fetching data with Ajax</h1>
    <form>

    </form>
    <div id="targetDiv">
      <p>The Oranges box will go here.</p>
    </div>

You can copy the contents of the HTML shown above and save it as a HTML file, you can also create a file called oranges.txt and put it in the same directory as the HTML file. (it doesn’t matter what is in the text file as we wont be doing anything with it other than to open it). Open the HTML file in your browser and try it yourself or click here to see it in action if you can’t wait.

That’s it for this week, we’re still not doing anything major yet but, be happy! we have so far, created an object and opened it. YEY! come back for part 4 where we will prepare to download information from the file we opened. (oh, I bet you can’t wait!!)

beep beep w00t!

This is part 2 of the AJAX Tutorial Series. You can see the Beginners AJAX Tutorial Part 1 here.

In this part, we will start you off with some very simple code just to show you how things get started. At the end of this tutorial you will have made your own ‘hello world’ AJAX script… (not a big deal I know, but you have to start somewhere!). I’ll keep these tutorials bitesize and introduce a new command or concept on each tutorial to add to what has already been covered. Today, we start at the beginning with something that will be in all future scripts…

The XMLHttpRequest Object

The what?
The XMLHttpRequest object is at the heart of AJAX. It allows you to send and receive data with javascript without refreshing the page and works on all browsers (except, you guessed it! Internet Explorer). All you have to do is find out if the browser supports it with an ‘if’ statement in the javascript contained in the <head> part of the html page and then create a XMLHttpRequest object using the ‘new’ command;

if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();}

That would create a XMLHttpRequest object and store it in XMLHttpRequestObject.

But, what about Internet Explorer?.. We can’t use XMLHttpRequest so we have to use an ActiveXObject. For us to do anything with an XMLHttpRequest and make sure it works on both IE and Firefox, we can add this to the javascript so we now have..

if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }

OK, that should cover us for making a XMLHttpRequest object, we can’t do anything in this tutorial series without it so to be sure, lets just create the whole html document and test to see if it can make an object by adding another ‘if’ statement to output some text to the screen if the object creation was successful using the javascript command ‘document.write()’.

    <title>FiddyP Ajax Tutorial Part 2 - Test object creation</title>

      var XMLHttpRequestObject = false;

      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }

      if (XMLHttpRequestObject) {
        document.write("<h1>Hello World! I Created an Object!</h1>");
      }

You can click on the title of the code snippet above and see the plain text version, just copy this to your own file and save it as an HTML document or right click here and save it and test it. If it’s working, it will display the message “hello world! I created an object!” in big letters.

YEY! we created a ‘hello world’ AJAX program!, I know it’s not much use yet but this is the foundation for all future tutorials so even thought it’s not that ‘sexy’ , it IS important to make sure we can create the object that will handle the data being sent to and received from a remote file.

We can get into the sexy ins and outs of using this on the next tutorial. Please come back again to see how we can use this to open a remote file and display it’s contents on a HTML page without a reload…(ooh, I can’t wait….)

This is the first in a series of tutorials about AJAX and how to use it on your site. Each new tutorial will take the subject a little bit further and hopefully, it wont be long before you start creating your own AJAX applications for your own site and revel in the wonderness of geekdom

It seems more and more people want to use this type of programming method to bling their blog up to 2.0 level including me!, so come along as I traverse the wonders of AJAX. I am learning this as I go so it’s not really fair to call it a tutorial series but you get the idea!

First off, we need to know what AJAX is…

Part 1.
AJAX Introduction.

The first thing to know about AJAX is that in fact, it isn’t actually a programming language. It’s just a way of using other languages together to create an ‘application’ style of interface for a web page.

The word ‘AJAX’ comes from a contraction of ‘Asynchronous’, ‘Javascript’, ‘And’, ‘XML’, it’s purpose is to allow a web page to send and receive small bits of data ‘asynchronously’ while the user is still on the page and change the contents of parts of the page with the data received.

It could be something simple like automatically updating a shipping charge after a customer enters their postal code in a form or it could be something more familiar like the Google auto-guess/complete that happens when you start typing in a search term.

As soon as you start typing something in the search box, the javascript on the page detects each key press and sends it to the server which then sends back any terms that have the same letters starting the term, as you continue to type it shows a narrowing set of options and how many results they each have. You can try it out yourself at http://labs.google.com/suggest

Here are some other examples of sites using AJAX.

• Google Maps
• Flickr
• Meebo

The important thing to remember is that AJAX is the term used when the page needs to send and/or receive data to the server asynchronously, whereas a sliding DIV or a dynamic menu is just Javascript or DHTML.

The difference between normal and AJAX web applications

A traditional web application(using a shopping cart form example)

.. a user enters their shipping details and clicks submit, the page sends the form details and reloads again showing the shipping charge.

AJAX web application

.. a user enters their postal code and the server automatically calculates the shipping charge and returns it to the original page, all without the user having to wait for another page load. Much more efficient!

How does it do it?

It’s the work of the devil! that’s how!
Seriously though, javascript, css and html are used on the browser side and a scripting language is used on the server. The scripting language can be PHP, perl, asp or any kind of get-process-return language that runs on a server.

Really, javascript is the boss for all the actions as it is responsible for orchestrating everything on the client side. ie:
The javascript detects the click, text entry or other action which initiates a call to the script on the server which responds with the data requested, the javascript receives the data and by using css and html it is able to update the page, all without the user having to wait for a page load as with traditional web pages.

Take a look at this diagram:

1. The javascript detects an event and requests information from the server
2. The server accepts the request, processes it and returns it’s own data
3. The javascript accepts the data and uses CSS and HTML to put it on the page

Data types

Probably the best data type used is XML, simply because it is a standard capable of representing complex data that would otherwise be difficult to represent. But, that doesn’t mean that XML is the only type of data that can be used. You could use plain text if there was only a small amount of simple data to be sent like a name or value.

You could also use something called JSON (JavaScript Object Notation) but that’s for a later tutorial (and for geekier types!)

The Server role

It’s important to remember that AJAX is entirely dependent on a server program accepting requests and responding to them in some way. You can’t just make a web page with some Javascript on it and have an AJAX application, you need the javascript to send and receive information and do something with it.

You don’t have to use the same server as the web page to do the processing, you could just as easily use a script on a remote server.
Places like Google, Flickr and others allow people to use an API (Application Programming Interface) to request information from one of their scripts on their server. Flickr for example could send back information listing a users photo locations so the AJAX page could display them.

Simply, whatever the server or javascript does, it all comes down to ; request send, request received, data processed, data sent back, data used.

On the next part of this series, we will get into the guts of an AJAX application and show you just how it works and how you can change it yourself. For now, here is an example of what you should be able to do after a couple more tutorials..

It detects a click on the pink area and sends a request to a PHP script that reads a text file containing a number, adds one to it, saves it and sends back the number to be displayed on the page. Try it yourself, it may take a couple of seconds to show the number (this is just an example, later we will add a nice AJAX’y type of wait animation). I wonder how high this number will/can go?

Come back next week for the second part of the series where we will get into the innards of AJAX and show you just whats needed to make the traditional ‘hello world’ program….

Here’s a great way to add a shopping cart to your WordPress blog so you can sell products directly from your site without the user having to go to an external site. If you offer products for sale on your blog, it’s much nicer for your customers to stay on the same site that they see the products on.

This plugin is simple and powerful, it uses AJAX for some parts of it and it seems to work just dandily on the blog I have installed it on. Here’s how you do it…

[expert instructions]
Download plugin, upload to plugins directory, activate it.
Visit the ecommerce tab and set options for country and currency, edit categories, edit checkout options, edit gateway options, add products.
sell!
[/ expert instructions]

[Hand hold instructions]
First, get yourself a copy of the WP Shopping Cart plugin and upload it to your plugins directory, go to you plugins page and activate it :

You should see a new tab at the top of the dashboard labeled ‘ecommerce’ . Click that and we can set up the options for our country and tax rate. Just select your country from the pull down box and it should set the tax rate for you.

You can also require someone to be registered before they can purchase products. This is up to you, for now, you can leave it as ‘no’. The only problem with requiring a user to register first is the non-immediate way in which WordPress allocates a password to a user by emailing it to them. Also, once someone logs in to your site, they get presented with the dashboard and not the site but there’s a great plugin to use to beat that here.

Leave the URL settins for now, they’ll work just find and dandy as they are (they may look different on your setup if you have a different permalink structure)

Choose your language and keep the theme as default:

Next, you need to choose your cart location. I use the setting as a widget because this blog is widget enabled. You can choose to add it manually yourself by inserting the code to anywhere on your sidebar if widgets aren’t your thing.

Choose which options you want and be sure to choose the correct currency setting for your country:

The next section asks you if you want to charge shipping, if you are selling physical products then you need to choose ‘yes’ and set the base shipping charges. (base charges are standard and only added once regardless of how many products are added to the cart, you can add additional delivery charges on the product settings) :

Click ‘submit’ and that’s one page done!

The next option is stock control, if you are selling physical products then you can tick the box for ‘limited items’ and it will give you a field for putting how many items of this you have, once you run out the software wont show this product any more until you get more stock and edit the amount here.

Variation control is a way to add options to a product, like size for a t-shirt or a colour choice which will be selectable on the product description page before a customer adds the product to the shopping cart.

Additional shipping costs can be added so that each item that is added to the cart will also add that amount to the shipping (good for heavy items)

Product images are self explanatory and always a good idea to use a decent picture for your product, the plugin does a good job of creating a thumbnail and uses AJAX to display the full size image when a customer clicks it. (choose your thumbnail size or upload a seperate thumbnail if you want)

Product download is for digital items.

Click ‘add product’ to save your product settings:

If you don’t want tax added to each item or it is already included in the price then select the option to ‘do not include tax’.

wp_list_pages('exclude=4,5,6' ); 

Once ‘checkout’ is pressed, the customer is presented with the screen to add their address details:

Once that is filled in, they click ‘make purchase’ and will be sent to the paypal login page where they can use their paypal account or pay by credit card if they don’t have an account already:

You will be able to see a record of what purchases have been made on the first tab of the ‘ecommerce’ section:

Wow! what a busy week I have just had, I have barely been able to keep up with comments here and I’ve sorely neglected my blogging brethren by not popping in for a cup of tea, sorry about that everyone but I’ve been busy with some commercial projects for work which turned out to be great fun!

I have been working on some ecommerce sites and CMS scripts to get a ‘proof of concept’ site up for a client and it went really well, one of the proofs turned out so well that I think it may become the one that we use! (that’ll save some time when it comes to launch day!)

Part of the ecommerce research I did to see what would work led me to trying lots of different things, one of them being a simple wordpress theme with an added shopping cart which turned out to be a very simple and cheap solution. It worked really well and was up and running in a couple of hours so that got me thinking about writing a series of posts later explaining how to sell products direct from your blog with the minimum amount of fuss.

I also bought a book about AJAX called “The AJAX construction kit”. I bought it after browsing through it’s pages in the local book shop, a nice place where you can sit down and read through any of the books on display before you buy…. or do as I do and use the free wifi provided to get my PDA online and type in the ISBN number on Amazon and then order it for 1/3 of the price of the shop! (teehee)

So far it’s been a great read and I particularly like the way it teaches you how to do things with the construction kit rather than try and teach you every single nut and bolt of Javascript and PHP. It’s a much better way to learn how to get AJAX scripts running on your site and I can see some very useful plugins coming this way when I’ve finished the book. In fact, a way to get me to read more will be to share what I learn with a series of AJAX tutorials here!

I am also considering getting a professional redesign done for here, I think a few hundred dollars will get me a fine looking site. I’m not even sure what I want yet and I had to abandon my idea of doing it all myself since the new work projects came in. Anyone out there use a professional designer and could recommend them?

I had a truckload of hits come to this site last night for my Hello Stumbler plugin, so I thought I would share with you how to make a plugin so you can publish it, stumble it, digg it and bask in your coding glory as it generates hits to your site!

If you’re interested in making your own plugins you should read a book called Professional WordPress Plugin Development to learn how to do it yourself

I’ll use my Hello Stumbler plugin as a guide…(now re-done so you can see the code all proper like)

here’s the whole code

/*
Plugin Name: Hello Stumbler
Version: 1.1
Plugin URI: http://www.fiddyp.co.uk/2007/09/06/hello-stumbler-wordpress-plugin-for-stumbleupon-visitors/
Author: Andy Bailey
Author URI: http://www.fiddyp.co.uk
Description: Adds a message to request a thumbs up if post is seen via Stumbleupon. Just place hellostumbler(); in your single post template
*/

function hellostumbler(){
	global $id;
	$refer=$_SERVER['HTTP_REFERER'];
	$title=the_title('','',false);
	if ($refer=="http://www.stumbleupon.com/refer.php" && is_single()) {
		echo "<strong> Thanks for Stumble-ing here!<br />Please give me a <a><img>thumbs up!</a></strong>";
	}
}
?&gt;

Step 1:
Add the comments to the top of your php file so WordPress knows it’s a plugin..

/*
Plugin Name: Hello Stumbler
Version: 1.0
Plugin URI: http://www.fiddyp.co.uk/2007/09/06/hello-stumbler-wordpress-plugin-for-stumbleupon-visitors/
Author: Andy Bailey
Author URI: http://www.fiddyp.co.uk
Description: Adds a message to request a thumbs up if post is seen via Stumbleupon. Just place hellostumbler(); in your single post template
*/

The plugin URL is important, don’t be tempted to just put a link to the root of your site or blog, it’s really annoying when a plugin misbehaves and you click on the plugin name within wordpress only to be sent to a site where you can’t find the reference to the actual plugin.

With mine, I make the post about the plugin and then go back to the source code and add the permalink, zip, upload and finally edit the post with the link to the download.

Step 2: Call the function a unique name

function hellostumbler() {

Make sure your plugin has a unique name or it will misbehave if it’s used on a blog that has a duplicate named plugin.

Step 3: Add the code that does the magic..

global $id;
	$refer=$_SERVER['HTTP_REFERER'];
	$title=the_title('','',false);
	if ($refer=="http://www.stumbleupon.com/refer.php" && is_single()) {
		echo "<strong> Thanks for Stumble-ing here!<br />Please give me a <a><img>thumbs up!</a></strong>";
	}
}
?&gt;

This is a simple little bit of code, lets analyze it line by line…

$refer=$_SERVER['HTTP_REFERER'];

all this does is find out what page the surfer came from and store it in the string $refer

global $id;

this assigns the variable $id as a global so you can use the value it has been given by the WordPress code

$title=the_title('','',false);

this assigns the title of the post to the variable $title by using the internal function of WordPress, whatever is between the ” , ” is what gets put before and after the title of the post, the false bit means return the title instead of printing it out on the blog.

if ($refer=="http://www.stumbleupon.com/refer.php" && is_single()) {

a conditional check, if the value in $refer is the same as the one given (in this case the referring page of Stumbleupon) AND the post is a single post page (It’s better to Stumble a post on it’s own rather than when it’s on the front page). If BOTH cases are true, do whatever is in the ‘{‘ curly brackets

echo "<strong> Thanks for Stumble-ing here!<br />Please give me a <a><img>thumbs up!</a></strong>";

echo means output to the page, putting html in the quotes writes html direct to the page. Then it’s a simple case of formatting the HTML so it works with the variables declared earlier. I’ll break this line down piece by piece..

• echo "Thanks for Stumble-ing here! Please give me a 

  Just output some text for the surfer to see

• this is put into the source code so search engines and viewers of source can see where the next link comes from. Grabbed this from the Digg This plugin.

• <a href='http://www.stumbleupon.com/submit?url=".get_permalink($id)."&amp;title=$title'>

  At the end of ?url= I close the echo quotes and use a dot (.) operator to add on the next bit that php sees, the get_permalink($id) just gets the link to the current post (it’s why we needed to have $id as global, WordPress has already declared what $id is) then we dot (.) a bit more echo output on to the end of that for the title name $title and close the html quotes with a single quote, and close the html a href bit with a >

• <img>thumbs up!</a>";

  echo out html code for displaying the SU icon, close the img HTML and put what text to display as link and then close the html. Finally, close the echo quotes and add a semicolon (;) to tell php we have finsihed the command (echo).

• }
  }
  ?>

  close the “if” check, close the function and finally end the PHP

Once you’ve done all that, upload the plugin to your wp-content/plugins/ directory and activate it, if all goes well, you should be able to add the output to anywhere on your page by calling the function name with

 if (function_exists(hellostumbler)){hellostumbler();}

inserted into your template code.

This is what it looks like in action…

So, now there’s no reason why you can’t make a simple plugin to show a link to your facebook profile or add some code to show a Youtube video.

good luck, you’ll see that once you’ve made one plugin, you’ll want to make more and more!

You can download all the source code here : hello stumbler plugin

• Teach Yourself VISUALLY WordPress
• List Price: $29.99
• Price: $17.91
• Read Reviews