Embeddable Web Content in Practice

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)

Image for post
Image for post

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…

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)

Image for post
Image for post

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

<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)

Image for post
Image for post

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…

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)

Image for post
Image for post

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)

Image for post
Image for post

SoundCloud provides a wealth of music and audio tracks.

To create…

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)

Image for post
Image for post

To create…

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)

Image for post
Image for post

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

To create…

Tips

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

Twitter (JavaScript)

Image for post
Image for post

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

To create…

Tips:

  • Twitter only supports JavaScript embeds; not iframe ones.

YouTube (iframe)

Image for post
Image for post

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

To create…

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>

Written by

Broad infrastructure, development, and soft-skill background

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store