Skip to main content

Getting Started with LibGuides (Library Staff Only): 4. Embedded Media & Widgets

A guide for library staff when creating new libguides

About Embedded Media & Widgets Boxes

Use an Embedded Media & Widgets box to embed the code for a youtube video, google map, search widget, etc.

Note that many videos are too large for the left column, though they can be resized by changing the code--see below.

You can embed code in Rich Text Boxes, but you have to understand how to use the Plain-Text Editor. Using the Embedded Media & Widgets boxes is easier if you don't want to hassle with html coding.

Fitting a YouTube Video in a Left Column Box

This is the way unedited youtube embed code looks

<iframe width="420" height="315" src="http://www.youtube.com/embed/amN8UynV5pA" frameborder="0" allowfullscreen></iframe>

The part in bold controls the size of the video. width="420" height="315" will fit in a center libguides box.

To fit a video in a left box, change the code to width="180" height="135"

How to Add a Twitter Widget

To create a Twitter Widget (you do not need a twitter account to do this):

1. on anyone's twitter page, click on the Resources link


2. Then go to Widgets
3. pick the widgets for my website option
4. select the widget type you want
    profile will show the updates from a single tweeter
    lists will show the updates from a user's list
    search will show updates from a search term or hashtag
5. fuss around with the settings to get the right look and feel
6. click the finish and grab code button
7. copy the code.
8. Add a new Embedded Media box
9. Use Edit Media/Widget Code to paste in the twitter code
10. reload the page.

Adding/Editing Embedded code

Adding a video to an Embeded Media&Widgets box:

  • Click on Embed a Video/Audio Clip
  • Paste in the embedding code cut from the video sharing site.
  • Click on Embed It

Editing a video link in an Embeded  Media&Widgets box:

  • Click on Embed a Video/Audio Clip
  • Edit the information you want to change.
  • Click on Save Changes.

Note: Descriptive text about an Embedded Media & Widgets box as a whole can be entered at the top of the box.

Example YouTube Video

to get the code, find the youtube video you want and look for the word EMBED. As of 6/2011, you could find this by clicking on the Share button and then on the embed button that appears. All you have to do then is copy the code.

Example Search Widget

To create a proquest search widget and get the code:

1. login to (or create) your My Research account

2. Click on the Widgets tab

3. Fuss around with the various options to adjust size, wording, and most importantly, which databases will be searched.

4. Click on Get Widget

5. copy the code.

How to Add a Search Widget

To feature a WorldCat or other catalog search widget in a LibGuide:

1. Browse WorldCat's Web Services page.

2. Select WorldCat search widget or another widget option

3. Create a WorldCat Affiliate account and log in

4. Evaluate whether you want  to add a Narrow (150 px), Wide (250 px) or Tabbed (500 px wide) search box to your guide

5. Copy the provided widget code in full

6. Paste widget code in a Rich Text/Dynamic Content/Scripts box (for 'Narrow' or 'Wide'), or Embedded Media & Widgets box ('Tabbed' as well as 'Narrow' and 'Wide')

7. Save your box and refresh the page to see your search widget in action

How to Add a Spicynode

Spicynodes is a tool you can use to create an interactive concept map that you can embed elsewhere on the web. To create your own map, you'll need to create a (free) spicynode account.

Once you've created a spicynode map, follow these steps to embed it in your libguide.

  1. Add a new Embedded Media box
  2. copy the embed code for your spicynode map
  3. Use Edit Media/Widget Code to paste in the code.
  4. Save.
  5. reload the page.

Art & FGSS/GWS Librarian

Alex Chappell's picture
Alex Chappell