Edit: For those of you who find this tutorial to be a bit too advanced, here is an extremely easy way to add a forum to your iWeb website.

Original Article: So most all of us have used forums before. It’s a great way to spark discussion on your site as well as create a community so people with similar interests can communicate with others. You probably have visited our iWeb Forum and gotten your iWeb questions answered there before.  Well this post is all about getting a forum into your iWeb site.  If you have a site that you think could benefit to provide a forum, here is the absolute easiest way to do so.

To get this to work in iWeb we are going to be using the great Vanilla Forums.  It’s probably the best forum software out there. before we talk about how to get it into iWeb let’s talk about the different options that we have with Vanilla Forums. With choosing how to set up your forum you basically have 3 options:

1. VanillaForums.com – Free Version (Limitations: 30 members only, w/no customization)
2. VanillaForums.com – Paid Version (Pricing Starting at $49 p/month, unlimited users. See Plans and Sign Up Here)
3. VanillaForums.org – Open-Source and Free, Unlimited Users, No Restrictions. (Manual Install, hosting, and database required)

So as you can see you have a few options. Using the “.com” version, the forum is purely hosted on VanillaForums.com’s servers (hence the cost and limitations with the free version), but is by far the easiest to setup.  You can be up and rolling in less than 1 minute it’s pretty nice, but there is a cost involved to get some of the more fancy features such as unlimited users, etc.  So for ease of setup and less hassle I suggest using the 1st and 2nd options.

The third option is the “.org” version.  Which is open-source and totally free.  You can have unlimited users, and pretty much all of the paid features are included. The only catch is that because it’s open-source you have to set it up completely yourself on your own server and create your own database. It’s really not too scary and I’ll walk you through that here on this tutorial. So let’s get started, we’ll start with the “.com” versions first.

VanillaForums.com Free and Paid Setup:

The VanillaForums.com (free and paid) version is quite easy to setup and embed into iWeb. Here are the necessary steps:

1) Create an account - (free or paid) by going to VanillaForums.com and follow the simple 3 step process to sign up for your forum. Step 1 asks for your login information (name, email, password, etc.), step 2 you create your forum name, and step 3 (if paid version) you add your credit card information.

2) Choose Embed Theme - After creating your account you’ll be redirected to the “Getting Started with Vanilla” page which simply gives you some steps on how to customize your forum.  Feel free to spend some time with that if you’d like, but we want to head over to the “Themes” link on the left sidebar under the Appearance section.  In there choose the “Embed-Friendly” theme by clicking “Apply”.

3) Copy Embed Code – Now that you have the “embed-Friendly” theme applied, you can now go and get the code so you can embed it into your iWeb site.  To find the embed code click on the “<Embed> Vanilla” link on the left side under the “Add Ons” section. There you will find the Embed Code. Copy that code and head over your your iWeb page you want to have this forum on.

4) Paste Embed Code – Now that you have your embed code and you are on the page that you would like your Forum to be embedded on, add an HTML Snippet to the page and simply paste this forum embed code into it and hit apply. You should now see your forum Embedded into your iWeb page.

5) Publish Your iWeb Page – Now simply publish your iWeb site online and your forum will be ready for your viewers to start discussing and communicating on.

Feel free to head back to your account on VanillaForums.com to customize a few things.  Such as adding your logo (Appearance > Banner), or adding Forum categories (Forum Settings > Categories), etc. There are many options in the backend, I’d recommend going through them and seeing if there are any settings that you’d like applied to your site.

VanillaForums.org Open-Source Setup:

This setup has great features being free and fully featured.  It does require us to set this up on our own, on our own server, and create a database with the install. But once installed it’s pretty nice because it’s on your servers, unlimited users, gives you more control, and some great options and add-ons. So let’s get started.

First off, before taking the manual setup to install this on your server first check to see if your server offers a way to install it automatically. There are many web hosts out there that have automated options to install common installs such as this.  Let me run through a few of the popular ones first:

• GoDaddy - Go into your hosting control center and click on the Applications install link on the right sidebar. In there you can do a search for “Vanilla Forums” and you can install it automatically on your server.  You might want to create a folder on your server called “forum” and install it there.
• iPower – Log into your control panel and click on the “Simple Scripts” option in the “Website” section. You’ll then be sent to the Script List where you’ll see a section called “Forums” and you’ll find “Vanilla Forums” at the bottom.  Simply click that and go through the steps and it will install for you.
• BlueHost – This is the same as iPower, simply log in, and here in (what they call the) cPanel you’ll find a section called “Simple Scripts Installation” and you’ll find the simple scripts option. Once you click on that you can scroll down to find “Forums” and click the “Vanilla Forums” and begin the installation process.

Many other hosts out there have this “Simple Scripts” option and if they do, they most likely have the option to install Vanilla Forums. By doing this method it creates the database and installs it on a directory on your server for you and it’s done, complete, and installed very quickly and easily. It’s quite nice.

If you are on a host that doesn’t have the option to install it automatically or simply don’t want to use the auto-install methods available for whatever reason here is how to install it on your server manually.

Manual Install:

1) Check Requirements – First off make sure that your server you want to install it on is compatible by viewing the Vanilla Requirements here: http://vanillaforums.org/docs/installation-requirements.

2) Pre-Requisites:

This guide assumes you have:

• FTP access to your webserver (such as Apache) with PHP5 (Typically, you upload the files via a FTP client such as Transmit, WinSCP, or FileZilla.)
• Access to a MySQL database (should be provided by your web host)

3) Create the Database - You can name the database anything you want, but don’t get fancy with the name — perhaps use something simple like “vanilla” or “forum”. Be sure to take note of the database name, you will need it later.  If you are unfamiliar with how to create a database with your web host, I suggest contacting them and they can guide you on how to create a MySQL Database.

Note: Vanilla uses UTF-8 for your database encoding. We strongly encourage you to select “utf8″ in the “collation” drop-down box in phpmyadmin. If you select a different encoding method, you may need to manually update your ../db/local.php file.

Tip: If you plan on having multiple Vanilla installations, don’t use vanilla as the database name.

Create a database user (with password):

• Again, don’t get fancy with the database username. In fact, you can use the same name that you selected for the database.
• Select a strong password. You can easily recover your database username and password if necessary (by reviewing the vanilla/conf/config.php file in your Vanilla directory.
• Be sure to record the username and password. You will need it later.
• Some hosts have you create the database name, username, and password all in the same step.
• Be sure to assign all database permissions to the database user that you created (if applicable)

4) Download Vanilla Forums - Download the current version of Vanilla to your local computer. The full download is roughly 2MB. Once you have downloaded, you should decompress (unzip) the Vanilla archive file to your local hard drive.

5) Upload Vanilla Forums to Your Server – Next, you need to connect via FTP to your web host. Once connected, find your web directory. It is often called www or public_html or httpdocs (this is different from host to host). Then, copy all the Vanilla files to the location you’d like the forum to be installed on (Note you cannot install this on MobileMe). Since your iWeb site is probably installed on the direct level of your server you might make a directory (folder) called “forum” and upload the files there.  So that your web address ends up being http://yoursite.com/forum/.

6) Install Vanilla Forums: Go to your newly installed forum web address (i.e. http://yoursite.com/forum/) and the installation screen will appear. Simply follow the easy steps in the installer.

7) Sign In for the First Time: Sign in using the Sign In button in the right-hand column, also known as the panel. Enter the information used in step 6 and click Sign In.

8) Configure and Explore Vanilla – Congratulations and welcome to your shiny new Vanilla Forum! Take some time to familiarize yourself with the Dashboard and the many features Vanilla has to offer.

One thing you may want to do here first is to enable “Pretty” URLs Apache: Requires .htaccess to be working on your server. Edit your config.php file and set $Configuration['Garden']['RewriteUrls'] = TRUE;

Embed Into iWeb

Now that you’ve install Vanilla Forums on your server (either through the automated process or manually) we can now embed the forum on our iWeb site. Here’s how:

1) Choose Embed Theme – Head over to the “Themes” link on the left sidebar under the Appearance section.  In there choose the “Embed-Friendly” theme by clicking “Apply”.

2) Copy Embed Code – Now that you have the “embed-Friendly” theme applied, you can now go get the code so you can embed it into your iWeb site.  To find the embed code click on the “<Embed> Vanilla” link on the left side under the Add Ons section. There you will find the Embed Code. Copy that code and head over your your iWeb page you want to have this forum on.

3) Paste Embed Code – Now that you have your embed code and you are on the page that you would like your Forum to be embedded on, add an HTML Snippet to the page and simple paste this forum embed code into it and hit apply. You should now see your forum Embedded into an iWeb page.

4) Publish Your iWeb Page – Now simply publish your iWeb site online and your forum will be ready for your viewers to start discussing and communicating on.

Feel free to head back to your account on VanillaForums.com to customize a few things.  Such as adding your logo (Appearance > Banner), or adding Forum categories (Forum Settings > Categories), etc. There are many options in the backend, I’d recommend going through them and seeing if there are any settings that you’d like applied to your site.

Conclusion:

That’s all there is to it. Hopefully that make sense and you can get some great forums embedded onto your iWeb site.  Please remember that Vanilla is not our product, so any support or problems with Vanilla should be sent directly to Vanilla support on their website.

If you have any questions about actually getting the forum into iWeb or similar questions feel free to comment below. And if you feel like iWebUnlimited has helped you, please consider making a donation to the site.  Thanks for reading and happy forum embedding.

CSS Buttons

Really all there is to this tip is find the button your want below, copy the code, and paste it into an HTML Snippet.  That’s really all there is to it.  View the buttons below to view all the buttons and their interactive rollovers, then find matching button code to paste into your site.

CSS Button HTML Snippet Code

Simply click the button that you’d like to add, copy the code, and paste it into an HTML Snippet.  Don’t forget to change the link URL and button text at the bottom of the code.

Button-1

Button-2

Button-3

Button-4

Button-5

Button-6

Button-7

Button-8

Button-9

Button-10

Button-11

Button-12

Customization

The only customization you’ll need to do is regarding perhaps colors, fonts, and sizes.  So to do that just find the line in the code that has what element you want to edit and change it to what you want.  For example you might see the line of code font: 14px/100% Arial, Helvetica, sans-serif; which is telling it that you want to use the font Arial, and if the user doesn’t have that font it will use Helvetica, and if they don’t have that font it will use any san-serif font like verdana, or something else.  So you can just change that to be the (web-safe) font you want.  You’ll also see font sizes like 14px, etc. Just change those to what size you want. So spotting font options in the code is pretty easy.

Changing colors in the buttons requires for you to change the colors according to hex values.  So for example black is #000000 and white is #ffffff and so forth.  There is a special color picker that you can install right into your iWeb that will add an extra tab in the default color picker with hex values.  It makes it super easy to change colors and is a must for any iWeb designer.  You can get it by going here.  If you don’t want to install that (which you should) you can view an online color picker by going here.  You’ll see the code to change colors under the section that’s labeled: /* iWebUnlimited Button Color */  then you’ll see a line of code that starts with “background” then it states the gradient color to and from.  Just replace the # color code to what you want it to be.

As for sizes (width), you’ll notice at the very top of the code (the 2nd line) there is a line that has the width in it.  Just change that width till your button fits.  The current width of the buttons is so it fits the current text in it.  So if you put some text in your button that is longer or shorter you’ll probably have to change this width so the snippet fits your button better.

So how do I change the button link and button text you say? Simple you’ll see a line of code that says “Button Link” towards the bottom of the code snippet.  Just replace your link URL, then the text of the button you’ll see is wrapped in same code that’s called “span” tags.  It’s labeled probably “button-#”, just change that to what you want, for example you might change it to  ”Learn More”, or “Contact Us”, etc.

I’ve added some code here so you can easily adjust the size and some styling of your button.  Here’s some examples:

To add these styles to your button just add the code below inside of the style tags right before the close </style> tag.  Then you’ll need to add the link identifier to your link.  Where is that, you ask? You’ll see in your link which starts with <a  you’ll see a section that says class= then a bunch of css identifyers, for example you’ll see “iWebutton blue” for example.  So to get the large button for example, just add the large code to the style section and put in the identifyer “large” so the full class part would look like this class=”iWebutton blue large”.

Here are the codes you’ll need to add to your code to get these styles:

XXLarge (identifier: "xxlarge)"

XXLarge Rounded (identifier: "xxlarge rounded")

XXLarge Iconized (identifier: "xxlarge iconized"

XLarge (Identifier: "xlarge")

XLarge Rounded (Identifier: "xlarge rounded")

XLarge Iconized (Identifier: "xlarge iconized")

Large (Identifier: "large")

Large Rounded (Identifier: "large rounded")

Large Iconized (Identifier: "large iconized")

Small (Identifier: "small")

Small Rounded (Identifier: "small rounded")

Small Iconized (Identifier: "small iconized")

XSmall (Identifier: "xsmall")

XSmall Rounded (Identifier: "xsmall rounded")

XSmall Iconized (Identifier: "xsmall iconized")

So basically, you get the code from the first snippets, then if you want to customize that button with one of these styles above then add the code above the closing style tag and add the identifier to the link class.  Here’s some screenshots to help you out.

So the final code would look like this:

If you are using the “Iconized” style in your button you have to add some extra code to the actual link itself.  Here’s what your link should look like:

Notice the link to an image.  So basically you’ll need to upload an icon (that’s 16 x 16 at most in pixels) to your server, then link to it in the code.  You’ll notice that the difference is that in the span tags we’ve added this one line of code that has the link to the image in it: style=background:url(http://iwebunlimited.com/examples/css_buttons/bird.png) no-repeat 0 45%;

I’ll be adding a video on this tip soon, so if you are a bit lost you’ll be able to follow the video to get these cool buttons on your site.  Thanks again.

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;

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 below;

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

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.

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.

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 »

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.

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.

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 below;

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.

If No Flash, Show Image

Many users these days are using devices that simply don’t have a flash player (i.e. iPhone, iPad, iPod Touch, Etc).  If they visit a page that has flash it shows a blank spot on the webpage.  Like the image below:

Many people are starting to use alternatives to flash (such as HTML 5, JQuery, etc) so it shows on all devices.  Well here is a bit of code that you can use as an alternative to the code above to get flash into your iWebsite and if the browser the user is using doesn’t have flash it will default to an image instead, that way they at least don’t see a blank screen and your site can still be beautiful.

Here’s an image of viewing a webpage that has a flash file with this alternative code to show an image on the iPad.  Notice that there is not black screen where the flash should be, there is now an image as it code has detected that there is no flash player and instead is showing the image.

Here is an example.  Click the link below.  If you view it on a device/computer that has flash player you will see an animating flash (swf file) that says “Flash in iWeb”.  If you view the link in on a device/computer that doesn’t have flash, then you will see a image that (of course) is not animating that says “iWeb Alternate Flash Image” with a description.  Check it out.

Alternate Flash Example »

So here’s how to do it:

1) Create .swf file and an image/graphic the same size.  You can create the image in photoshop, or you could even just make a layout in iWeb, then use the screenshot tip using command + shift + 4 and take a screenshot of the area, and crop it in preview to make sure it’s the correct width and height that matches your swf file.

2) Place swf file and image on your 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, add an HTML Snippet and paste this code:

<SCRIPT LANGUAGE=JavaScript>
<!--
var plugin = 0;
if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"] && navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin) {
if (navigator.plugins && navigator.plugins["Shockwave Flash"])
plugin = 1;
}
else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
&& (navigator.userAgent.indexOf("Windows 95")>=0 || navigator.userAgent.indexOf("Windows 98")>=0 || navigator.userAgent.indexOf("Windows NT")>=0)) {
document.write('<SCRIPT LANGUAGE=VBScript\> \n');
document.write('on error resume next \n');
document.write('plugin = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFla sh.3")))\n');
document.write('if ( plugin <= 0 ) then plugin = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFla sh.4")))\n');
document.write('if ( plugin <= 0 ) then plugin = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFla sh.5")))\n');
document.write('</SCRIPT\> \n');
}
if ( plugin ) {
document.write('<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=3,0,0,0" ');
document.write(' ID=flash WIDTH=585 HEIGHT=162>');
document.write(' <PARAM NAME=movie VALUE="http://yoursite.com/flash/flashfile.swf"> <PARAM NAME=loop VALUE=false> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> ');
document.write(' <EMBED src=" http://yoursite.com/flash/flashfile.swf" loop=false quality=high bgcolor=#FFFFFF ');
document.write(' swLiveConnect=FALSE WIDTH=585 HEIGHT=162');
document.write(' TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">');
document.write(' </EMBED>');
document.write(' </OBJECT>');
} else if (!(navigator.appName && navigator.appName.indexOf("Netscape")>=0 && navigator.appVersion.indexOf("2.")>=0)){
document.write('<IMG SRC="http://yoursite.com/flash/flash_image.jpg" WIDTH=585 HEIGHT=162 BORDER=0>');
}
//-->
</SCRIPT><NOSCRIPT><IMG SRC="http://yoursite.com/flash/flash_image.jpg" WIDTH=585 HEIGHT=162 BORDER=0></NOSCRIPT>

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

5-You now have successfully put a flash file in your iWeb document with an image alternative.

I hope this tutorial helps you to get flash in iWeb with ease as well as provides a good site experience wheather the browser being used has flash or not.  If you feel this tip has helped you please consider donating to the iWebUnlimited cause.