06 Mar 2009

Add search to your iWeb site

33 Comments Software, Tutorials, Web Design, Widgets

We all know that the iWeb blog comes with a built in search facility that only works if you host your site on a MobileMe account (thanks for that Apple!!), but what do you do if you are hosted with a different web host of your choosing? The answer is simple: we turn to the masters of search Google and/or Yahoo to help.

Before we start adding a search box to our site, I must explain that the technique laid out below will work much better once your site has been indexed (had the search spiders crawl all over it) by either Google or Yahoo. The reason for this is because, in basic terms, we are just adding plain ol’ Google or Yahoo to your site but adding some code in the background that will restrict the search to just your site (or whatever URL you use). Clever eh?

Let’s add the code.

So once you have opened iWeb to the page you want to add search to, insert a HTML Snippet.

Now all you have to do is decide which version of search do you want to use for your iWeb site, Google:

<form action="http://www.google.com/search" method="get">
<fieldset>
<input type="hidden" name="sitesearch" value="YOUR URL GOES HERE" />
<input type="text" name="q" size="31" maxlength="255" value="" />
<input type="submit" value="Search" />
</fieldset>
</form>

If you want to make the search field narrower or wider change the value of size=”31″ to a different number. Additionally, if you want to have a bit of text (such as ‘Type your phrase here’) enter it in between the empty speech marks at value=”” />  . (See image below.)

iweb_insert_google_search

or Yahoo:

<form action="http://search.yahoo.com/search" method="get">
<fieldset>
<input type="hidden" name="vs" value="YOUR URL GOES HERE" />
<input type="text" name="p" />
<input type="submit" value="Search" />
</fieldset>
</form>

Copy and Paste your chosen code into the HTML Snippet. You will see on the third line down that there is a bit of text that says ‘YOUR URL GOES HERE’.

iweb_insert_yahoo_search

Obviously that is where you put your site’s web address, including the ‘http://’ bit; make sure you leave the quotation marks in too.

That is all there is too it. Just publish your site as normal to your server.

In the image below there are the 2 examples however I have added a shape to act as a border. I used ‘Inspector’ and it’s Image tab I set the fill to ‘none’ and changed the border to suit the iWeb site. You can customize it how ever you like.

customize_iweb_search

Tags: , , ,
written by
AllAboutiWeb (AAi) is your one stop shop for everything iWeb. We provide tips, tricks and more to get the most out of your iWeb website. Follow us in twitter at @allaboutiweb
Related Posts

33 Responses to “Add search to your iWeb site”

  1. Reply iweb rookie says:

    i can’t find the “image” tab in inspector. are you using iweb ’09? is there a way to customize the border in ’08?

    • Reply All About iWeb says:

      iWeb Rookie.
      My mistake, when I said ‘Image’ tab I meant ‘Graphic’. It has the icon of a square and circle on it, about 4th or 5th along (I’m answering from memory here!!). To change the border you need to use the ‘Stroke’ dop down menu.

      Hope that helps,

      Tim

  2. Reply iweb rookie says:

    The contents of that tab are grayed out when I have it open while selecting the search box.

    • Reply All About iWeb says:

      Don’t select the Search box. Click out of it and then draw a new shape. Make its fill ‘None’ and change the ‘Stroke’ border. Then drag the shape over the top of the search box and that should give you a border. Just make the shape the right size by dragging the sides.

      Hope that helps,

      Tim

  3. Reply iweb rookie says:

    i wanted to remove the default box (border) around the search box and button. for instance, your search button on this page does not have the default box showing, but i think these instructions leave the default box showing and your described method only covers it up.

  4. Reply iWeb Newbie says:

    Thanks for the post. It is very helpful as I am not sure that I am going to stick with Me.com for the hosting. A few quick questions. How do you get the search results to show up with your page instead of going to Google? How do you change the search button? Finally, what service do you use for comments as I know that you loose the ability to use iWeb comments if you dont host with apple.

    Thanks for the help!

  5. Reply carlos says:

    just wanted you to check my website and give me some healthy feedback. thanx.

    Carlos

  6. Reply Steve says:

    When i published my site it will not let me enter text into the search bar. Did i do something wrong? Possibly my site’s not been indexed? Technically i don’t have any blog entries yet, but i don’t see how that would affect this. Here’s what i have…

    Thanks for any help!

    Steve

  7. Reply Thierry says:

    Steve,
    I like your site, especially your icons in the bottom of your pages. Regarding the search box did by anychance you added a shape around your search box? If yes, did you make sure you sent this shape “backward”, if not your shape is on top of your search box and you will not access the snippet below. The “Forward” and Backward” button are in the bottom of Iweb screen.
    Thierry

  8. Reply Steve says:

    Thierry,
    Thanks so much, you were right on! It’s funny how I could forget something so simple, haha. Anyways, thanks again!

    Steve

  9. Reply Leo From Rio says:

    Hi There,

    I find your site REALLY helpfull thanx!!! Just one doubt.

    How do you make your search results appear at your web page instead of google page????

  10. Reply Ultan says:

    Hey Leo From Rio!
    1. I love your name “leo from rio”
    2. This site is designed on wordpress which is why search results appear on this site and not in google.

  11. Reply SamRod says:

    Just wanted to add “Great information” and “THANKS!!!”
    the web is so great and whats better, are sites like this that promote its use!

  12. Reply cexar says:

    Thank You for this easy code;

    I wonder i it is possible to mdify the code, so the “google search result page” opens in a new window rather than the one I am in.

  13. Reply Newbie says:

    Thanks for the code. I too would like to know how you were able to delete the keyline box, as in your ‘allaboutiweb’ website. (not the example). Does anyone know what the code is so that you are able to modify the appearance/design of the search box. Have searched the web but not able to find anything.

  14. Reply ben says:

    hi, thanks for this tutorial.
    how can i make it so this search bar searches the whole internet not just my site?
    thanks!

  15. Reply Benjamin says:

    i just finished my website!~

  16. Reply allen says:

    I am having trouble. Is there any way to have the search engine search my website? That is what I am truly hoping to accomplish. I would like people to be able to search within my blog for entries that they want to read. Is there a search code for that?

  17. Reply allen says:

    never mind my last query. Got it. The only question I have is, how do I get the entire site indexed? I thought it would but the only entries that come up in search are from the last week. Nothing from before then. Thoughts?

  18. Reply Frank Millar says:

    Adding a search to iWeb.
    Hi Tim, Inserted the search code no problem and it worked, but took me out of my site to a Google results page. Can I include a search and display the results within my site?

  19. Reply Paul says:

    I have published my site via MobileMe – http//:www.jwcousins.com – but for some reason my search buttons don’t show up in Safari? They do on Chrome, surprisingly… Any idea how to solve this?

  20. Reply Ally says:

    Google has a nice search bar that can only search your site for the keywords entered. However, when I’m previewing my published site in Firefox and Safari, it’s like I never put in the search bar html snippet?

  21. Reply Ryan Newton says:

    Hi,

    I’m hosting my iweb site on an xserv that is on my company’s intranet. The google or yahoo searches can’t get in to spider the site. is there a solution that could run on my box that wouldn’t require outside access by a search engine?

  22. Reply BT says:

    THAT IS REALLY HELPFUL …I JUST FELT IN LOVE WITH THIS BLOG.
    THANKS

  23. Reply Zaino says:

    Adding a search to iWeb.
    Sorry could not find info, Inserted the search code no problem and it worked, but took me out of my site to a Google results page. Can I include a search and display the results within my site?
    Zaino

  24. Reply Charlie says:

    TIM,
    Brilliant! Thank you for this site!
    Using the google/yahoo search codes work, but take me out of the site I built.
    Is there a way to restrict the search to ONLY my site and not out to google? Thank you!!!!!

  25. Reply vivacazeaux says:

    Hi there,

    I would really love to know if I can create a search box that searches within my own site. I am building a holiday rentals site in iWeb with some Flash. I would like to be able to search apartments with specific facilities within the site. Is this possible?

    Thanks in advance.

  26. Reply Tash says:

    Hi,
    Firstly, thanks for the great information.
    One problem, though. I want my search box to search the WHOLE site. And also, even though I have put it on my blog page, when I search through it, it comes up my initial search telling me it couldn’t find any related searches. I have made sure I put the right URL in and everything, but it still won’t work! Please help!

  27. Reply Madeline Anne says:

    This code injection is excellent but how do you get the search results to open in a new window?

  28. Reply Name Allison says:

    I am trying to add your code to my web site. At one point it worked okay. It found words that were on the welcome page. Now it will not find anything. Not even words on the home page.

  29. Reply Eelco says:

    I put in the code into the HTML-fragment. It works fine in Iweb. However, when I publish the website it doesn’t show in the webbrowser. I placed the code next to accessoires.

Leave a Reply