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:
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
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:
Figure 4. Choosing a photo
Then I clicked the Next button at the bottom of the page:
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:
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:
- Yahoo widget gallery
- Widgetbox
- Google gadgets (Widgets are gadgets in Googleland)
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!
