Add some javascript files to your skin directory

1. First step, download the cufón js file from the Cufón site.
2. Generate your font js file from the Cufón site and download it as well.
3. Put both files into your skin directory under the js folder if there is one.

You’ll need to call the Cufon.replace() function before Cufon will do anything.  I create another js file called set-cufon.js.  Add your function calls to this file using something similar to the following:

[javascript]
Cufon.replace(‘h1,h2,h3′);
Cufon.replace(‘p.cufon’);
[/javascript]

When you’ve finished adding your function calls, add this file to your skin js folder.

Adding the javascript files to the layout

Open the page.xml file and add the following xml inside the page/html_head block:

[xml]
<action method=”addItem”><type>skin_js</type><name>js/cufon-yui.js</name></action>
<action method=”addItem”><type>skin_js</type><name>js/your.font.js</name></action>
<action method=”addItem”><type>skin_js</type><name>js/setup-cufon.js</name></action>
[/xml]

That should do it.  I’ve noticed some people add the Cufon.replace function calls to the head.phtml template file.  Either way will work.  Don’t forget to clear the cache!

I’ve seen quite a few blog posts and Magento forum topics well and truly over complicating this.

There are two steps involved:

Enabling the attribute for front end display

If you don’t do this, you won’t see your attribute on the category or product page and you’ll be scratching your head trying to work out why your get attribute function is shooting blanks.  Do the following:

1. In admin, go to Catalog > Attributes > Manage Attributes
2. Select the attribute you want to edit
3. Scroll down to Frontend Properties and select Yes for Used in product listing

Adding some code to your template files to return the attribute

This couldn’t be easier.  There is a function in the Mage_Catalog_Model_Product class called getAttributeText that takes one argument, the attribute code.

Add the following code to your catalog/product/view.phtml or catalog/product/list.html template files:

[php]
echo $_product->getAttributeText(‘your_attribute_code’);
[/php]

Just change out ‘your_attribute_code’ with your attribute code and you’re done.  That’s it.  Simple hey?

I’m just going to keep it dead simple.  Ok let’s get on with it…

Add this container div to your HTML

[html]<div id=”twitter_update_list”>

</div>[/html]

Note: Make sure you leave the div id as “twitter_update_list”.  The javascript callback will be looking for this id when it populates the div with your tweets.

Add the following javascript calls before the closing </body> tag

[javascript]<script src=”http://twitter.com/javascripts/blogger.js” type=”text/javascript”>

</script>

<script src=”http://api.twitter.com/1/statuses/user_timeline.json?screen_name=webtwibe&include_rts=1&callback=twitterCallback2&count=1″ type=”text/javascript”>

</script>[/javascript]

Adjusting the API call to suit your needs

This is the API call that goes off and grabs our tweets for us.

http://api.twitter.com/1/statuses/user_timeline.json?screen_name=webtwibe&include_rts=1&callback=twitterCallback2&count=1

To update it for yourself, you’ll need to update the screen_name value to the name of your twitter account.  As you can see, I’m using webtwibe.

If you want to include retweets, set the value include_rts to 1 or true.

If you want to exclude retweets, set the value include_rts to 0 or false.

The callback value needs to stay put.  This is the ‘callback=twitterCallback2‘ reference you see above.  This will format the incoming feed for us.

Finally, you can set the number of tweets you want to read in.  Adjust the count value to suit your needs.  In my example, I’m just pulling in one little tweet.

Filtering the Twitter feed

Each tweet returned in the feed comes with properties that tell us what type of tweet it is.  Using these properties we can filter out things like retweets, @replies, tweets that contain certain keywords, etc.

The following example shows how to filter out @replies from your feed.

This code is taken from the Technical Mangroves Blog, it’s a function that performs a filter before passing the results to the original callback twitterCallback2.

Paste this code into your HTML (in the <head> if you like):

[javascript]

[/javascript]

You’ll need to change the callback name in the API call to filterCallback like so:

http://api.twitter.com/1/statuses/user_timeline.json?screen_name=webtwibe&include_rts=1&callback=filterCallback&count=10

You might need to push the value of count up a bit to compensate for filtered tweets.  Set the exact amount of tweets you want to display in the filterCallback function where you see the result.length==5.  If you want to show 3 tweets, change the 5 to a 3. Easy.

This function could be extended to provide much more comprehensive filtering.  When I have time I’ll create a function that can do this.

Thanks for Technical Mangroves for the their work on the function filterCallback.

Ok, the first point is:  To get yourself online, you will need both a domain name and a hosting package.  They will both incur annual costs.  You might find some free services somewhere online but generally speaking, you’ll need to factor in some annual upkeep fees.

So, what are the differences between domain registration and hosting?  Let’s take a look.

Domain Registration

Every website needs a domain name.  In our case, we have registered the domain name www.webtribe.com.au.

Think of your domain name like a house address – it’s going to allow visitors to find you.

There are plenty of companies out there online that will provide domain registration services, do your research as the prices can differ substantially.

We can also register your domain for you, contact us and we’ll arrange it.

Note: To register a .com.au domain name in Australia, you need to have an ABN and the domain name must have some resemblance to your business name / services.

Hosting

I made the point that your domain name is kind of like your house number and street name.  It tells us where the location of your website is on the internet.

Using the same analogy, hosting is the land where you build your house.

In technical terms, your website will be hosted on a server that is accessible via the internet.

Summary

This post is intended for those just starting out in their adventures online.  I find myself explaining this over and over again (especially using the house and land analogy, works every time!) and thought that someone out there might find it useful.

Hope this helps to give you a clearer picture of what you’ll need to get started with your very first website.

It’s quite simple but if you’ve been searching for a way to do it, read on.

1. Go to Cufon, plug in your font and generate/download your javascript files.

2. Download the jQuery countdown files from Keith Wood.

3. Ok, now we put it all together.  The basic HTML looked something like this:

[html]
<html>
<head>

<title>My jQuery Countdown / Cufon Example</title>

<style type=”text/css”>
@import “css/jquery.countdown.css”;
</style>

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/cufon-yui.js”></script>
<script type=”text/javascript” src=”js/my.typewriter.font.js”></script>
<script type=”text/javascript” src=”js/jquery.countdown.js”></script>

<script type=”text/javascript”>

$(function () {
var austDay = new Date();
austDay = new Date(austDay.getFullYear() + 1, 1, 4);
$(‘#defaultCountdown’).countdown({until: austDay});

Cufon.replace(‘#defaultCountdown *’);   // this will replace everything in the defaultCountdown div with your font
});

</script>

</head>

<body>

<!– To avoid delays, initialize Cufón before other scripts at the bottom –>
<script type=”text/javascript”> Cufon.now(); </script>

<div id=”defaultCountdown”></div>

</body>

</html>

[/html]

4. When you first fire this baby up you’ll see the font change.  Then, a second later you’ll be looking at your nice typewriter font being replaced by Arial / Verdana, etc.

To sort this out, we’ll need to call the Cufon replace function everytime the countdown updates itself.

Open up the file jquery.countdown.js and add the following line to the bottom of the updateCountdown function like so:

[javascript]

_updateCountdown: function(target, inst) {

………..

Cufon.replace(‘#defaultCountdown *’);
}

[/javascript]

5. That’s it.  You should now see your typewriter font staring back at you every single second.  Good luck.

Download a Sample

Click here to download a working example.

The extreme website and branding makeover is complete!  Stay tuned for loads of cool blog entries on nerdy stuff like PHP, CSS, Coldfusion, ModX and WordPress.

If your eyes glazed over during that last sentence then maybe I’ll post some pics of my guitars to keep you happy!

Special thanks to Stuart Holmes and Bec Gauci for all their excellent work on the new branding.  You guys did a great job!

Back soon,

Tom.