How can I add a Tell a friend widget to my iWeb created site so that people can easily send the link to one of my pages to their friends and bookmark it? How can I add a StumbleUpon button to my website?

Chapter 1: Tell a friend widget

Social networks like Facebook and MySpace are an important source of visitors for your website nowadays. That’s why it’s important to implement a feature into your website which allows your visitors to easily share your website over such social networks.

The widget I found to be the best is the one made by SocialTwist

Sign up to SocialTwist and get your widget-code.

Please note that the Widget doesn’t work when added to an HTML Snippet so you need to use Alternative HTML (read that FAQ).

1. Go here and Download MassReplaceIt (it’s free)

2. Open iWeb

3. In the page or in the pages you want to add the Tell a friend widget to, create a Text Box

4. In these Text Boxes enter a code or a word you’re sure it doesn’t appear anywhere else on your pages (I use TellAFriendGoesHere). Put this code Text Indent 2 px (Open the Inspector, go to the Text tab and choose List change the text indent to 2 px)

5. Publish your website to folder or iDisk

6. Open MassReplaceIt

7. In Find you enter TellAFriendGoesHere or whatever

8. In Replace you enter the html code you’ve been provided by SocialTwist

9. You can set more than one Find&Replace at once if you want to add more than one

10. Save the Query and make it the default

11. In Files add the folder of your website

- If you publish to a folder choose the folder you publish to from iWeb

- If you publish to MobileMe select your iDisk/Web/Sites/ folder where iWeb publishes to.

If you can’t choose the iDisk because you don’t see it go to Finder/Preferences/Sidebar and check the box near the iDisk

12. Click “Replace” and the HTML code will be added

13. Re-run MassReplaceIt every time you (re-)publish

Important note about MassReplaceIt settings:

- In Options select Search=Contents, Location=Entire file/Filename, Options=Search whole words

1. -In Preferences When adding a folder toa  search list=Add a folder, Search folder’s name and contents
   

2. -In MassReplaceIt go to Mask click on "Add" "Search items whose:" select "Extension" From the other drop down menu select "is" and then type ".html" (without "") and click on "Add..." and select "All criteria, must be satisfied to search a file". Doing this speeds-up the process of searching.
   

To fix it on a page copy and paste the textbox in the main textbox of your page. Now if you add text the “Snippet” will move automatically with the page.

If MassReplaceIt didn’t work. If MassReplaceIt didn’t find any of the TextBoxes to replace with HTML codes. Read this MassReplaceIt & HTML troubleshoot page.

Example:

Use the widgets you find on each page of my website to tell your friends about it!

Chapter 2: StumbleUpon button

StumbleUpon is a link sharing platform. It allows people to add websites they like to Stumble’s database so other people can see them, add reviews for the websites and more. You can also share your list of websites (bookmarks) with your friends so they can see what sites you like to browse on. Same as for Facebook: there are millions of users or potential visitors for your site on StumbleUpon.

Here I will explain how to add a Stumble upon button to your website which allows people to vote for it:

1. Go to this page

2. Choose the graphic you want the button to wear and hit “Any web page or blog”

3. You will now find a code like this one:

<a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.yoursite.com%2Farticle.php%26title%3DThe%2BArticle%2BTitle"> <img border=0 src="http://cdn.stumble-upon.com/images/120x20_thumb_black.gif" alt=""></a>

In there you see the URL to the image (here in red), copy and paste it to a safe location. We will need it further on.

4. Now depending on whether you want to use HTML Snippets to post the code into your page or use Alternative HTML (recommended) the code is slightly different.

Using Alternative HTML copy this code here (original source of the following code is this site)

<script language=JavaScript>

document.write ('<a href="');

document.write('http://www.stumbleupon.com/submit?url='+document.URL+'&title='+document.title.replace(/ /g,'+')+'">');

document.write ('<img border=0 src=URL of the image></a>');

</script>

In the code replace URL of the image with the URL you copied in step 3

If you want to use HTML Snippets copy the following code:

<script language=JavaScript>

document.write ('<a href="');

document.write('http://www.stumbleupon.com/submit?url=URL of your Home page">');

document.write ('<img border=0 src=URL of the image></a>');

</script>

In the code replace URL of your Home page with the URL to your Home page. In my case that would be: http://iwebfaq.org/site/iWeb_FAQ.html

Replace URL of the image with the URL you copied in step 3

As always with HTML Snippets this solution is a workaround. Meaning far from perfect.

5. Proceed to adding the code to your pages. Depending on the choice you made in step 4 either by following the Alternative HTML process you find described in its FAQ or by adding it to HTML Snippets.

You find this widget on each of my pages, join in! :-)

iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s presented by Cédric and hosted by HostExcellence.com

I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.

Thank you for visiting and supporting my website.

- Cédric -