iWeb FAQ - Tell a friend widget and Stumble Upon button



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?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch

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

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 your website's folder

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.



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>');


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>');


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! :-)

This FAQ is also discussed in my iWebFAQ.org E-Book (sample)

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

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.

Thank you for visiting and supporting my website,

- Cédric -