Something you may have seen springing up on blogs and web-sites over the last few weeks is the new ‘official’ twitter button, allowing visitors to a site to retweet a post or page they like or have found useful and think other people should read it. In this iWeb tutorial I will explain the process of adding these new buttons to your iWeb site so you can join in the fun.
Of course, apart from an iWeb site you will need a Twitter account too, so if you don’t have one, sign-up now!
And once you are at the twitter site, scroll down to the bottom of the page and you will see a text based nav-bar. One of the links is ‘Goodies’ and will take you to a page that looks just like this.
We want to add a ‘Tweet Button’ so click on the icon and you will get to the next page.
There’s plenty of options to choose from, for example you’re not just stuck to using English. If you are going to use the code on a static page you can also include the URL and page title to include in the code; something that can help with your SEO a little. You can also recommend people to follow to your site visitors.
So once you have customized your Tweet Button select all of the code shown in the window and ‘copy’ it.
Open iWeb and find the page you want to add the button to. Now add a HTML Snippet and paste in the code. Your Tweet button should now appear (once you have pressed ‘Apply’).
Sadly that isn’t all there is to this tutorial. If you published your site now all users would get if they clicked the button is this:
This is because of the way iWeb uses the HTML Snippet. It doesn’t actually add the code to your page, it creates an entirely new page and just links back to your current page so it looks as if the snippet is there; in reality it isn’t.
The reason you inserted the code into the snippet is so you can see how big the button is on your page and to make sure you get it in the right place.
What you have to do now is insert a text-box and drag it over the top of the button. Within that text-box type one word, and one word that there is a remote chance that it won’t appear anywhere else on your iWeb page. I used TWITTER.
You can then delete the HTML Snippet and you will be left with something that looks like the image above.
You can now save your iWeb site and ‘Publish to a local folder’; we are going to edit some code.
Using Finder, navigate to your site on your hard-drive;
and open the relevant page in an HTML editor.
Using the find function of your editor (Cmd+F) find the word you used in your text-box.
The line of code above your word is the layout and positioning for your text-box and so effectively it is a ‘DIV’ that we can use to add our code. We know it is the right size and in the right position as we put it there earlier.
So replace the line shown in the image below ONLY. Don’t touch the rest of it.
Simply highlight the line of code and paste your twitter code on top of it. The line of code below (in this case <div>) may move up one line and attach itself to the end of your code; don’t worry about it.
You can now save your site and either copy and paste it to your MobileMe iDisk or use an FTP application to upload it to your server. Do not use iWeb to upload it, however, as this will just void all your hard work.
Your finished button should look like this (or whichever one you chose). Each time a user clicks on it the following window should pop-up.
And therefore they can spread the word about your site for you!
A word of warning though. If you try and test the button from your Mac without publishing your site to the www you will get the following message:
That’s because twitter can’t access your Mac and therefore cannot apply a shortened URL to the window.
And that’s it, easy eh? Let us know if you are going to use the new twitter buttons on your site so we can take a look.