The Wonderful World of Web Widgets
A web widget is a bit of code you can add to your website (or blog or wiki). The code can grab content from another website and insert it into a page on your own site. Web widgets go by different names, including HTML embeds, embed code, plug-ins, and gadgets. No matter how it might be labeled, chances are your website has a way for you to paste embed code into a page so that the web widget appears to be part of that page.
Since web widgets are embedded, visitors do not have to leave the page or open a new tab to see the content. For example, it's really nice to have a YouTube video player right on the webpage instead of having to click a link that opens YouTube in a new tab. Embedding a video also makes the page more visual and grabs attention. While YouTube embeds are common, there is a whole world of web widgets that you can add to your website for free.
I’ve embedded a weather widget below. I copied the code provided by Accuweather.com and pasted it into my website’s editor.
Places like Accurweather.com that offer embed code usually make it easy to copy the code. To access embed code, you may need to first click an Embed, </>, Menu, Share, or Export button.
While previewing a web widget’s code, you may be presented with options to customize the widget. Then you’ll see a bunch of text with brackets, quotes, numbers, and such. Don’t let the HTML code intimidate you. All you have to do is copy the code. You don’t have to decipher the code or change it. Just copy it.
Each website builder has its own method for inserting the code. For example, Weebly users drag the Embed Code element onto a page and paste the copied code. Wikispaces users click the Widget button in the toolbar and choose Other HTML to add embed code. Until recently, the new Google Sites did not support embed code. That changed in December 2017 when Google added the Insert → Embed → Embed Code option.
One thing to keep in mind is that the web widget may not display properly (or at all) until you save or publish the webpage. Even after publishing or saving, you may need to visit the published page’s URL in order to see the widget, as they often do not appear when previewing a page.
Web widgets have been around a long time. I remember adding a joke of the day widget to my class website in 1999. Each day the widget would display a new joke automatically. I embedded a very similar widget, The Daily Chuckle from Surfing the Net with Kids, below. Each time someone visits this page, the widget’s most current content is pulled from surfnetkids.com and inserted onto this page.
There’s a big world of web widgets out there. You can embed weather reports, jokes, YouTube videos, audio recording, visitor maps, Twitter streams, documents, and so much more. Explore the world of web widgets using the buttons below. I’ve categorized widgets that I think teachers might find helpful. I’ve embedded sample widgets, and I have provided a link to the source of each widget. Perhaps you'll find some embed code you'd like to add to your website. Your website will thank you for the fresh, new content.
Explore the world of web widgets...
Some things to keep in mind when working with embed code…
- Some web widgets rely on the Flash plug in to function. I try to avoid these widgets because Flash can be blocked on computers, and it does not work on mobile devices.
- Embed code pulls content from another website and places it on your site. That means you are not completely in control of that content. One day the widget may change or stop working.
- Your school’s web filter may block the site that is hosting the embedded content. If that’s the case, then the widget will not be displayed when your site is accessed at school.
- Not only can having too many web widgets make a page look cluttered, web widgets can make your page take longer to load.
- If a web widget is not centered on your page and you’d like it to be, try typing <center> before and </center> after the embed code. This doesn’t always work, but it’s worth a try.
