Embeddable Web Content in Practice

John Tucker

Jun 13, 2017·7 min read

One of my projects requires enabling non-developers to contribute rich content for the web. Since training these folks on HTML, CSS, and JavaScript is not an option, I have been working to put together instructions on using various embeddable web content (aka widgets or gadgets) to share. If you happen to know of other popular solutions, please share in the comments below and I will include them.

All of the solutions ultimately involve generating some code that you will copy and paste into your web page. In some cases, the code will be an iframe and in others it will be JavaScript. While most web sites (where you are embedding the content into) support both iframe and JavaScript embedding, some only support iframe embedding (for security reasons).

Most of the solutions are responsive, i.e., you can set the width of the embedding to be a percentage (say 100%) of available horizontal space. This is particularly important to keep in mind if it is important that your web site supports both desktop and mobile.

FeedWind (iframe and JavaScript)

RSS feeds allow you to subscribe to timely web content, e.g., CNN provides a number of news RSS feeds. While you cannot directly embed RSS feed content, with the FeedWind service you can.

To create…

1. Create a FeedWind account.
2. Use the Create Widget button (and RSS Feed content source) to create a new widget.
3. Enter the RSS Feed URL and update other settings as desired.
4. Press the Save & Get code button.
5. Copy the generated embed code and paste into destination page.

Tips:

• The default generated embed code is in a JavaScript format and may not be usable in all environments; in which case you can use the iFrame version.
• FeedWind can also be used to create embedded content from Facebook and Google Calendar.
• The generated iframe embed code does not automatically set the width, height (looks like it needs to be 2 pixels larger than expected to avoid the extra scrollbar), and frameborder. A corrected version for a 400px high widget (with widget key obmitted) is:

<iframe src="https://feed.mikle.com/widget/v2/[OBMITTED]/" width="100%" height="402px" frameborder="0"></iframe>

Google Maps (iframe)

Maps, and Google Maps in particular, are commonly used embedded content. To create…

1. Use or create a Google account.
2. Follow directions to get an API key.
3. Updating YOUR_API_KEY, copy the following embed code and paste into destination page.

<iframe
  width="600"
  height="450"
  frameborder="0"
  style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

Tips:

• The iframe content is fully responsive; so to resize simply change the iframe’s width and height attributes.
• There are five modes (place, directions, search, view, and streetview); replace place in the iframe’s URL; each with its own parameters (the part of the URL after the ?). Google provides a wizard tool that will generate the most common configurations.

Google Sheets Charts (iframe)

Charts, e.g., bar charts, pie charts, etc., are a popular way to communicate data and Google Sheets provides an easy-to-use mechanism to embed them.

To create…

1. Use or create a Google account.
2. Using the application menu, navigate to Google Drive.
3. Using the New menu, create a Google Sheet (Blank spreadsheet).
4. In the first row enter in the column names, e.g., Employer (in column A) and Number of Employees (in column B).
5. Starting with the second row, enter in the data, e.g., U.S. Federal Goverment (in row 2 column A) and 2711000 (in row 2 column B) and Walmart Stores (in row 3 column A) and 150000 (in row 3 column B).
6. Select the entire table (columns names and data) and select menu: Insert > Chart.
7. Customize chart as desired; including sizing.
8. Select chart menu: Publish chart… > Embed > Publish

9. Copy the generated embed code and paste into destination page.

Tips:

• Google Sheets’ charts are not responsive; so if mobile compatibility is important, you can size the chart appropriately, .e.g., less than 320px wide for iPhone 5 compatibility.

Google Sheets Charts — Geo (iframe)

Geographic charts are a special case. Like other charts, you can use Google Sheets to create them.

Tips:

• The Geo chart with markers (use Geo Chart instead) is buggy.
• The interactive embedding option does not work for Geo Chart.
• The first column needs to be either the two character code (ISO 3166–1 alpha-2 code) or country name (ISO 3166 Maintenance Agency — ISO 3166/MA).
• The second column needs to be numbers.

SoundCloud (iframe)

SoundCloud provides a wealth of music and audio tracks.

To create…

1. Create a SoundCloud account.
2. From a music or audio track, press the Share button, Embed tab.
3. Copy the generated embed code and paste into destination page.

Tips

• The iframe content is fully responsive; so to resize simply change the iframe’s width and height attributes.
• The embedding can be configured via poorly documented URL parameters.

&color=FF4444 // play-button and equalizer graphic (if not &visual=true)
&auto_play=false // should be obvious
&show_artwork=true // show the artist-graphic on the left
&show_comments=true // show fans commenst under equalizer
&show_playcount=true // number of times played
&hide_related=true // don’t force user over to Soundcloud after play
&show_user=false // don’t show uploaders name
&show_reposts=false // unknown
&liking=fals‌​e // don’t show like button
&visual=true // use artist-graphic for background
&buying=false // no buy button
&sharing=false // no share button
&download=false // no download button
&start_track=4 // start at specific track (for lists)
&following=false // removes follow when mouseover artwork

StoryMapJS (iframe)

To create…

1. Use or create a Google account.
2. Go to StoryMapJS and press the Make a StoryMap button.
3. A story map consists of a title slide followed by a series of slides consisting of media, text, and a position on the map (drag the marker to position).
4. Use the Options button to set options such as the content width and height.
5. When done editing, press the Save button.
6. Press the Share button and copy the generated embed code and paste into destination page.

Tips

• If slide positions (on Map) are too close together, the zoom level of the map may be too large for the Map Type.
• Because StoryMapJS uses the Leaflet JavaScript library under the hood, you can use Leaflet providers for the custom Map Type (accessed using the Options button).

Timeline (iframe)

Timeline, provided by the Knight Lab, lets you tell stories using media through a chronological timeline.

To create…

1. Use or create a Google account.
2. Go to Timeline and press the button Make a Timeline.
3. Follow steps provided.
4. Copy the generated embed code and paste into destination page.

Tips

• You manage the content of the timeline through the Google Sheets spreadsheet.

Twitter (JavaScript)

Like RSS feeds, Twitter lists, e.g., handles, hashtags, etc., can be easily embedded.

To create…

1. Open Twitter Publish.
2. Enter a Twitter URL, e.g., https://twitter.com/NatlParkService
3. Follow link to set customization options.
4. Copy the generated embed code and paste into destination page.

Tips:

• Twitter only supports JavaScript embeds; not iframe ones.

YouTube (iframe)

YouTube is the de facto standard for web video and provides an simple embedding solution.

To create…

1. Use or create a Google account.
2. Open YouTube.
3. Using the upload button, upload video (skip if using an existing video).
4. When viewing a video, select the Share > Embed menu.
5. Select the desired video size.
6. Copy the generated embed code and paste into destination page.

Tips

• When generating the embed code, select the SHOW MORE button for display options.
• The generated embed code has an erroneous bit of text at the end of the URL that should be removed (otherwise some display options may not work): ?ecver=1
• If you want to have the video automatically play, add &autoplay=1 to the end of the URL.
• To enable closed captioning, add closed captions to the YouTube video; the automatically generated closed captioning does not play when using the embed code.
• YouTube video embeds can be made responsive by removing the explicit width and height iframe attributes, styling it, and wrapping it in a styled div.

<div style="position: relative; height: 0px; padding-bottom: 56.25%; over-flow: hidden">
  <iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%" src="https://www.youtube.com/embed/LIjMBLVHDQs?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen> 
  </iframe>
</div>