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

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 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 want to add the Light Bulb Jokes widget to your page click here.

1. Click on "Get Widget" and you will see a popup window where you select to 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 find the code somewhere 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 add a comment to this page’s Forum section.

Widgetbox

Bravenet free widgets and Bravenet free webtools

NeoWORX

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

Thank you for visiting and supporting my website,

- Cédric -