You can see a demo of both Print page button as a form button and a graphic button in action created in iWeb by clicking the button below:

View Demo »

There are two versions of the code below.  One is to use your own button, the other is to use a form button.  We’ll first start with a form button.

Print Page Form Button

The print page form button doesn’t require any extra graphics or anything, simply paste the code below in an HTML Snippet in iWeb and you’ll have a print page button.  It’s as simple as that!  Here’s the code:

Print Page Button with your own Graphic

This one does the same thing but lets you use your own graphic for the print button.  Much better if you’re trying to match a similar style to your custom iWeb design.  It just takes a few steps:

1) First make a graphic in photoshop or whatever else to be your print button and upload it to your server (i.e. MobileMe, Your Host Server, etc).

2) Paste the code below, but replace the code in red with the URL link to your image.

<a href="javascript:parent.window.print()"><IMG SRC="http://www.mysite.com/imagefolder/mybtnimage.png"; width="127" height="31" alt="Print this page" border="0"></a>

3) Hit apply and presto!

If you don’t know how to make a button here are some free print buttons you can use for your own sites.

Download Print Buttons

Or you can find some great print icons by going here: http://findicons.com/search/print

That should be it.  If you have any questions or comments post them below.

Tweet

View Demo »

There are 4 major options when choosing to get comments onto your iWeb site.  The four big commenting systems are:

• MobileMe – Paid (http://www.apple.com/mobileme/)
• Disqus – Free (http://www.disqus.com)
• Instense Debate – Free (http://www.intensedebate.com)
• Echo – Paid (http://www.aboutecho.com)

Each of them have different features and looks to them.  So I’d recommend looking at each one and deciding which one will work best for you and your website.  I’m going to show you how to get your comments if your using MobileMe first, then we’ll get into implementing comments if you’re not using mobileme.

Comments with MobileMe:

MobileMe is probably the easiest way to get comments into your website.  It’s already built in to iWeb, and it’s very simple for users to use.  If you don’t have a MobileMe account yet, it’s a great option that Apple offers.  It gives you 20GB of online space for storage or a website, it syncs contacts; calendars, bookmarks, and more across all your macs and devices, as well as many other features which you can read about by visiting the MobileMe Site.  Here’s how to get your comments working if your hosting your site with MobileMe.

1. Create your page(s) in iWeb, then click on the site folder (it’s the main site above all your pages).
2. Choose MobileMe as the choice where it says “Publish To:”
3. Then go to the Blog/Podcast page your wanting your comments on, then open the inspector and choose the “Blog and Podcast Inspector” (It’s represented by a an RSS button).
4. In the Blog and Podcast Inspector you’ll see a tab that says Blog, click that and you’ll see a section that says Comments.
5. Click the Comments Checkbox.  You’ll be presented with a box that tells you about what comments does, just click OK.
6. Then click the Allow Attachments (Optional).  This allows users to attach images, documents, etc.  It is possible for visitors to attach items that are objectionable to you or others so if you choose to use this option be sure to moderate the comments often.
7. Publish your site and that’s it!

You’ll see that when someone comments on your site using the MobileMe Comments iWeb will have a little number tick next to it’s icon (similar to Mail) when there is a new comment, so you’ll know when there is a new comment on your site.  That’s it and have fun.

Adding Comments to your site without MobileMe:

To add comments to your site without MobileMe, we first have to sign up for an account at one of the comment platforms by going to Disqus.com, IntenseDebate.com, or AboutEcho.com.  Disqus and Intense Debate are free and Echo costs about $99 p/year.  We then setup our settings on their sites, get comment code and paste into an HTML Snippet.  The only problem with this is that we need to adjust our snippet to the size our commenting is going to be, because the HTML snippet will not adjust in size as more comments are added to our site.  So you have to either stretch your snippet to the size that you expect your comments to grow as, or you can put the code onto a blank HTML page and iFrame that into iWeb, that way you can set the size of your snippet to be whatever you want and as more comments are added, the iFrame will simply have a scroll bar to show all the comments.  It works really good and makes it easier for you to manage and design.  I tell you this upfront cause there are really two ways to implement this into your site 1) A Direct Snippet and 2) An iFrame (as I discussed).  So Let me first show you how to do it with a Direct Snippet, then I’ll instruct you how to do it with an iFrame so you can have scrolling comments and won’t have to worry about the size of your HTML Snippet as more comments are added to your site.

1) First Sign up for a Free account at Disqus.com or InstenseDebate.com (Or AboutEcho.com if you want to pay the $99 yearly fee) and get your comment code.

Signing up and getting comment code with Disqus.com:

1. Go to Disqus.com and hit the “Sign Up, Free” Button.
2. Enter your Site URL, Site Name, Site Shortname, then decide your username, password, and email address you want to use.
3. You’ll then be directed to step number 2 where you will choose the language for your comments, and some optional features such as providing allowing users to log in with Twitter, Facebook, Yahoo, Open ID, and others, and the ability to share across social networks.
4. Step 3 is where you will get your install code.  Choose the option that says “Universal Code”.
5. Copy the code that is next to the “1.” (don’t worry about the code in the 2. section) and you’ll now have the code we’ll need in the next steps.

Signing up and getting comment code with IntenseDebate.com:

1. Go to InstenseDebate.com and hit the “Sign Up” Button.
2. Enter in a Username, Email, and Password, and choose the option “I want to install IntenseDebate on my blog or website”, and hit the sign up button.
3. You’ll then need to check your email to verify the account before you can go on.
4. Once you’ve verified you email go ahead and login.
5. Upon logging in you’ll be directed to your dashboard, you’ll see a section on the right side under “Manage Blog/Sites” a button that says “You have not installed IntenseDebate on any blogs yet. Install IntenseDebate.” click on that link.
6. You’ll then be walked through 3 steps to get the code we need to go on. Step 1 is to enter in your blog/website URL.  Do that and hit “Next Step” to continue.
7. Step 2 is to choose your platform.  You won’t find iWeb in the list there so just choose the option “Generic Install”.
8. Step 3 is where they will give you your install code. On the left side it says “JavaScript Install”, copy the code next to the “1.” and move to the next step.

Comments using a Direct HTML Snippet:

2) Now take that code and paste it into an HTML Snippet on your iWeb page that you want the comments to be on and hit apply.

3) You’ll notice that it seems nothing has happened.  That’s because your site isn’t online yet.  Your comments actually won’t work until your site is online, so don’t worry that you don’t see your comments show up yet.  At this point you need to size your HTML snippet to accommodate the comment response box and all the comments and future comments that you are going to have.  So be sure to stretch it long enough to accommodate all the comments that you foresee your page having.

note: If you’re unsure about what the size of your snippet should be you can jump to the “Comments using iFrame” which will make this snippet scrollable so you won’t have to worry about the size and comments not showing.

4) Now publish you site to your server either using direct FTP publishing in iWeb or to a folder then to your server.

5) Visit your page to make sure it is working properly with the comments and give yourself a pat on the back for adding comments to your iWeb page.

Comments using an iFrame:

2)  Now open up an HTML editor such as Coda or TextEdit.  Start a new page/document and paste in this code to create a blank HTML page:

and replace where it says <!– Add Comment Code here –> with your own comment code you got from Disqus or Intense Debate.

3) Now save the document as an HTML file (something like pagecomments.html)

note: If your using text edit be sure you go into the textedit prefs and under the Open and Save section and check the checkbox that says “Ignore Rich Text command in HTML files”.  Then when you save your html document be sure to change the file format to “Web Page .html”.

4) Now put your newly created html file on your web server host using an FTP program like Transmit.  You might want to make a folder somewhere that is just for comment pages.

5) Now that your HTML file is online, go visit the page to make sure it is working.  Your URL to test it might be something like www.yoursite.com/comments/commentHTMLpage.html, if it is working that you can smile and continue on, it not, go back and make sure you got everything in order.

6) Now all we need to do is iFrame that page into iWeb.  Simply go to the iFrame tip page by clicking here, and paste the iFrame code into a snippet, but don’t hit apply quite yet.

7) With the iframe code in a snippet, replace the iframe URL in the code to be the URL to your comment page (i.e. www.yoursite.com/comments/commentHTMLpage.html), then hit apply.

8) If your using Disqus you should actually see the comments show up, if your using IntenseDebate you actually won’t see your comments until it’s online.  At this point we need to do two things.  Resize our snippet and put those dimensions in the iframe code.  So…

9) Adjust your HTML Snippet to be where you want it to be on the page and the dimensions you’d like it to be on your page as well.

note: you don’t need to worry about stretching the snippet length extra large like on the direct snippet method above because this method is going to have a scroll bar when more comments are added.  So just make the snippet a good size to see a good comment post or two.

10) Now that your snippet is where you like it you need to put in the snippet width and height into the iFrame code.  You would have seen the dimensions while dragging the size of the snippet, but if you didn’t see it simply click the snippet so it’s selected and go to the Metrics Inspector (the one with the ruler icon) and see what the width and height is of your HTML Snippet box and put that into the iFrame code where it says width and height, and hit apply.

11) Your comments should now be ready to post online.  Simply publish your site online, test to make sure it is working and looking properly, and give yourself a pat on the back for successfully implementing comments into your iWeb site.

That’s all there is too it.  If you having problems you can watch the video tutorial on how to do this by clicking below:

Watch Video Tutorial »

Hope that answers all your commenting questions.  If you have further questions or if anything is unclear feel free to comment below.  If you feel that this tip has helped please consider donating to the iWebUnlimited cause by clicking here.

Thanks for stopping by.

—iJason

It’s finally here!  An easy way to get Google search on your iWeb site! Woo hoo!

So there are a few ways to get a Google Search into your iWebsite, an easy “paste code into an html snippet” way and a “more complex but sweet integrated google results” way.  So let’s start with the easy one first, then we’ll move to the more complex one.  Here we go!

See Demo »

Simple Google Search Code:

Google Search Box 1:

This code will put a simple Google Search box on your site that gives visitors a choice to search your website or google.  When a visitor enters a search term the search will take them to a new page with search results.  To add this to your website simply paste this code in an HTML snippet:

Then simply change the code in red to modify to fit your site.  You can adjust the font, size, and color, then (most importantly) add your site’s name and URL.  Hit apply on your snippet, publish, and your set!

Google Search Box 2:

This box is the same as Google Search Box 1, but it only searches your site.  Simply paste this code in an HTML snippet:

Then just replace the text in red with your site, hit apply, and your set.

Google Search Box 3:

This box is the same as #3, but it has no Google branding.  Just add this code:

Google Search Box 4:

This one is just a simple “search the web” Google search.  For those that simple want the convenience of search the web through their own website.  Just paste this code below:

And that’s it, have fun!

Advanced Google Search in iWeb:

Alright, let’s now dig a bit deeper.  This tip here will give you a google search box that when a user searches, they remain on your site and your results will show up on your site as well. WooHoo!  It gives users a much better user experience.  So here we go:

1) The first thing you need to do is to log in or create a Google Adsense account.  Do so by going to https://www.google.com/adsense/

2) After your logged in go to the “Adsense Setup” tab and click the “Adsense for Search”

3) You’ll be guided through a series of questions to setup your search for your site of which are:

• Search Type: Choose “Only Sites I Select”
• Selected Sites: Enter your website (the full site, http://yoursite.com, or http://web.me.com/mobilemeusername
• Optional Keywords: Enter keywords that have to do with your site.  Here’s a link with examples.
• More Options: Site Language: Of course choose your language.
• Your site encoding: I recommend leaving it at it’s default.
• Country of Territory: Choose your country.
• Custom Channel: If you’ve made previous ad channels you can set this up in relation to one of those, but if not no worries, just keep the checkbox that says “Automatically create new channel”
• Safe Search: I recommend leaving it on.  Keeps inappropriate items out of your visitors search.

Then hit continue.

4) You then can choose the style of the search box you wish to have on your site.  So just click the radio button that looks most like it would fit in with your site.  You can also choose how many characters you want your search box to be.  Feel free to modify to best fit your site.

Then hit continue.

5) The next page asks where the search results will be.  Choose the option that says “Open results within my own site”, then specify the URL that the results will be at (this will be a page that we will create later.  I suggest putting in http://yoursite.com/results.html or http://web.me.com/mobilemeusername/sitename/results.html, we can always change this later if you need to as well).  It also asks you to put in the size of the results in width.  The smallest it can be is 795, so we’ll have to be sure we’ll make room for this on our site later on.  I recommend just keeping it the default 800px wide.

You then will choose where you would like the ads placed (Don’t worry you’ll get cash for people clicking on the ads that are on your site).  I suggest choosing “right only”, unless you want to persuade people to click the ads, in that case choose “top and right”.

The last option on this page is the modification of the colors.  It’s a pretty neat feature here where you can change the colors of the search results so it will match your website.  So do that here.  They have some presets if you’d like to play with those, or you can just change the colors individually.

Then hit continue.

6) The next page simply has you name your new search engine we’ve just setup.  Give a name (doesn’t really matter what you name it) , read the additional terms (if you want), click the checkbox that you agree, and hit the “Submit and Get Code” Button.

7) Alright we have arrived! WooHoo! You now have two boxes with code.  Copy and paste those bits of code somewhere where you can access it.  I personally like to use Evernote (it’s free and syncs with everything), but you could save it in a document (pages, word, google docs, text edit), Apple Mail Notes, etc.  Doesn’t matter where you save it, just save it so you can access it later.

So the first box is the search box and second box is the results code.  So the first thing we are going to do is copy and paste the search box code into an HTML Snippet in iWeb.  This can be anywhere and on as many pages as we’d like.  If you want to have a search box on everypage, go for it.  Just get that search box on your iWebsite somewhere.

8) Alright now that we have a search box on our website, we now need to make the results page.  Sooooo, to do this we are going to create a new page on our site.  So go ahead and hit the “Add Page” button in iWeb in the bottom left or click file > New Page, or you can duplicate an existing page by selecting it and pressing “command + d”.  Name this page “results” in the sidebar.  This will end up being the http://yoursite.com/results.html page the we specified back in step #5.  Now design the page how you would like it to look leaving the main content area empty using your imagination that our results will be in the middle.

9) Now that you’ve created and designed the page add a text box onto the page and type in the text box this “%%GOOGLE SEARCH RESULTS%%” (without the quotes).  Then stretch the text box to be the size that you would like your results to be.  It has to be at least 800px wide (remember when we specified that in step #5) and you’ll want to make it about 875 pixel’s in height too. So adjust your design layout accordingly to this textbox size.

10) OK now, publish your website, either to a folder, your server, or mobileme.

11) Now before this can work, we need to go in and replace that crazy text I had you enter %%GOOGLE SEARCH RESULTS%% with our code.  So to do that we need to open up that results.html page we created with an html editor.  Again I like to use Coda or Espresso, but you can use TextEdit (if you go into the prefs and turn on the “Ignore Rich Text Commands in HTML” check box).  Do a find and replace option by pressing “command + f” search for our crazy text “%%GOOGLE SEARCH RESULTS%% and replace it with our results code.

Then hit save and put your files live online to test.

12) TaDah! Your finished.  Go visit your site and test it out to make sure it is working properly.

Troubleshooting:

Your page has to be online for it to work (you can’t test it locally because when you type something in the search box the results will only show up at http://yoursite.com/results.html, if your search is not working for any reason it could be that your results.html file is not in the right spot.  Also if your site is brand new to the web it might take some time for your results to show up because google hasn’t cached your site yet.  You can try to speed up this caching process by submitting your site into Google by going to http://www.google.com/addurl/?continue=/addurl

If you need to change where the results page is you change that URL in the google search box code.

I already know I’m going to get this question: Do I have to do this everytime I publish. The answer to that is yes and no.  Anything that we have to modify outside of iWeb (i.e. the results code), then yes we have to do each time.  So what I recommend for this tip is to have your results page in another site (file > new site), get your code setup, and published, then the main site you can update all you want and it won’t effect the results code page cause you won’t be needing to really update that page…really ever.  So just get that page online, then you can put the search box on as many pages as you want.

Any other questions feel free to leave in the comments below.

I’ve had a lot of requests for this in the forum, so hopefully this takes care of all your iWeb site searching needs.  I’ll probably make a video tutorial on how to do this in the near future for those that want to do the advanced search tip, but are a little overwhelmed or stuck.  So stay tuned for that.

If this tip helped you, consider donating to the iWebUnlimited cause by clicking here.  Thanks.

—iJason

There are times when your web design gives you little space for a lot of text.  That’s where this tip comes in handy.  This little bit of html in a snippet will allow you to size your snippet to really whatever size you want and the text will be scrollable  inside.  I’ve even added a bit more advanced code at the end that will allow you to add an image, a link, and more.  The user just uses a handy inline scrollbar to read your text and works very nice.  The other option on this page is to have a auto-scrolling text box.  I have one to scroll horizontally and another to scroll vertically.  They have a lot of options to adjust the speed, direction, font, color, etc.  So let’s get started.

See Demo »

1) Add an HTML Snippet to the page you want your scrollable text box to be.

2) Then paste this code into your HTML Snippet:

3) The code in red is where you’ll make adjustments to your own code for your own design specifications and the text in blue is the paragraph text you’ll put in.

4) After making your changes hit apply, publish, and your set! ;-)

Auto-Scrolling Text Boxes:

If you want an auto-scrolling text box then use this code below:

Horizontal Scrolling:

Vertical Scrolling:

That’s it, hope that helps.  If iWebUnlimited.com helped you please consider donating by hit the donate button on the sidebar.  Thanks for visiting iWebUnlimited.com.

—iJason

This tip shows you how to redirect a page to another page.  There are many instances where you might find you’ll need to redirect one page to another and this tip will show you how.  One example might be if you are using iWeb built in auto navigation and you want one of the links to actually go to an external page.  Another example may be that you’ve posted a page and many people are linking to that page from other sites, so you need to keep the same page up to keep the link, but you actually want to redirect them to another page.

So here is how to redirect your page to another page:

1) Go to the page that is going to be the redirect page.
2) Add an HTML Snippet onto your page and paste this code:

<script type="text/javascript">
parent.location.replace('http://yoursite.com/yourpage.html');
</script>

3) Then simply change the URL in the code to the page you want the page to be redirected to.
4) Then hit apply and your set.  You’ll find that once you publish your site and visit that page it will automatically redirect to the page you specified in the code.

Sometimes you want to redirect to another page after some time.  For example if you are redirect a user to another site you could send them to one of your pages that says something like “You are now being redirect to AnotherSite.com” then after 3 seconds or so it automatically directs them to the page.  To do that do the same steps as above, but simply paste this code below in an HTML snippet.

<script type="text/javascript">
var url ='http://yoursite.com/yourpage.html';
var delay = 3;
var d = delay * 1000;window.setTimeout('parent.location.replace(url)', d);
</script>

Then specify the URL and how long you want the redirect to delay and you’re set.

Hope that helps.

View Demo of Shadowbox in iWeb »

Step 1) Make a page in iWeb and add links to your media in one of the following ways:

Images: Drop an image on your page and enable as a hyperlink from the hyperlink inspector and link to “a file” and choose the same image (preferably a higher res version of the photo, at least 800 x 600).

SWF’s (Flash Files): Drop an image to represent the swf (could be an image, a shape, text, you could even launch your swf and do a screen capture (command + shift + 4) and drag over it to get an image to add in.)  Basically just get something that will be clickable that we can link to the swf.  After adding that image or whatever enable it as a hyperlink and link to the swf file itself.

HTML: Simply enable as a hyperlink your image, shape, text to an external page.

FLVs (Flash Video): Same as the swf, get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .flv file.

QuickTime: Same as the FLV and SWF.  Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .mov file.

WMV (Windows Media Video): Same as the FLV,SWF, and MOV.  Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .wmv file.

YouTube: Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to an external page.  Copy the you tube URL from you tube and paste it in URL field in iWeb hyper link inspector.  Then here your going to do one more step.  You need to alter the URL just slightly.  Your YouTube video code will look like something like this: http://www.youtube.com/watch?v=qKiIm5EcQ7A you need to alter it so it looks like this: http://www.youtube.com/v/qKiIm5EcQ7A, basically you delete the “watch?”, put a slash after the v, and get rid of the “=” sign. If you don’t do this your YouTube video for this effect won’t work.  So this is an important step for you YouTube users.

This effect works with many other video services like Vimeo, Google Video, Yahoo Video, etc.  For those sites you don’t need to alter the code like the YouTube, simply make a graphical representation for them and link them to an external page with the URL of the video in it.

Step 2) Publish your iWeb file to a folder, MobileMe, or FTP

Step 3) Download the Shadowbox .zip file by clicking the download link at the top of this page or click here ».

Step 4) Unzip the shadowbox.zip file (if your mac didn’t unzip it for you), and drop the folder called “shadowbox” into your site folder.  Not your page folder, your site folder.  You want the shadowbox folder to be right next to your html page.

Step 5) Open your html page (the one with your hyperlinks of course) with an HTML editor.  I prefer to use Coda, but again you could use an array of other ones out there (Espresso, TextWrangler, Even TextEdit)(if you use text edit be sure to check the checkbox in the textedit prefs that says ignore rich text commands in html files).

Step 6) Add this code before the </head> tag of your HTML page:

OR you could also just do a find and replace by finding:

</head>

and replace with

Where it says players, go ahead and delete any/all the players that you don’t need.  So for example if your not linking to an swf flash file, delete the ‘swf’, code.

Step 7) Find your hyperlinks that we created in iWeb in the html code here and add a

rel="shadowbox"

to your image links so it looks like this

<a href="myimage.jpg" rel="shadowbox" title=“Whatup”>My Image</a>

An easy way to find your links is to do a search for “title”, then you can spot the link code and put the rel=”shadowbox” right before the title tag.

For your video links you need to add a width and height dimension to it, so for all flv, swf, mov, wmv, html, and youtube like links you’ll need to add this code instead:

rel="shadowbox;width=640;height=480"

Just adjust the dimension to match your swf, webpage, or video. Here’s an example for a quicktime video.

<a href="mymovie.mov" rel="shadowbox;width=480;height=640" title=”My Movie”>My Movie</a>

You can also group items to together in a slideshow like way by adding a grouping text to all the shadowbox code you add to the links.  Here’s what it would look like:

rel="shadowbox[Group]"

Just be sure to add that [Group] to all the links you want to be connected.  You can have 2 or more seperate groupings by just making a different text group like [Group2], and add it to the other ones you want to group.

For YouTube videos you have to use this code:

rel="shadowbox;width=425;height=344;player=swf"

Same princible goes with adjusting the width and height for your YouTube video.  So your YouTube link would look something like this:

<a href="http://www.youtube.com/v/qKiIm5EcQ7A" rel="shadowbox;width=425;height=344;player=swf" title="YouTube Video"><img src="my_webpage_files/flash_in_iweb-youtube.jpg"

Step 8 ) While your in adjusting your links adding rel=”shadowbox” code, you should probably change your “title” code to say something more relevant than just the path to your file.  So where you see the title=”big_long_link_files/this_is_not_a_good_title.html”, change it to say something else like title=”Check out my cool photo” or whatever.

Step 9) Hit Save and your done! Yay!  Make sure all your files are online, test it out to make sure it’s working properly and your set.

There are many other options that you can add for advanced users that I won’t go into here, but you can check them out by going to http://www.shadowbox-js.com/options.html.

Note: Shadowbox can be used for free for non-commercial websites.  If you are going to use it for commerical purposes you must purchase a license.  You can do that by visiting their website at www.shadowbox-js.com.  Also included with the iWeb version of shadowbox that I have made is a JW FLV Player.  It also can be used for free for non-commercial websites.  If you use the JW FLV Player to play flv files for commercial purposes you must purchase a license.  You can do that by visiting https://www.longtailvideo.com/players/order2.

**Also note that this effect cannot be used with links using a shape or text box. Link only a true graphic (jpg, png, gif, etc) or link the text itself.

I know it can get a bit complex getting into the code, especially if you’ve never really dealt with html code much before.  But just take it slow and go step by step and you’ll get it.  If you mess up, just go back to iWeb and republish and you can start over.   I think this is the best of the popup effects cause it deals with all media formats so easily.  So I hope you enjoyed the tip and if you feel like this helped you in some way consider donating to the iWeb cause.  The more donations I get the more time I’ll put into making more tips like this.

Thanks for visiting iWebUnlimited.com

—iJason

Facebook and Twitter in iWeb

So you have an iWebsite, you have a FaceBook account, and you have a Twitter account.  You want people to visit your website, but you also want them to visit your facebook, but you also want them to follow your tweets.  What is the solution?  Well, bring them all into iWeb of course (big cheesy grin here).

Adding these to your website is quite simple.  It’s simply a matter of getting code from facebook and/or twitter (that they provide) and putting them in an HTML snippet.  Here’s how:

View Facebook Demo »

View Twitter in iWeb Demo »

Adding Facebook to iWeb

First off there are a few different ways to get Facebook on iWeb.  Either put a Badge (a customizable way to share your Facebook information), Fan Box (a social widget that allows Facebook Page owners to attract and gain Facebook fans) or a Live Stream Box (which allows others to connect to their facebook account on your webpage and update their status about something on your site on their facebook within your site).

Facebook Badge:

Simply go to www.facebook.com/badges.php, it will then ask you to log in (if you don’t have an account, where have you been, get one here). Then you will see a button that says “Create a New Badge”.   You will then see many options to customize your badge between two categories, Layout and Items.  All these option depend on your preference for your site.  As far as orrientation you can choose if you want a vertical, horizontal, or 2-columns badge.  Then you can choose what items you’d like to be on your badge by simply checking on the ones that you want.  Hit save, then you will be given some code to copy.  At that point jump into iWeb, grab an HTML snippet, paste code into snippet and hit apply.  All done.

Facebook Fan Box:

To have a Fan Box you must create or have created a page for a band, business, etc.  You can’t do this for your personal profile page (that’s what the badge is for).  You can create a page from facebooks homepage.  Below the sign up form, there is a button that says “Create a Page”.

For this one go to www.facebook.com/developers/wizard.php, choose Fan Box button on the left, then choose which page you’d like to make the fan box for under the drop down menu.  You have 2 checkboxes of option you can add; 1) Include Stream (status updates) 2) Include Fans.  It gives you the code right away for you to paste into an HTML snippet.

The Javascript code that the wizard generates looks similar  to this:

You can change the items in red even after you’ve pasted it into an html snippet. Here’s a little explination of the customization options:

• profile_id: The ID of the Page associated with the Fan Box. Specify either the profile_id or the name, but not both.
• name: The Page’s name (the name after the final backslash) or username (if one was specified). Specify either the profile_id or the name, but not both.
• stream: Set to 1 to display stream stories in the Fan Box or 0 to hide stream stories. (Default value is 1)
• connections: The number of fans to display in the Fan Box. Specifying 0 hides the list of fans in the Fan Box. You cannot display more than 100 fans. (Default value is 10 connections.)
• width: The width of the Fan Box in pixels. The Fan Box must be at least 200 pixels wide at minimum. (Default value is 300 pixels.)
• height: The height of the Fan Box in pixels. The height defaults based on the elements you include in the Fan Box. For a Fan Box that contains only the Become a Fan button, but no stream or friends, the height is 64 pixels. If you include all the features, the Fan Box is 554 pixels high. If you change the number of connections shown, you may need to edit the height to ensure they are all visible.
• css: The URL to your own style sheet. See fb:fan for policies on using your own CSS.

The rest are pretty self explanitory. Now there are a few known issues with this in iWeb.  First off when you hit apply the widget automatically resizes the height to 10,009px (which is way to super long for any website), so this is easy to fix, just click on your snippet and go into the metric inspector (that’s the one with the ruler) and adjust the height to about 90px if your using the simple one without the stream and fans and at least 554 if you are.  The other issue (at least that I’ve found) is that it seems that it is not compatable with the iWeb browser so you won’t see it show up in iWeb (which makes is hard for layout purposes), but when you publish it it will be there and you’ll see it.  Yay!

There is another option if you want to make sure you see it in iWeb.  You can do a Facebook Fan Box in an iFrame instead.  They incourage you to use the javascript one that is the default, but you can also use this iFrame code below:

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=YOUR_PAGE_ID&connections=10&stream=1" allowtransparency="true" style="border: none; width: 300px; height: 550px;"></iframe>
<div style="font-size:8px; padding-left:10px"><a href="URL_TO_YOUR_PAGE">PAGE_NAME</a> on Facebook</div>

Here’s some things you’ll need to do to make sure this works:

• You need to specify your Page ID in the iframe src attribute (You’ll find your page ID at the end of your page’s URL, only the numbers).
• You also must specify the URL to your Page in the anchor tag in the div.  You can choose to hide the stream from the Fan Box by changing 1 to 0 in the stream URL parameter.
• You can modify the number of fans to display by changing the setting for the connections URL parameter. Setting connections to 0 hides your fans. You cannot specify more than 100 fans.

And that’s it! Few!

Facebook Live Streambox:

This option pretty much works exactly like the Fan Box, but it has a different purpose. The Live Stream Box is a social widget that lets users visiting your site or application share activity and comments in real time. The Live Stream Box works best when you are running a real-time event, like live streaming video for concerts, speeches, or webcasts, live Web chats, webinars, mass-multiplayer games, and more.

The Live Stream Box lets users:

• Log in to your site using their Facebook accounts with Facebook Connect.
• Communicate and share with each other and their friends in real time at large scale (supporting millions of simultaneous users).
• View what their friends are saying as well as the general audience viewing the live stream.
• Comment on and “like” their friends’ posts.
• Share their updates directly on their Facebook profile and in their friends home page Streams. Each story on Facebook includes a link back to your site (through a URL you specify).

Implementing it into your site works the same way as the Fan Box.

Adding Twitter to iWeb

There are a few ways to add Twitter to iWeb as well.  You can create a Twitter Profile Widget (Color & Size customizable profile widget), Flash Widget (Flash 9 Required), or a HTML Widget (simple text with your updates).

Twitter Profile and Search Widgets:

To get this Twitter Widget go to www.Twitter.com/goodies/widget_profile, it will then ask you to sign in.  You’ll then be presented with 3 options; for your website, for facebook, or for myspace.  Obviously we want to choose the option “My Website”.  Then it gives you an option to choose a Profile Widget or a Search Widget.  The profile widget is a listing of your your Tweets (updates).  The Search Widget is a customizable widget that allows you to show when people are talking about a certain topic or event.  We’ll start with the Profile Widget.

When you choose Profile Widget you get three options to customize; settings, appearance, and dimensions.  Go through each section and adjust it as you see fit to match the colors and size of your site, when finished click the button that says “Finish and Grab Code”.  At that point simply copy the code, grab and HTML snippet and paste in your code and your set!

When you choose a Search Widget you get the same three options of settings, appearance, and dimensions.  The difference is in the settings you can set what search criteria is loaded in.  So for example you might put in “iWebUnlimited.com” for the search.  That way you can see what people are saying about that topic on the whole planet of Twitter.  Kindof a cool way to bring all the topics of a certain subject to one place.  Again once you’ve adjusted all your settings and such, hit the “Finish and Grab Code” button, paste the code into an HTML snippet in iWeb and your set.  You have successfully implemented Twitter into iWeb, give your self a pat on the back.

Twitter Flash Widget

To get the flash widget go to www.Twitter.com/widgets/which_flash, it will first ask you to sign in (if you don’t have an account, get one here), then you will be presented with 2 options, for either an Interactive Flash Widget or a Display-only Widget.  It’s all preference here on what you’d rather have on your site.  Choose which ever you’d like, then hit continue.

If you chose the Interactive Flash Widget you’ll be presented with 3 styles; smooth (dark glossy look), velvetica (white stylish look), and revo (a red sunburst style).  Then you can choose if you want it to be narrow, wide, or full.  Of course both of these options depends on how you want it to look in your iWeb site.  So choose which ever fits best and you will see the code before you.  Simply copy and paste it into an HTML snippet and your set.

If you chose the Display-only Flash Widget then you are taken to a page where you can change the color and that’s it.  Then just copy and paste the code into an HTML snippet and your set.

Twitter HTML Widget:

To get the HTML widget go to www.Twitter.com/widgets/html_widget, this is a simple but customizable way to get your tweets on your iWebsite without requiring people to have flash player (this means it will show up in Safari on the iPhone).  You have a few options here at start, to show how many Tweets you’d like to have up at a time, and if you’d like a title.  Copy and past the code into an HTML snippet on your page.  Hit apply and you have successfully added the HTML snippet to your page.

Now to style it a bit.  At this point it’s a pretty plain bit of text. But the nice thing is that we can really style this however we want.  First of all you can adjust the size of the snippet to whatever you want, and to change the font and colors use this block of code below and paste it at the top of your code.

<body text="#4C4C4C" link="#4167BE" vlink="#000000" alink="#4167BE">

<font face="Verdana, Arial, Helvetica, Geneva"><font color="4C4C4C"><font size=2.5>

If your not sure how to get the hex color values use this handy little color picker from Google Gadgets.  Style as you choose, maybe even put a cool background behind it, whatever you’d like, and you’ll have a nice little widget that’s more compatable, and more styled to your liking than any of the other Twitter widgets.

That’s all for this tip.  Hope you enjoyed getting your social network on iWeb and if you have any questions on this at all feel free to leave a comment below.  And if you found this tip helpful, please consider donating to the iWebUnlimited cause.  Thanks again.

—iJason

So the first thing is that when you add a new page to your site in iWeb there is always a title box, even when you choose the blank template page.  Many people delete this text box when they are making a custom design, but don’t do it!  Try to make it so everypage has this text box on the page.

The problem lyes in that the text box can’t leave the header part of your page, so it almost forces you to use that textbox in your design.  But what if you don’t want to use that text box cause you want a lot of words to be part of your page title (meaning the part that will show in the browser top like this image)

But you don’t want it to be on the actual page.

So what you can do is put this text box really small at the top of the page and give it a good title and change the color to be the same as the background.  You do that by using the little magnifying glass on the color picker and click on the background.  That way you’ll be sure to get the right color. By doing this it will help you to have a good title for your page and it’s not seen.  And this way you can make your own design without being forced to really use that box in the design (if that makes sense). Here’s an image to show it better:

Sometimes you have an object, and image, or possibly a flash object in the header of your page you can just use the arrange menu on the menu bar and send it to the back (or press command + shift + B).  That way it’s not seen but you can still have a good title.  Notice my image below.  I turned on “Show Layout” by pressing Command + Shift + L and you can see that I sent the text box behind the top image.  That way it won’t be seen but I can have a long title, that will fully describe my page and help my web searchability out.

View Demo »

The built in iWeb Navigation:

First as you probably have noticed iWeb gives you a navigation menu at the top of the page automatically and with each added page it adds a new text button at the top that is the same name as whatever you named your page in the sidebar.  It’s pretty convenient sure, but lacks any constumization at all to out site.  So if you want to keep it simple than just keep the built in navigation

Your own Text Navigation:

If you want to have a similar look as the built in navigation, but want to customize it.  The first thing to do is to go into the page inspector > Page Tab, and uncheck “Display navigation menu”.  That will take the auto-navigation off.  But now you have no links or ways to get to the other pages of your site.  So what you do is, simply make a text box type the name of your pages as you want them to appear, style it (i.e. fonts, sizes, etc, but don’t worry about color yet), then go to the hyperlink inspector and highlight the text word button one at a time and enable them as a hyperlink going to your pages.  Then go into the Hyperlink Inspector > Format tab to style the colors of the “Normal” state, the “Rollover” state, “Visited” state, and “disabled” state.  Then your done.  Copy and paste the text box onto all the other pages now and you have yourself a cutom text navigation.

note: I recommend creating all of your pages first, then make your Text Navigation so that you can link them to the pages and proceed to copy them to the other pages as well.  Also remember that any font that is not websafe could cause problems.  So if you font is a special font you can guarantee that the font will show up by making it an image.  To do that go to the Graphic Inspector and give the text box a shadow then bring the shadow opacity down to 5%.  You won’t be able to see the shadow, but now your text will be turned into an image.

Graphic Menu:

Another great way to stylize your navigation is to use graphics in iWeb.  You can use the shapes to create some pretty good looking menus.  Here’s an example simply using two rounded cornered square shapes and a text box.

Here’s my quick workflow for this menu: 1) Create shape 2) Size shape according to site size desires 3) Add gradient color with darker on bottom and lighter on top 4) Add 2pt white stroke 5) add shadow 6) Duplicate shape (Option + Drag shape, now you have to of the same shape) 7) On 2nd shape, remove shadow and stroke, and change top gradient color to white with 26% opacity and bottom gradient color to white with 11% opacity. 8 ) size the 2nd shape so it’s half the size height-wize as the 1st shape.  (this effect gives you the shine look) 9) Add stylized text box over the top of shapes.

Photoshopped Rollover Menu:

If you really want to spice up the graphic menu and own photoshop, then here’s a cool way to do it.  Take the same graphic menu that we created earlier and copy and paste it into photoshop. To do that you hightlight the 1st shape and press command + c to copy, then jump over to photoshop and press command + n or File>New and photoshop will see that you have something copied to the clipboard and will default to that size.  But you need to change the color mode from “Greyscale” to “RGB Color”.  Then press comman + V in photoshop or press Edit>paste and your shape you made in iWeb will be in photoshop.  You’ll need to add a shadow to your shape here (if wanted/needed) cause the shadows don’t copy over.  You can then copy and paste your highlight shape (the 2nd shape) in there too.  You can even copy and paste the text box if you want also, but you can just as well type the text in photoshop too.  Once it looks pretty good in photoshop, hold your mouse down on the crop tool until you see the slice tool.  Use that to draw boxes over the different buttons of your menu.  For example our graphic menu above has 5 buttons on it, so you would draw 5 squares with the slice tool.  Then choose file > save for web & devices, and be sure that it says to save as a PNG 24, choose your location to save and file name (I recommend naming them “up”) and hit save.  You will then see the result is a folder called images with your 5 sliced boxes as individual graphics.  These are your “Up” graphics.  Meaning this is what the buttons look like when they are just sitting there…when their up.  Then you go back in and find the main shape layer and use some photoshop trickery to change the color slightly.  You could change the hue so it’s a different color, the brightness, etc.  Whatever you do, we just want something that looks different.  So that when they rollover they see something change.  It could even be the text.  Once you have that looking different, choose file>save for web and devices again, save as PNG 24, choose save location (should be the same place as before), name (I recommend “over”), and hit save.  You will then have another images folder with your “over” images.  These are the images that will swap out when the user rolls their mouse button over the graphic.  We now need to put these graphics on our server (meaning MobileMe iDisk or your own server from say GoDaddy, iPower, BlueHost, etc). At this point go to my rollover tip and follow those instruction on how to get the rollover effect now that you have the graphics, and the result is something like this:

You can see the working version in the demo.  If you’d like here is the photoshop file you can download to get you started.

Drop Down Menus in iWeb:

This is a big one.  I’ve had a lot of request for this.  The problem with drop down menus is that they get a bit complicated.  I wish they were as easy as a simple html snippet to paste in, but it’s not.  So I’ve tried to make this as simple as possible.  To do this you must understand (and I’ll try to explain this the best I can) that the first and foremost problem with putting dropdown menus into an html snippet is that drop down menus require a lot of room to drop down over the top of your content and every object in iWeb (shapes, text boxes, snippets, etc) is layered, meaning one is above another.  So what happens is that the html snippet needs to always be on the top layer above all your text boxes and shapes, etc, but if you have any links under your snippet they will not be clickable because you snippet needs to be as big as your longest and widest drop down link and everything else on your page will be underneath it, again making any links under the snippet unable to be clicked.  So I’m going to show you first how to get around this with out using html snippets where we modify the code after publish to get the desired effect.  Then I’ll show you how to do this using HTML Snippets (as long as you understand that everthing under your snippet will not be clickable ;-).

1) Drop Down Menu without HTML Snippet:

First simply make your links from a text box.  Similar to our text navigation above.  Then simply publish your iWeb page.  Find your publish html page and open it with an HTML editor (coda, espresso, textedit, etc) and add the below code right before the </head> tag:

You then change the code to customize it to your site and style.  The items your going to want to change are the items outlined in the comment code.  You’ll see to change font size, color, and most importantly your links which are outlined by “Menu1″ and “Menu2″

Then you find in the code the text that you linked and add the line of code in blue, making sure the code looks like this:

<a href="My_Page_in_iWeb.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()" title="My_Page_in_iWeb.html">The Linked text that people see</a>

You’ll notice that in the head tag code there is text called menu1 and the link code that matches also has a menu1 in it.  That how you put them together, and you can add as many sublinks as you’d like in the head code where the menu1 is.  Just copy the line and keep adding another menu1[3], etc etc.  That is only for one button.  If you have more buttons that need it, just copy the whole menu1 part in the head code, paste it below the 1st menu1 part and change it to menu2, then in your links do the same and change it to say menu2 and so on (Hopefully that makes sense).  Once your done, just save it and your in business.  Be sure to test it out, once it is working successfully put online and your set.  I’ll have a video tutorial on this as well as I tend to do with the more complicated tutorials.

2) Drop Down Menu Using IzzyMenu:

Another way to create drop downs is to go to IzzyMenu.com.  It’s totally free (just dodge the ads), then you can build a drop down menu in a nice little drop down menu creator, then they let you download your complete menu.  Once downloaded you’ll see some ads on it, you can get rid of these by opening up the IzzyMenu.html in an editor and delete this last line of code:

<div style="clear:both; text-align:center; padding:10px;"><a href="http://www.templateo.com"><img style="border:1px solid black;margin-bottom:5px;" src="templateo600x100.jpg" /></a><br /><a href="http://www.izzywebsite.com/go?izzymenudownload"><img src="download.jpg" border="0" /></a></div>

You can also delete the ad images usually called “download.jpg” and “templateo600×100.jpg”.  Alright, we’re almost ready.  You need to do one more thing to make it work properly in iWeb.  Because it’s going to be in an HTML Snippet we can’t have the links be “_self” links, we need them to be “_parent” or “_top”, so we need to go through our links in the IzzyMenu.html and make sure all the links open with the “_parent” code. So add this code target=”_parent” after each link so it looks like this:

<li class=”item_active“><a href=”http://www.iwebunlimited.com” target=”_parent“onMouseover=”cssdropdown.dropit(this,event,’dropmenu_101′)”><span>iWeb Tips</span></a></li><li><a href=”http://www.iwebunlimited.com/videotutorials/videotutorials.html” target=”_parent”><span>Video Tutorials</span></a></li>

<li><a href=”http://www.iwebunlimited.com/links.html” target=”_parent“onMouseover=”cssdropdown.dropit(this,event,’dropmenu_104′)”><span>Links</span></a></li>

<li><a href=”http://www.iwebunlimited.com/qanda/qanda.html” target=”_parent“><span>QandA</span></a></li>

<li><a href=”http://www.iwebunlimited.com/html_snippets.html ”target=”_parent“><span>HTML Snippets</span></a></li>

Now that your links are working, you might notice the code in red.  That is what button you would like to have active on the page.  So if you wanted, you could make a duplicate of this menu for each button on your menu and just move the red code around to go on the page you want active.  If you don’t want it, just delte the code.

And boom we are done.  Post the Izzy Menu including all the folders that came with it on your server, perhaps in a folder called “izzymenu” and test it out by going to your url. i.e. http://www.mysite.com/izzymenu/IzzyMenu.html or http://web.me.com/myusername/izzymenu/IzzyMenu.html (mobileme users put the izzymenu folder in the idisk>Web>Sites>here).  Once you see your menu is working, we use the iFrame code to get it into iWeb.  Yay! We’re set.  Again remember that because it’s in a snippet any links under the drop down won’t be clickable.

3) Other Drop Down Menu’s to iFrame in:

• You can get similar drop down menu effects like the IzzyMenu at some of these links
• http://www.cssplay.co.uk/menus/pro_horizontal.html (Free)
• http://www.lwis.net/free-css-drop-down-menu/ (Free)
• http://greengeckodesign.com/projects/menumatic.aspx (Free)
• http://www.opencube.com/index.asp (Not Free)

CSS Play Download »

Free CSS Download »

Menu Matic Download »

Flash Menus:

Flash navigation can sometimes add a neat look and feel to your site and over 90% of all computers have flash installed on their machines.  But as we most know, that the iPhone does not have flash, as well as many other mobile devices.  So that’s why if you go this route you add some text links at the bottom of the page.  That way people can still navigate if they don’t have flash.

Simply go to FlashComponents.net and browse through their emence library of flash menus and purchase it, modify it (usually using the xml code), post it, and iFrame it in.  Don’t forget to make sure your links are _parent or _top.

Hope this helps you get some great navigation menus in iWeb.

View Demo »

Step 1) Download Lytebox by clicking here »

Step 2) Add images to your iWeb page and make them a hyperlink (as a file) to itself (the same image).

Step 3) Publish your iWebsite to a folder, iDisk, or server.

Step 4) Add the “lytebox” folder you downloaded in step one to the site folder (not the page folder)

Step 5) Open html page (the one with the images linked to itself we did in step 2) in an HTML editor.  I like to use Coda (by Panic Software), but you could use TextEdit (if you check on ignore rich text commands in HTML files checkbox in the preferences of TextEdit), or Espresso, TextWrangler, etc, etc, there are a bunch.  Just something that you can edit HTML in.

Step 6) Right above the </head> tag in the HTML, paste these lines of code.

<script type="text/javascript" language="javascript" src="lytebox/lytebox.js"></script>
<link rel="stylesheet" href="lytebox/lytebox.css" type="text/css" media="screen" />

Step 7) Then find where your image links are and add a rel=”lytebox” in between the link and the tittle tag. For example, here is what your looking for in the HTML:

<a href="mypage_files/my_image.jpg"  title="Image Description">

Put the rel=”lytebox” inbetween the image link and the title tag so it looks like this:

<a href="images/image-1.jpg" rel="lytebox" title="Image Description">

Step 8 ) Save and that’s it your done.  You’ll have a cool image popup effect, similar to highslide or fancyzoom, but slightly different.

Options: (If you dare :-))

Grouped Images:

If you want to have the images scroll through with a cool next and previous button to the lytebox, then instead of adding rel=”lytebox” in between the image link and title tag, add rel=”lytebox[group1]“to each image link and there will be a neat navigation to cycle through the images.  Here’s an example of what the code would look like:

<a href=”images/image-1.jpg” rel=”lytebox[group1]“ title=”Image Description”>

You could have multiple sets on one page too if you change the group1 to something like group2 for all the ones you want in a seperate group and so forth.  Click the example button above for reference.

Keep in mind that the images will scroll through in the order they were dropped onto the page (not necessarily the order top to bottom that you have them in on the page.  So be sure to add images to the page in the order you want them to show up in the lytebox effect.

Lytebox Slideshow:

You can also have a little slideshow effect in the lytebox popup by using rel=”lyteshow[group1]“ instead of the rel=”lytebox” (single images) or rel=”lytebox[group1]” (multiple images).  So your link code would look like this:

<a href="images/image-1.jpg" rel="lyteshow[group1]" title="Image Description">

iFrame Content in Lytebox:

If instead you want a webpage in the lytebox effect instead of an image, then simply add a link to an external page (it could be one of your own pages).  Find the code in the html where your link is and add rel=”lyteframe” instead of the others above.

Note: When using this effect it only works with highlighted text links (not textbox links) and image links.  It does not work very well with iWeb shapes for links.  For those, use the Highslide effect.

When applying the Lytebox effect it will take a default width and height of 400px and scrolling is set to auto.  If you want to control how big the frame is for your iFrame then add this code in your title tag

rev="width: 400px; height: 300px; scrolling: no;"

Replace the items in the brighter red to the size you want and your set.  Here is an example of the full link code as an example:

<a href="http://www.google.com" rel="lyteframe" title="Search Google" rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>

You could even group pages together like we did with the images above by using this “rel” tag instead: rel=”lyteframe[group1]

Another note on doing this if your using iFrames on your iWebpage: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while including lytebox.js in the iFrame document.  They are both found in the lytebox folder.

Browser Compatability:

This effect was built with browser compatability in mind, so it’s safe to say it works on most all browsers.  The following browsers have been tested with this script:

IE 5.01 SP2 – The fade effect does not work, but the background is darkened (completely).

IE 5.5 SP2 – No known issues.

IE 7.0 – No known issues.

Opera 9.23 – No known issues.

Firefox 1.5+ – No known issues, of course.

Safari 2.0+ – No known issues, of course.

End Notes:

Well that’s it folks.  Hopefully it’s not to crazy for you.  Like I’ve said in other posts.  I usually don’t like having to get into the HTML code after publish if possible, but sometimes to get a cool effect you just gotta.  So don’t work yourself up to much if you don’t get it the first time.  A simple republish in iWeb will let you start over and try again (though I recommend publishing from the File menu with the publish entire site option to get a clean full publish).

View Demo »

Highslide with Images |   Highslide with Flash Files |   Highslide with iFrames

To get started I will separate the tip into Images, Flash, and iFrames (which would include any other html page (websites, videos, youtube, etc)).  Here we go:

Highslide with Images:

Step 1) Add an any image(s) or graphic(s) to your page in iWeb.

Step 2) Open up the inspector and make it a hyperlink in the hyperlink inspector.  Choose to Link To: “A File” and choose the same image (so it basically it is linked to its self).

Step 3) Publish site to Folder, Server, or MobileMe iDisk – Whatever your method is.

Step 4) Download files. I’ve made a special iWeb version of Highslide to simplify things.

Step 5) Unzip the downloaded file called “highslide_iweb.zip” and you will see a folder simply called “highslide”.  Drop that folder into your published site folder (not your webpage folder).  When publishing iWeb makes a index.html file and your site folder (named whatever you named it in iWeb), this is the folder you want to drop this highslide folder into.)

Step 6) Open your favorite HTML Editor (Coda, Espresso, TextEdit) and you are going to find and replace the code below:

Find:

</head>

Replace with:

Step 7) Now we’re going to find and replace one more item:

Find:

title="pagename_files/imagename_1.jpg">

Replace with:

title="Click to Enlarge" onclick="return hs.expand(this)">

When it says “pagename” that means whatever the title of your webpage you are doing this one in the sidebar of iWeb and imagename is the name of the photo you put on the page.  If your not sure what these names are, you can go back into iWeb and take a peek.  Here’s where you will look.

So for example if I was wanting this effect on my page called “iweb09” in my sidebar and my image was named “myimage.jpg”, then my replace code would be:

title=”iweb09_files/myimage_1.jpg”>

Important Note: If you are linking to a shape made in iWeb take off the “>” tag at the end of the search and replace. If you are linking an image to text get rid of the “_1” at the end of the find code.

Basically your are replacing the “title=…” tag of your items.  So if your having a tough time finding the right items to replace just do a search for “title” and copy that whole line “title=”mypage_files/myimage_1.jpg”>” and paste it to replace with the other code.

Step 8 ) Save your modified html file online and your good.

Highslide with Flash Files:

I’m going to go through the flash one a bit faster assuming you’ve gone through the image one already. So I’m just going to give you the quick steps:

1. Make flash file (Adobe Flash, Keynote, Bannersnack, etc) be ready to link to it on your hard drive.
2. Make or get an image or button to represent that file (this will be your button.  It could be anything really, text, shape, image, etc) and put it on your iWeb page.
3. Link image/button to .swf file from the hyperlink inspector as a “A File”
4. Publish site
5. Add “highslide” folder to published site folder
6. Open your html page with HTML editor and find and replace the following code:

Find:

</head>

Replace with:

7) Now find and replace these:

Find:

title="pagename_files/flashfile.swf">

Replace with:

title="Click to See Flash" onclick="return hs.htmlExpand(this, { objectType: 'swf', width:300, objectWidth: 300, objectHeight: 250, maincontentText: 'You need to upgrade your Flash player'  } )">

8 ) Replace the items in red with your page name, flash file name, file width (twice), and height.
9) Save your page make sure it’s online and your set.  It looks pretty cool.

Highslide with iFrames:

Again I’m going to go through this one fast assuming you’ve gone through the image one already. So I’m just going to give you the quick steps:

1. Create or Find your webpage that you’ll be iFraming in the highslide zoomer and put it online.
2. Make or create an image or button or text that will pull up this iFrame when user clicks on it and make it a hyperlink in the inspector to “An External Page” and type in the full address of the page (example http:www.iwebunlimited.com/iwebtips/iwebtips.html)
3. Publish site
4. Drop “highslide” folder (downloaded from above) in published site folder
5. Open html file with html editor and find and replace the following code:

Find:

</head>

Replace with:

6) Then find the following code and replace it:

Find:

title="http://www.yourlinkyouadded.com">

Replace with:

title="Click to Enlarge" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">

7) Replace what’s in red with the size your want the highslide to be and the page you linked to. Save online and your set.

Note: If you have a page that has all of these items images, flash, and iFrames.  Use this code to replace in the <head> tags as the first thing you replace

Find:

</head>

Replace with:

Then replace the second one’s with the ones above in their sections with their links.

It makes for a pretty neat effect.  Hope you find it helpful and if your not very comfortable using external editors, just take it slow, be very careful of your code and if you mess up, no big deal, just republish from iWeb and it’ll be brand new again to try again.

Back to Top

See Demo

Step 1) Make 2 graphics. One that is the up/normal state, or what you want to be up when the users mouse is not over the image.  Then make the other graphic the rollover state or what the graphic will look like when you roll the mouse over it.

Step 2) Size those 2 graphics as small as you can get them without losing quality.  Photoshops save for web features works good for this, but you can get this effect just as easy by opening it with Preview and saving as jpeg and adjusting the quality.

Step 3) Put those 2 graphics on your server.  You can use the iDisk with MobileMe or your own server.  Just make a folder somewhere on the server perhaps call it “rollover_images” or something like that.  If your putting it on MobileMe make the folder in this location: iDisk/Web/Sites/rollover_images . Then the URL to the images will look something like this: For MobileMe—http://web.me.com/username/rollover_images/rollover.jpg or if you using your own host it would be —http://www.yoursite.com/rollover_images/rollover.jpg in which you would put the folder right on the root level of your public server.

Step 4) Then simply copy the code below and paste into a snippet.

<script type="text/javascript"> function mouseOver()
{document.rollover_one.src ="http://web.me.com/username/rollover_images/rollover.jpg"}
function mouseOut()
{document.rollover_one.src ="http://web.me.com/username/rollover_images/normal.jpg"}
</script>
<a href="http://www.your_button_link_here.com">
<img alt="Link Title" src="http://web.me.com/username/rollover_images/normal.jpg" name="rollover_one" width="175" height="175" onmouseover="mouseOver()" onmouseout="mouseOut()" style="border: none;"/></a>

Step 5) Replace what’s in red with your URL’s to your images and image sizes and put in what link you want it to go to by replacing the iwebunlimited link and your set.

Note: If you’d like the link to open in a new page replace the link

<a href="http://www.iwebunlimited.com">

with

<a href="http://www.iwebunlimited.com" target="_blank">

View Demo »

iWeb Player |   Google Player |   Yahoo Player |   Odeo Player |   Premium Beat Players

Using the Built in QuickTime to play Audio:

First of all iWeb does have built in support to play music or any audio file by default by simply dragging in an audio file. By doing that you get a QuickTime looking playbar, they even give you the option to add a picture (album art) to the player if you choose. It looks like this:

But if you don’t drag an image  into the box, it will disappear leaving only the playback controls, which is sometimes all you want.  iWeb also gives you some options for music in the QuickTime inspector.  It gives you the option to 1) Autoplay 2) Loop Song 3) Show controller or not.

I know some of you have asked about playing music on your site for just background music, well this is one way you can do it.  Simply drag a song in, have it auto play upon opening, and leave the controller so people can stop the music if they’d like, presto your set.

Google Player:

If you want a playback player there are many options and Google is one of those choices.  The thing I like about this player is that it’s simple and it has no branding on it.

To use this MP3 player on your website or blog, copy-paste the following code into an html snippet and replace the MP3_FILE_URL with the link to your MP3 file.

<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=MP3_FILE_URL" width="400" height="27" allowscriptaccess="always" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" />

In other words, find your MP3 you want to stream to your site, and throw it on your iDisk or on your own server.  If your doing it on your iDisk go to iDisk>Web>Sites>Then make a folder here called “mp3” and put your MP3s in there.  Then your link to replace in the red will be http://web.me.com/username/mp3/mymp3file.mp3 and that’s it. If your using your own server, it would be similar.  Make a “mp3” folder on your server, then drop your MP3s in to that folder and your link will be http://www.mysite.com/mp3/mymp3file.mp3

Note: I would recommend naming your mp3 files with no spaces to make the URL easier.

Advanced Tip: You’ll notice that the Google player is coming from googles site.  If you don’t want to rely on Googles site to provide the player.  You can download it Here » (courtesy of me ;-) Your Welcome).  Then just put that player in the same mp3 folder you made and change the google link in the code to link to your downloaded player and your set!

Yahoo Player:

The new Yahoo player works a bit different, put the mp3 files in the mp3 folder on your server (like we did with the Google Player) and add this code to an HTML snippet and replace the link in red.

Note: You can resize the widget how you’d like so that they would be in a column or a row.  Has a very Mobile iTunes Store feel to the player.

Odeo Player:

Same idea as before.  Add code to a snippet and replace the red with the link to your mp3 URL.

<embed type="application/x-shockwave-flash" src="http://www.odeo.com/flash/audio_player_standard_gray.swf" width="400" height="52" allowScriptAccess="always" wmode="transparent" flashvars="audio_duration=DURATION&external_url=MP3_FILE_URL" />

Note: This player can be downloaded to put on your own server so you don’t have to rely on Odeo’s server.  Here’s the player to download and put on your own server, then just change the odeo link in the code to your own server linking to the odeaplayer.swf

Premium Beat Players:

These players work the same way, but you’ll do one extra step.  This one you have to have the player on your own server.  So you’ll first download the player (provided below), then put the player on your server/iDisk in “mp3” folder or perhaps even make one more folder in the mp3 folder just for these players, paste code into html snippet, change links to your player .swf, .js. & .mp3 files and your set.  Here are the players

• Mini Player—Download Player »

HTML Snippet Code:

Note: If your using your own server the links will look like this instead.

http://www.mysite.com/mp3/playermini/swfobject.js

http://www.mysite.com/mp3/playermini/playermini.swf

http://www.mysite.com/mp3/mymp3file.mp3

Also note that you don’t have to have the files in these exact locations you can put them where you want just make sure your URL points to the exact place.  You can also change the “no” to “yes” in the autoplay part of the code.

• Single Player—Download Player »

HTML Snippet Code:

• MultiMenu Player—Download Player »

HTML Snippet Code:

This one works pretty much the same, but the big difference is that you tell the player where the mp3 files are by the .xml file.  So in the download you’ll see an .xml file, open in up with an html editor (Text Edit will do), I prefer Coda myself and just change the path to your mp3 file and change the name.  Here’s an example below.

• Multi Player (Playlist Player)—Download Player »

HTML Snippet Code:

This one is the same as the multi-menu player where you will have to edit the xml file to point to your mp3s.  Again open up the .xml file in an html editor and change the path of the mp3 files and titles.  Save that, upload it to server, make sure code is pointing to the right spot and your set!

Again just to make clear, if your using your own server your link won’t be from the iDisk it will look like this:

http://www.mysite.com/mp3/playername/swfobject.js

http://www.mysite.com/mp3/playername/playermini.swf

http://www.mysite.com/mp3/playername/player.xml

http://www.mysite.com/mp3/mymp3file.mp3

Hopefully that’s all not to confusing.  It’s kindof fun to put music or audio files on your webpage and hopefully this gives you some great options that you can do that easily.  Remember not to put any mp3’s that are copyrighted and owned by another artist (there now I’m covered ;-))

Back to top

Step 1:
Go to PollDaddy.com and create a free account,

Step 2:
hit create poll and choose your questions and your answers for your poll.

Step 3:
Adjust features to be on your poll and change the look and feel, then save.

Step 4:
You’ll then get some code to copy, jump over to iWeb and paste it into an html snippet.

That’s it.  It has many features that I’d recommend checking into while your logged in.

Really that’s it! Go make some fun Polls for your website.

Here’s an example I’ve made from PollDaddy working in iWeb »

Favicons in iWeb

How to get favicons in iWeb.  First off, lets answer the question, ‘What is a favicon?  A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon. It is an icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s URL bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title.

For example when you visit Apple.com this is what you see for the favicon.

notice the Apple logo in the URL bar.  Wouldn’t you like to have a custom one of those on your website?  Well here is how.

If using MobileMe to host your site:

First off, favicons are usually as simple as dropping a file on the server and that’s it.  But mobileme is a bit different and makes it a bit harder, but it can be done.  If your hosting on mobileme I would probably recommend that you just forget about having a favicon, cause everytime you make an update to your site you’ll have to go through all these steps again, and you’ll tire of it.  But if your determined to get a favicon on your mobileme site.  Then here is how.

Step 1) Create Graphic
Create a graphic that is 32 x 32 that you want to be your favicon.  You could use Photoshop, Pixelmator, or even design a small something in iWeb and take a screenshot of it by pressing “command + shift + 4” and then drag the crosshairs over your graphic making it 32 x 32, then modify and enhance using Preview.  How ever you decide to make your favicon just make it a graphic that is 32 x 32 and looking the way you want.

Step 2) Save file as .jpeg
Save it as a .jpeg file (If you used the screenshot method then open it in preview and save as a .jpeg).  Name your file “favicon.jpg”

Step 3) Change Extension to .ico
Now, select your favicon.jpg file and simply change the extension to .ico by selecting the file and pressing return on your keyboard and change the .jpg to .ico.  You will then get a warning dialog that says this

Choose “Use .ico” and your favicon is ready.

Step 4) Add favicon to server
Put new favicon.ico file on your iDisk in the site you want the favicon to be.

Such as iDisk/Web/Sites/yoursitefolder/put favicon.ico file here.

Step 5) Find and Open HTML files
I wish that were it, But we have to add a bit of code on each page that you want the favicon to show up on.  So go to your iDisk/Web/Sites/and choose the site folder and find the .html page you want the favicon to show up on.  You now going to open that .html file in something that you can see the html with.  Power users may use something like Coda or Dreamweaver, if you don’t have those apps, it’s OK you can just use TextEdit that comes on every Mac.  But before you go opening the HTML file with TextEdit be sure you fix one thing in the TextEdit preferences under the Open and Save tab, check on “Ignore rich text commands in HTML files” checkbox.  Looks like this:

So now that you’ve done that choose your .html file on the iDisk and right-click or control click and choose “Edit With” and choose your html editor Coda, Dreamweaver, or TextEdit (there are many others too).

Step 6) Add Code
You will now see a bunch of HTML code your going to put the code below inbetween your <head> tags

<link rel="shortcut icon" href="http://web.me.com/username/sitefolder/favicon.ico" />

A good spot to paste this code might be right after your <title> tage of your site.  Just be sure to adjust the text in red to your own info.

Step 7) Add to other pages
Then go through and add that same code to each page you’d like to have the favicon appear.  Vist your site and you’ll see a new fancy custom favicon on your mobileme site.

Notes:

Favicons don’t work with masked domain sites
Favicons with MobileMe don’t work if your site is uses a masked domain.  Many people purchase a domain from say GoDaddy then foreward the domain to their mobileme site (which works great).  Many also decide to mask the domain so when forewarded it doesn’t show the web.me.com/username/site etc. it only shows the domain name.  But just know that if you do that your favicon will not show up.  So if you really want the favicon with your mobileme site you can’t mask it with a forwarded domain.

3rd Party Software
Another Option to get a favicon without doing this manually by the above steps is to use some 3rd party software.  A few are iTweak, iWebExpander, iWeb Valet and they save you a bit of time to add a favicon.  You still have to do it each time your update/re-publish your site, but it could be helpful.  Check out my Links page to check’em out.

If using your own server (i.e. GoDaddy hosting, iPower, etc):
If your using another server other than mobileme it’s much easier and it’s a one time shot and your done.  It’s great.  Just follow all the above steps 1,2, and 3 above, then put the favicon.ico file on the root level of your server.  That’s it!  No code to add to the html or anything.  Most browsers will see the favicon.ico file on the root level of the server and it will load it in.  To get the file to the server I would recommend using Transmit which is a good FTP client that helps you get your favicon and iweb html files onto your server.   If you want to make sure all browsers are compatible with it you could add the same code that we did for the MobileMe setting:

<link rel="shortcut icon" href="http://www.mysite.com/favicon.ico" />

Put that code in the <head> section of your document and it’ll guarentee the favicon look, but again most modern browsers will recognize the favicon if you just put it on the root level of the server

Good luck with the favicons hope that helps.

VIEW DEMO »

Step 1:

Get video you desire to be a flash video and convert it to .flv format if it’s not already.

How do I convert my video to flash video you ask?

Well there are a number of different ways.  You are going to need one of these converter below:

• Adobe Media Converter (comes with CS4 or Flash Video Encoder from CS3)
• Visual Hub (no longer in development, but if you got it while it was out, lucky you)
• Aimersoft Video Converter ($65)
• Perian QuickTime Plug-In + QuickTime Pro (Perian is free, QuickTime Pro is $29)
• SoThink FLV Converter ($45)
• FFMpegX (Free, but it requires some external file installations, they make it a little difficult to get, so here it is made easy by me.  Click here to download the app and here to download the extra files.  Your welcome ;-).  You can get instructions and more info on the software here. After you open the .dmg file and drap application to your app folder and launch the app it will ask you to locate 3 files to add onto it.  They are the ones I provided.  I would recommend moving them to home folder/library/application support/ffmpegx (you’ll make this folder)/put 3 files here that were in the .zip folder here.  Then in the FFMpegX App you’ll know where to find the 3 files to install and they’ll be in a safe place where no one will touch them.  Hope that makes sense.  If it sounds to complex, just go buy one of the other converters above to make life easier for you.)

Which ever converter you use, just convert that video file to a .flv format.  So in a nutshell, step one is convert video to .flv

Step 2:

Download the Longtail Video JW player by clicking here»

You’ll be downloading a .zip file.  Double-click to open and inside you will see 2 files; one called “player.swf” and the other “swfobject.js”.  We will need these files to make this work.  So now we should have a total of three files

1. Our .flv flash video we converted in step one
2. player.swf file
3. swfobject.js file

We just need to do one more thing and we’re ready to roll

Step 3:

We’ll need to have an image that will sit there until the user decides to click play.  So just export out a frame of your video.

It might be easier to go back to your original video to export out the frame.  You can do this in QuickTime pro, iMovie, Final Cut, and many other apps.  Or if you want to make it simple, just play your video, stop it on a frame that you would like to be your hold image and do a screen shot.  You can do a screen shot by pressing “command + shift + 4” on your mac, then draw a box around the frame of video your holding on.  When you let go you’ll have a new .png still frame  on your desktop.  We are going to use this to be the video preview.

You should now have four files.  Fyew.  These are all the files we need and we are ready to roll.  So we should have these four files

1. Flash Video (our .flv video we converted in step one)
2. “player.swf” (file we downloaded in step 2)
3. “swfobject.js” (file we downloaded in step3)
4. Preview image (file we created in this step.  You should name it preview.png)

For file size reasons you may want to open that image you created in step 3 in the application “Preview” and choose file>save as and save it as a jpeg image and bring the image quality down a bit so that the file loads quickly on the web.  Just a suggestion, if you have photoshop you could choose file>save for web and size it down that way too.  You can use a .png file or a .jpeg file for this

Now put those four files (.flv, .swf, .js,(.png or .jpeg)) onto the server, meaning your iDisk or your own ftp server.  If your using MobileMe I’d recommend making a folder called flash in this location: iDisk/Web/Sites/flash/put 4 files here. Just make sure you have these 4 files on your iDisk or server all all will be well.

Step 5:

Almost done.  All we need to do now is use the below code in an html snippet and replace the items in red with our own server path names.

Just replace the items in red with the path that goes to your files on the iDisk replacing the appropriate names to point to the right place.  So be sure to put in your MobileMe username and your correct flash video name (yourflashvideo.flv) and your preview image (myimage.jpeg or myimage.png).  Also be sure to adjust the width and height of your video with the 2 numbers that are red in the code.  Once it’s all updated and you have all your links pointing to the right spot, hit “apply”.

Done!

We now have flash video in iWeb successfully! Yay!

Hope it wasn’t too complicated for ya.  Just do it a couple times and you’ll have it down in no time.  There is a video I made that will walk you through this too if you’d rather look at that.  Just got the Video Tutorials section and it’s all about flash video.

Note: You can use Longtail Video JW Player on your site for free as long as your not selling anything, have ads on your site, etc.  If you are doing those things you need to purchase a license.  It’s €30 (Euro) which is about $41 dollars.  You can purchase a license here»

More Notes:

If your wanting to customize the JW player, they have a nifty little embed code creator that you can tell it what paramaters you want to be set.  Click here to go to it.

FancyZoom in iWeb

FancyZoom in iWeb, huh? What’s that. Well there are a many websites these days that have that popular image zoom effect so that when you click on the image it animates the photo larger. Well many have asked, how can I do that with iWeb? Well here it is, this is the tutorial to show you just how to do that. Keep in mind this one is a bit more complex, but it can be done without getting your hands to dirty in code.

VIEW DEMO »

Step 1:
Drag a photo onto your iWeb page that you would like the photo fancy zoom to be on.

Step 2:
Click on your photo, and head to the hyperlink inspector and make the image a hyperlink. Where it says “Link To:” choose “A File” and find your same photo that you dragged onto the iWeb page.

Step 3:
Now your done with the iWeb part. Now publish, either to a folder or to MobileMe.

Step 4:
We now need to do just 2 more things. First download this .zip file.

DOWNLOAD FANZYZOOM .ZIP FILE

Once downloaded, open the zip so you have your folder titled “fancy-zoom”. You will see a bunch of files inside of that folder. You’ll need to drag this folder into your site folder. To move to site folder see options below:

If you published to a folder:
Find the web export folder that you published to and you will see inside a index.html file and a folder which is the name you gave your site. Drag the “fancy-zoom” folder into that site folder.

If you published to MobileMe:
Open up a finder window and go to the iDisk. You are then going to search for the “Web” folder, then go into the “Sites” folder, and in there you should see a folder named the name that you titled you site in iWeb. Drag and drop this fancy-zoom folder into that folder (it may take a while depending on your internet connection).

Step 5:
Almost done. We now just have to alter some code. Now don’t get scared quite yet, it’s not to bad. In that same folder that we dropped the fancy-zoom folder you will find a bunch of other files including that page that you want to have your fancy zoom on. Find that html page that you added the photos to and we need to open it up with something that allows you to edit html code. I personally use “Coda” by Panic Software, they even have some trial version so you can try it out or just use it till you get your fancy zoom going. Anyway, you can also simply use TextEdit on your Mac. So here’s what you going to do. Find that .html file, right click, choose “open with” and choose your html editor, it will say TextEdit or Coda or whatever you choose. You will then see all the great code that iWeb users typically try to stay away from, but we just need to alter 2 lines of code. Both Coda and Text Edit have a Find and Replace feature. So press command + F on your keyboard and you’ll get the find and replace window. Simply find and replace these two things:

1) Find:

</head>

Replace:

<script src="fancy-zoom/FancyZoom.js" type="text/javascript"></script><script src="fancy-zoom/FancyZoomHTML.js" type="text/javascript"></script></head>

2) Find:

onload="onPageLoad();"

Replace:

onload="onPageLoad(); setupZoom();"

Then just save (command + s, or File > Save).

Done!

Now that wasn’t so bad eh?

From there you should have a fancy, shmancy zoom that will look great and it will also work on the iPhone. Pretty cool, eh.

Note: You can only use FancyZoom on none commercial websites, if you would like to use FancyZoom on a commercial site you must purchase a license for $39 on Cabel’s Blog (the creator of FancyZoom)

More Notes:

If you are looking to do other things with FancyZoom here are some tips:

• If you want to replace the Title below the photo then, do a search for href and find the title it’s using and change to what you want. Example title=”Add Your Title Here”

• If you want to get rid of the title entirely just Edit the FancyZoom.js file and on line 431, change the “visible” value to “invisible”

• If you want to add a border on the popup just add something like a 10px border on the image by adding the following at line after 63 in FancyZoomHTML.js: inImage1.style.border = ‘10px solid white’;

• FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.

• There is not a way to put anything else but photos into the fancy zoom, so no videos, flash, etc. But I’m working on another tutorial to use another method so you can get video and flash in them, check back.

MobileMe Web Gallery in iWeb

We all love the MobileMe (.Mac) Web Gallery for sharing photos, uploading, downloading, etc. and it’s great how iWeb has the little integration with the gallery in the Web Widgets.

But all you get is a little tiny window of skimming photos that then takes you to the gallery in a new window. So here is how you can get your entire gallery in iWeb so visitors won’t ever have to leave your iWeb site at all which will also let you decorate around your gallery. Here’s how.

VIEW DEMO »

Step 1:
Choose an HTML snippet from the Web Widgets.

Step 2:
Paste this code below replacing the items in red with your own MobileMe (.Mac) name and the size you want it to be on your page.

<iframe height="600" width="800" allowTransparency="true" frameborder="0" scrolling="no" style="border:none" src="http://gallery.me.com/yourusername"></iframe>

Step 3:
Click “Apply” and resize and position the snippet till it fits well on your page and your set.

Sizing suggestions:
You’ll need to make your snippet at least 800px by 350px to get the scroll bar to show up (assuming you have enough published events and videos to make it scroll)

Other Options:
If you want to have a specific gallery to show up use this code below:

<iframe height="600" width="800" allowTransparency="true" frameborder="0" scrolling="no" style="border:none" src="http://gallery.me.com/membername#albumnumber&view=mosaic&bgcolor=dkgrey"></iframe>

you can equally just copy and paste the URL for the gallery look and feel you want. For example if you want the background of your gallery to be white in iWeb then visit your page online make the background white, then just copy the URL and paste it into the section in red below.

<iframe height="600" width="800" allowTransparency="true" frameborder="0" scrolling="no" style="border:none" src="http://gallery.mac.com/membername#albumnumber&view=mosaic&bgcolor=dkgrey"></iframe>

Good luck with it and have fun.

Pop Up Windows in iWeb

Opening certain small windows on a page can be very helpful and convenient. As long as the content of your pop-up window is relative to your site, visitors don’t mind the pop-ups, it’s when it’s for something unrelated to your site, like an “ad” of some sort, that visitors don’t like them.

See Demo

Step 1:
Create a new page page in iWeb that you want to be your pop-up window. Usually it’s smaller so you might want to make your page size something like 400-500 width and 600 height. You can change the sizes in the Page Inspector under Layout (take into account your headers and footers).

Step 2:
Finish your design of how you’d like your pop-up to look and jump to the page where you want to button for the pop-up to be. Get an HTML Snippet and paste this code into it.

<script type="text/javascript">
function open_win()
{
window.open("http://web.mac.com/username/sitename/pagename.html", "_blank", "toolbar=no,  location=no,  directories=no,  status=no,  menubar=no,  scrollbars=no,  resizable=no, copyhistory=yes, width=490, height=600") }
</script>
<form>
<input type="button" value="View Pop-up Window" onclick="open_win()"> </form>

Step 3:
Change the items in RED and hit apply.

You need to be sure that the URL is the exact location of your pop-up. If your pop-up is within a blog, or a My Albums page there might be a few more folders you’ll have to type in for example:

http://web.me.com/username/sitename/myalbumpagename/pagename.html

From there just decide if you want scrollbars, and other things that say “no”, just change to “yes” if you want them. Also change the red text at the bottom of the code to be what you want the button to read.

Step 4:
Publish and your set. Be sure to try it out before inviting anyone to view your site.

Good luck with it and have fun.

To use your own images:
If you’d rather have your own image for the button, put your button graphic (jpg, png, gif, etc) on your server somewhere and use this code:

<A HREF="javascript:void(0)"onclick="window.open('http://www.iwebunlimited.com', 'Open Link', 'height=640, width=500, scrollbars=no')"><img src="http://www.yoursite.com/imagefolder/yourbutton.png"style="border:none;" ></a>

To Use Text:
If you’d rather use text instead of a form button or your own button use this code:

<A HREF="javascript:void(0)"onclick="window.open('http://www.iwebunlimited.com/examples/popup.html', 'Open Link', 'height=600, width=500, scrollbars=no')">View Pop-up Window</a>

Forms in iWeb

This has been a big one for many people who ask “How do I get a form in iWeb?”

iWeb doesn’t have this feature built into the app yet, but through the HTML Snippets we can achieve this and we can achieve this very easily.  You might want a form for a contact form, a sign up for our newsletter or email list, request an appointment form, get a quote form, email us form, etc.  Most all sites have a form on them now and so can you with iWeb, here’s how:

See Demo

Step 1:
Sign up for a free account with one of these free form builder sites: JotForm.com,  Wufoo.com, Google Docs, FormSpring.com, Icebrrg.com, or Formsite.com

Obviously there are many services that offer this functionality, so you can decide which one you like the best, but they all have the same basic idea to create the form then get the code and paste in an HTML Snippet.  I personally like JotForm the best, it’s (like others) totally free for most peoples needs and they have a paid account if you need a bit more monthly submission (like other sites). I’ll be using JotForm to demonstrate this tutorial, but remember the other sites I listed have a similar functionality so if you find you like the others better, have at it.  Here’s how to do it with JotForm:

First you need to sign up by clicking the “Sign Up” button

Step 2:
Start a new form by clicking the “My Forms” button at the top of the window and then you can hit the “New” button to start a new form.

Step 3:
Add form fields. You’ll see there are a plethora of types of form fields that you can use. Like a text filed, a drop down menu, radio buttons, check boxes, file upload button, and many more. They are all on the right hand side of the window and you just drag and drop them in whatever order you’d like. The then customize the text name and the appropriate properties (also on right side, toward the bottom). Once the form is complete. Click on the properties button toward the top toolbar, and be sure that you have the form setup to go to your email address. You can also change the font and background color here as well as other things (if you want the background transparent, simply type “transparent” in the color box instead of a color).

Step 4:
Simply click the “Source” button up top on that same toolbar.

It will give you 2 option for putting the form onto your site. We want option 1. Copy the code that is on the top and you will be pasting that into your iWeb HTML Snippet.

Step 5:
Paste the code into an iWeb HTML Snippet and you are set. Just resize your HTML Snippet accordingly, publish and your golden.

Hope that helps and you can start to become more familiar with JotForm.com and make spectacular forms.

Transparent Flash in iWeb

This is much like the tutorial before on adding flash to iWeb, but sometimes you still want to use the background that you have in iWeb, or you want to use other graphics behind your flash file. Well here is the solution to have the background of your flash (.swf) file transparent.

1) Create flash .swf file

2) Place swf file on server (like your iDisk or your own server). If using your MobileMe I recommend making a folder called “flash” on your iDisk in this location: iDisk/Web/Sites/flash/myflashfile.swf. Same if using your own server www.site.com/flash/file.swf

3) Come to iWeb, choose HTML Snippet and paste this code:

<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="800" height="196"><param name="movie" value="http://web.me.com/username/flash/myflashfile.swf"><param name="allowScriptAccess" value="always"><param name="wmode" value="transparent" /><param name="quality" value="High"><embed src="http://web.me.com/username/flash/myflashfile.swf" wmode="transparent" pluginspage="http://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="800" height="196" allowScriptAccess="always"></object>

4) Now just change the code in red to your own URL and flash width and height, and hit apply.

5) You now have successfully put a flash file in your iWeb document and you will see the transparency behind it.

Note: if your using your own server and not MobileMe, just replace the URLs in red with your URL. For example http://www.mysite.com/flash/myflashfile.swf

Drop Down Navigation in iWeb

Here’s a tip that will allow you to have a neat little drop down navigation menu in iWeb.  It might be handy for a site map, quick links, or even the main navigation of your site.  Here’s how:

See Demo »

This drop down will take the viewer to the link immediately on click.  Here’s how to do it:

Step 1:
Simply paste the following code into an HTML Snippet

<form>
<select id="menu" onchange="parent.window.location=this.value">
<option>--Drop Down Menu in iWeb--</option>
<option value="http://www.iwebunlimited.com">iWebUnlimited.com</option>
<option value="http://www.imaginatestudio.com">My Web Design Company</option>
<option value="http://www.learn2mac.com">Learn2Mac.com</option>
<option value="http://www.apple.com">Apple.com</option>
<option value="http://www.apple.com/ilife/iweb">iWeb on Apple.com</option>
<option value="http://www.google.com">Google</option>
</select>
</form>

Step 2:

Replace the items in RED with your URLs and your link text and your set.  It’s that easy!

Step 3:

Have Fun!

• iCal published calendars
• Aperture made photo galleries
• Pages made in 3rd party web software such as RapidWeaver, DreamWeaver, Sandvox, etc.
• HTML Flash Galleries with XML files
• and many more

Here’s how to do it:

See Demo »

Full iFrame:

1-Copy the code below by doing a triple click and then pressing (command + C)

<IFRAME SRC = "http://www.iwebunlimited.com" WIDTH="600px" HEIGHT="425px" FRAMEBORDER="0" --if "0" no border, otherwise "1" with border MARGINWIDTH ="0px" MARGINHEIGHT="0px" SCROLLING="auto" --"no" no scrolling bar, "yes" show always, "auto" showed when need > Your browser does not support IFRAME </IFRAME>

2-Paste into an HTML Snippet in iWeb

3-Replace the items highlighted in red in the code.  First the website that you want to display in your page, second the width and height of the site.  If your not sure the width and height, just enter some values and keep changing it till your page fits.  You also have some option to have a frameborder, margin, and scrolling.  For scroll bars you can put in yes or auto (auto will auto detect if you page needs scroll bars or not).

Partial iFrames:

There are times when you only want to iFrame portions of a site.  This code will help you do that.

1- Copy the code below into an HTML Snippet:

2- Then you need to modify the items in red to get the portion of the site you want to iFrame in iWeb.  What is going on here, is we have the container size, then we have the iFrame size, the we have where on the page the container is located using the left and top margins.

How I’d recommend going about this is to first put in the URL of the site your iFraming in the last item highlighted in red, then hit apply in the snippet.  Now we just need to modify the sizing to show the portion of the iFrame you want to show.

3-Let’s size your iFrame dimension. So to size your iFrame dimensions in correctly, first put in the width and height that the actual page your iFraming in is.  A quick way to do this is to visit your actual page your iFraming in and press Command + Shift + 4, you’ll then get a cross hair instead of your arrow for your mouse.  This is ordinarily how we take screenshots of items on our screen, but we are using it just to get the dimensions of our site.  You see when we drag our mouse in this mode (in Snow Leopard & Leopard OS only) you’ll see dimensions in pixels of how large the area is.  Once you have your width and height dimensions by dragging your mouse in this mode hit the escape key on your keyboard before letting go of your mouse button, that way you won’t actually take a screenshot and we can just take the info that it gave us in the width and height pixels to enter into our iFrame snippet here.

4- Then adjust the container size.  Adjust the container width and height to be the size that you want to show of the iFramed site.

5-Then use the margin-left and margin-top to move the container around the iFramed page so that the container is located in the spot you want.

You should now have an iFrame that only shows the portion of a site that you want to be shown.  Yay!  Don’t you love little tricks like this in iWeb!  Hope that helped.

If this tip helped you, consider donating to the iWebUnlimited cause by clicking here »

See how to get Flash SWF files into iWeb

This tutorial will show you how to get an Adobe Flash created file into iWeb.  Flash adds all sorts of interactivity to your site as well as fun animations.  It really makes your sites come to life. iWeb does not accept those files natively to just drag and drop them in, so how can you get those files into iWeb?  Well, the HTML Snippets is the key. If you don’t know what flash is or how to use it there are many books, podcasts, online tutorials that can help you learn.  This tutorial is just how to get that flash created file into iWeb.  So buckle up, here we go.

VIEW DEMO »

1-Create flash .swf file

2-Place swf file on server (like your iDisk (MobileMe) or your own server).  If using MobileMe I recommend making a folder called “flash” in your sites folder like this: iDisk/Web/Sites/flash/myflashfile.swf
If your not using MobileMe and using your own server like GoDaddy, iPower, etc. then you could just make a folder on the root level of your server called “flash” and put it in there.  That way your link to the file become http://www.yoursite.com/flash/yourfile.swf

3-Go to iWeb, choose HTML Snippet and paste this code:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=" http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" align="middle"> <param name="movie" value="http://www.yoursite.com/flash/myflashfile.swf"> <param name="allowScriptAccess" value="always"> <embed type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="550" height="400" align="middle" src="http://www.yoursite.com/flash/myflashfile.swf" allowScriptAccess="always"></embed></object>

4-Now just change the code in to your own URL and flash width and height and hit apply in the HTML Snippet.

5-You now have successfully put a flash file in your iWeb document.