13 Aug 2009

Add a Tweet Me link to iWeb

8 Comments Tutorials, Web Design, Widgets

By now we can all safely say that social media helps web-sites grow.  Wherher it is displaying a link to your home-page on your facebook profile, adding the ‘add this’ button to your iWeb site or just having a mini twitter feed in the sidebar of your blog; it all helps to spread the word.

Judging by the stats for all about iWeb adding various twitter bits to your iWeb sites seems to be one of the more popular reasons (of late) for visitors to come to this site and I have been investigating ways of going a little bit further than the bog standard ‘follow me on twitter’ link.

If, like me you read a lot of blogs you will have noticed that more and more seem to have ‘Tweet Me’ links somewhere on the page so that site visitors can read the post and, if they think it is good enough and want to ‘spread the word’ they can click on the link. This will take them to their twitter account with a pre-filled message saying something along the lines of:

‘Just reading: 101 ways to world domination with iWeb.’

All the visitor has to do then is hit return and a link to the relevant post or page is added to their twitter feed so that all their followers can click on it too.

To achieve this ‘Tweet Me’ button in the more popular blogging platforms (such as WordPress or Blogger) is easy and ususally comes in the form of a plug-in. In iWeb we have to do a little bit of work, but as with most things iWeb, once you have done it the first time a bit of copy/paste is all that is needed the next time.

Open iWeb and open a new blank page to practise on. Insert an HTML Snippet and paste the code below into the black transparent window.

<a title="Send this post to Twitter!" href="http://twitter.com/home?status=
I just read http://www.pageorwebsiteaddress.com"><strong>Tweet This!</strong></a>

You will notice that I have highlighted some text in red. This is where you type in the URL of the page you want this button added to. You could leave it as your standard URL (http://www.yourdomainname.com) or go the full hog and add the title to your blog post (http://www.yourdomainname.com/blog/post-name.html), it’s up to you.

Click apply, save your site and publish as normal, it’s as easy as that.

insert_html_snippet_tweet_me_iweb

Many of you now will be saying (I guess) ‘that doesn’t fit with the look of my iWeb site’ and unless you have a basic iWeb site with no styling whatsoever then you are right; so lets add a bit of styling.

In the code below you will notice that I have enclosed the ‘Tweet Me’ code within its own ‘Div’. I have then added CSS style to this div to make the link fit with the rest of my iWeb site.  Once again, everything I have colored red, you can edit.

<div id="tweet_me">
<style>
a{font-family: Arial; font-size: 1em; color: #330000; text-decoration: none;}
</style>
<a title="Send this post to Twitter!" href="http://twitter.com/home?status=
I just read http://www.pageorwebaddress.com"><strong>Tweet This!</strong></a>
</div>

As with all of the other iWeb tutorials where I have edited the CSS to change the look and feel of a link you can change the font (check Font Book in your Applications folder for other names), the color of the font is changed by editing the 6-figure code (the W3Schools has a huge list of color codes) and you can change the size too by increasing (or decreasing) the number which is followed by ‘em’.

In the image below you will see how the font styling has changed completely from the default blue underlined one earlier on. I have added a small twitter bird icon too as well as a rounded corner rectangle with a slight shadow to the background. This helps to make the Tweet Me link stand out and not just blend into the background of the iWeb site.

styled_html_snippet_tweet_me_iweb

Once this is published to your iWeb site and made live on the Internet each time a user clicks on the link they will be taken to their twitter page where all they have to do is hit apply and their status will be updated. It even shrinks the URL for you; just like this:

aai_twitter

If you have followed this tutorial and added a Tweet Me link to your iWeb site why not leave a comment so we can take a look.

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

8 Responses to “Add a Tweet Me link to iWeb”

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

    [...] Continue reading here: Add a Tweet Me button to iWeb | All About iWeb [...]

  2. Reply Ultan says:

    OMG!!! I so want to add this to my site now! :)

  3. Reply Eric Tuell says:

    Just added it to my site, tuellmansballin.com, i also used your tutorial on adding the twitter updates to my site, thanks so much!!!

  4. Reply Mike says:

    Thank you so much. I was struggling with this issue all day and thanks to your very user friendly instructions, I was able to insert a “tweet me” icon on the blog page of my new website. I’ve literally been working on my site for over a month now using iWeb and learning tons. I just bought a Mac about 3 months ago so I think I’m starting to get the hang of it.

    Thanks again. Oh, what is the best way to include the bird like you did in the instructions? I know it’s probably simple but I’m new at this and having a little trouble.

    Mike

  5. Reply Capino says:

    Thanks heaps for this code. Found it after a lot of searching and other scripts tried.. Added my own Icon as well. So now anyone can tweet about our site http://www.survival-skills-guide.com/ thanks again

  6. Reply Nicole Grotepas says:

    Thanks for the code! The button turned out great!

    http://www.nicolegrotepas.com/ng/Life_Feeds.html

  7. Reply Jens says:

    Great tutorial!
    It’s not shortening the link for me though… did I miss something?

  8. Reply Michelle says:

    Thank you! You made this so easy!

Leave a Reply