Embedding Widgets in Columbia's Learning Management Systems
Many Web services offer "widgets" (a.k.a. tools that allow the service to be used in other sites). Examples of embeddable Web services abound. They include:
- weather updates
- stock tickers
- news updates via RSS feeds
- video chat windows
- search widgets
- maps
- in-browser-editable documents.
Example: Weather
Below is a small widget that embeds the weather forecast for New York from weatherlet.com into this page.
This is the code that achieves the widget above:
<embed src="http://www.weatherlet.com/weather.swf?locid=USNY0996&unit=s" quality="high" wmode="transparent" bgcolor="#CC00CC" width="184" height="76" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
How To Get Started
Embedding a widget onto a web page is usually accomplished with a chunk of HTML code or JavaScript (like that noted above). Putting a widget's code into a learning environment is often as easy as copying and pasting this code. But where and how you do so depends on the learning management system (LMS) you're using.
CouseWorks/Sakai/Edblogs
CourseWorks, Sakai and EdBlogs each have a little button in their editor bar that allows you to view and edit the HTML code of the page. Click on the "HTML" or "Source" button (depending on the LMS that you're using) to toggle into the HTML mode and paste the widget code into the appropriate location. If your LMS presents HTML code from the get-go (e.g. you are not presented with a toggle button) then you can paste the code directly into the text area and save the results. After you submit/save, you should see the widget embedded in the page.
Wikispaces/Wikischolars
Wikispaces-based course sites make it somewhat easier to embed widget code. While editing your wiki page, click on the "insert widget" button (the small, blue television icon) in the toolbar. In the list of options, either select a preset widget or click on the "other" tab at the bottom and then paste the code in your clipboard into the supplied text area. After you save the widget and save the page, you should see the embedded widget in the page.
