17 Aug 2009

Add a Tweet Me button to iWeb

5 Comments Tutorials, Web Design, Widgets

Last night, after I had got back from the UK I switched on my iMac to check ‘Mail’ and found rather a lot of you had read my last post which explains how to add a ‘Tweet Me’ link to your iWeb site and then edit the text a little to make the font blend in with your site.

17 of you sent me e-mails asking if it would be possible to achieve the same effect but with an image rather than just the text. So this morning I got up extra early to have a play around with iWeb and I can report that yes you can.

To start with¬†(obviously)¬†open iWeb at the page you want to add the button/icon to. It helps at this point to have your ‘Tweet Me’ image ready. There are hundreds of twitter icons available on the Internet; I have listed a few pages links at the bottom of this post.

I had my icon on the desktop so all I had to do was drag it on to my iWeb page and position it in the right place and get the size looking just right.

Make sure that the image is still ‘selected’ (it will have the white ‘handles’ on each corner) and then open ‘Inspector’.

Select the ‘Hyperlink’ tab (that’s the blue circle with the white arrow in).

hyperlink_inspector_iweb

In the ‘Link To:’ drop-down menu select ‘External page’.

In the ‘Name’ text-box copy/paste the hyperlink code shown below. Obviously you will have to change the URL (shown in red) to fit your iWeb page/iWeb blog post.

http://twitter.com/home?status=I just read
 http://www.yourdomain.com/postname.html

And that is it. You now have a ‘Tweet Me’ button on your iWeb site. Save and publish as normal.

And here are, as promised, a few sites to visit for twitter related icons and buttons;

Bloggodown.com – 400 free icons

Stockgraphicdesigns.com – Free Vector and PNGs

CSSStyleMe.com – Free icon set

Naldz Graphics.net – 6 adorable twitter icons

Tags: , , ,
written by
AllAboutiWeb (AAi) is your one stop shop for everything iWeb. We provide tips, tricks and more to get the most out of your iWeb website. Follow us in twitter at @allaboutiweb
Related Posts

5 Responses to “Add a Tweet Me button to iWeb”

  1. Reply Ultan says:

    Great Post! Just what I wanted! :) Thanks for all your awesomeness!

  2. Reply Jeremy says:

    where did you get the icon from your last twitter article. the Follow This one. with the twitterific type bird on one side and room for text on the other?

  3. Reply Add a Tweet Me button to your iWeb site | All About iWeb | Mac Affinity says:

    [...] Read more here: Add a Tweet Me button to your iWeb site | All About iWeb [...]

  4. Reply bryony says:

    i just wanted to say a big thank you, i can hardly manage to switch my mac on, im that non geeky but i managed to really impress people with the twitter button, so a big thank you i will be checking out all the other tutorials.

  5. Reply Tiah says:

    Can you make the url a tiny url already when it shows up in Twitter? I have my FTP re-routed to Mobile Me so that people can leave comments on my blog, so when it shows up in twitter its SUPER long….

Leave a Reply