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.
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.
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.
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.
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:
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.