More widgets

Where are we?

You’ve seen how to add search widgets, social widgets, and games to your site. Let’s look at some others.

This lesson’s goals

By the end of this lesson, you should:

  • Be able to add YouTube videos to your site.
  • Be able to make a Flickr badge.
  • Know where to get more fun widgets!

YouTube videos

YouTube gives you HTML code to add a video into your page. Copy their code, and paste it into your HTML.

Visit a YouTube page, like this one. You’ll see an embed button:

Embed button

Figure 1. Embed button

This is what I saw at the time of writing. It may have changed by now.

YouTube will give you HTML code you can copy and paste into your own HTML.

Here’s a page I’ve prepared for the video:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Video</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      body {
        background-color: #FFFFDD;
        font-family: sans-serif;
        font-size: 14px;
      }
      #video_container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Video</h1>
    <p>Here is a video, explaining why teaching Web stuff is hard.</p>
    <div id="video_container">

    </div>
  </body>
</html>

Figure 2. Page ready for video

I’m going to put the video code in line 21.

Notice that I’ve made a container for the video, in line 20. Why? Check the CSS. I’ve centered the container, so the video will be centered on the page.

Here’s the code I got from Google:

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/F0ue3BxvMAU" frameborder="0" allowfullscreen></iframe>

Figure 3. Code from Google

I pasted into line 21, and saved. You can see the result.

Exercise: Add a YouTube video

Find a YouTube video to put on your site. If you’re stuck for ideas, try this one.

Upload your new page to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

A Flickr badge

Flickr is a photo sharing service. Here’s a badge I made:

www.flickr.com

To make it, I went to Flickr’s badge creation page. I choose one of my photos:

Choosing a photo

Figure 4. Choosing a photo

Then I clicked the Next button at the bottom of the page:

The Next button

Figure 5. The Next button

Flickr asked me a few more questions, like how many photos I wanted to display. Then I got some code:

The Flickr code

Figure 6. The Flickr code

I copied it into my HTML. All done!

Even more widgets

There are a bazillion other widgets you can add. Weather reports, polls, news headlines, stock information… you name it.

Here are some places to get widgets:

Exercise: Add the Dog Breed widget

Go to Google’s gadget directory. Find the Dog Breeds gadget from PuppyFinder.Com. Add it to your site.

Enter the URL of the page on your server.

(Log in to enter your solution to this exercise.)

Summary

It’s easy to add YouTube videos to your site. Go the YouTube page for the video you want to show, and copy-and-paste some code.

You can use photos from your Flickr stream to create a simple badge Flickr give you the code.

There are bazillions of other fun widgets!