iWeb FAQ - HTML Snippet and Widgets



What’s an HTML Snippet? How does it work? What’s a Widget? How do they work? Where do I find Widgets?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch

Note: HTML Snippets only exist in iWeb ’08 and ’09 (v.2 and v.3), if you use iWeb ’06 (v.1) look at the Alternative HTML FAQ instead.

What is an HTML Snippet and how do I add one to my page?

The HTML Snippet is used to insert HTML (and other) codes into your iWeb pages.

To add an HTML Snippet to your page go to Media and drag the HTML Snippet logo to your page. You will then see two windows appearing on your screen. paste your HTML code in the black window and hit "Apply". Some codes work right in iWeb itself. Other codes only work once published to the web.

The problems using HTML Snippets

What happens when you add an HTML Snippet to a page in iWeb is:

- iWeb creates a new page for the HTML Snippet

- iWeb adds the code you add to the Snippet into this new page

- iWeb embeds this new HTML Snippet page into the page you added the HTML Snippet to using an iFrame

Result: the code isn't where it's meant to be. The code isn't on the page you added the HTML Snippet to but is in another page which is just embedded into the page you added the Snippet to.

At times that may be satisfying/sufficient/good enough but in some cases that makes the codes not working the way they are supposed to work. This is especially true for things which need to expand like Tell a friend widgets, Highslide photos, Drop down menus, ... since HTML Snippets are iFrames with fixed sizes the codes don't get the additional room they need to display properly. That’s why it sometimes is necessary to use an alternative way to embed HTML in your iWeb created website. See Alternative HTML.

Another problem of HTML Snippets is that you can’t fix them on the page. They will not move with text. You always have to reposition the Snippets.

What is a Widget and how do they work?

A web widget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. They are derived from the idea of code reuse thus the idea of creating something new using something that already exists.

You usually insert a piece of code into your pages that retrieves informations from a third party supplier which also supplies the code you need to add to your page and that's it.

As an example if you would like to add the Light Bulb Jokes widget to your page you would visit the appropriate page on the World Wide Web.

1. Click on "Get Widget" and you will see a popup window where you can get the HTML code

2. Copy the code

3. Go to iWeb and add an HTML Snippet to your page

4. Paste the code you copied before into the black window and hit Apply

5. You’re done. You will now see the widget appearing right in your iWeb. Double click the HTML Snippet to interact with it directly in iWeb.

It's really easy to integrate widgets into iWeb and it's like "embedding a whole new world" into iWeb. They are really useful. No matter what you use to get/build the widget you will somewhere find the code to paste into the snippet.

There are different widgets sources on the web. Here you will find some of them. If you know more please let me know by posting on my forum.


Bravenet free widgets and Bravenet free webtools


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 -