Add Calendars and Other Google Gadgets to a Web Page in Expression Web

Have you ever wondered how people got those neat little tools that automatically displayed the date or gave information about local weather to appear on their web pages? A major source for these objects is the free library of Google gadgets. We’ll show how you can add these fun little toys to a web page using Microsoft Expression Web.

The first thing we’ll need to do is get the HTML code for the Google Gadget that we want to add to our web page. The steps are similar for almost any Google Gadget. For our example, we’ll use the Date and Time gadget. Below is a screenshot of the opening page for this particular gadget. (Click any image for a larger view.)

 

To begin, click the Add to your webpage button. You will be redirected to a new page where you can customize the gadget to mesh better with the design of your web page in Expression Web.

 

Some gadgets will have more customizable options than others, but you will always be able to see how your modifications will look in the preview window for the gadget. For the Date and Time gadget in our example, we’ll make a few minor changes such as giving the gadget a new title, modifying the height and width, and changing the color.

 

When you’re finished making your changes, click the Get the Code button. The code that you will need to copy and paste into your web page in Expression Web will appear in a box below the button. Highlight all of the HTML text in the box, and then hit Ctrl + C to copy.

 

Note: Make sure that you’ve selected all of the HTML text before copying. Often, the HTML code here will not all be visible in the box, and you will need to scroll down to select it all. To ensure that you’ve copied the entire block of code, check that the copied text begins with “<script” and ends with “</script>”.

We now want to return to the web page we are designing in Expression Web. If you’re not using the Split page view, switch to that now. Place the cursor at the point in the web page where you want to add the gadget. Notice that a ghost cursor will appear in the Code section of the Split view, indicating what portion of the HTML code corresponds to that position on the web page.

 

Move your cursor to that ghost position in the Code section, and use Ctrl + V to paste in the Google gadget code.

 

Save the web page in Expression Web the way that you normally would. You might be worried here that you don’t see the Google gadget in the Design view of your page, but that is normal. If you want to check to make sure that the gadget is appearing in the web page, select Preview in Browser from the File menu on Expression Web’s main toolbar.

 

If you’ve added the HTML code correctly, the Google gadget should be seen in this preview as shown in the above screenshot. It might take a little practice to get the hang of placing the gadget exactly where you want it in your web page design, but don’t be afraid to experiment a little. Just remember to make a copy of your web page before you start making changes so you don’t accidentally delete some other component of your design.

For more tips and tricks, take a look at the other items in Bright Hub's collection of Expression Web tutorials.