oEmbed

The oEmbed standard makes it easy to create an embed by just providing a URL to the publication. Read more on oembed.com This document describes how the Infogram oEmbed API endpoint is used.

Configuration

URL scheme:

https://infogram.com/*

API endpoint:

https://infogram.com/oembed

Responsive Example

https://infogram.com/oembed?url=https://infogram.com/dd9b834c-20c6-48bb-92c3-1d5877850f65

Response:

{
  "version": "1.0",
  "type": "rich",
  "provider_url": "https://infogram.com/",
  "provider_name": "Infogram",
  "author_url": "iconews",
  "description": "",
  "title": "Nuisance calls and messages - action we've taken, October 2016",
  "thumbnail_url": "https://s3-eu-west-1.amazonaws.com/infogram-thumbs-1024/5e297813-2852-426c-a5d6-23f1acf01242.jpg",
  "uri": "https://infogram.com/dd9b834c-20c6-48bb-92c3-1d5877850f65",
  "html": "<div class=\"infogram-embed\" data-id=\"dd9b834c-20c6-48bb-92c3-1d5877850f65\" data-type=\"interactive\" data-title=\"Nuisance calls and messages - action we've taken, October 2016\"></div><script>!function(e,t,n,s){var i=\"InfogramEmbeds\",o=e.getElementsByTagName(t),d=o[0],a=/^http:/.test(e.location)?\"http:\":\"https:\";if(/^\\/{2}/.test(s)&&(s=a+s),window[i]&&window[i].initialized)window[i].process&&window[i].process();else if(!e.getElementById(n)){var r=e.createElement(t);r.async=1,r.id=n,r.src=s,d.parentNode.insertBefore(r,d)}}(document,\"script\",\"infogram-async\",\"//e.infogram.com/js/dist/embed-loader-min.js\");</script>",
  "width": 1024,
  "author_name": "Information Commissioner's Office"
}

Iframe Example

You can request an iframe version of Infogram embed code by specifying infogram.com/oembed_iframe when invoking the endpoint:

https://infogram.com/oembed_iframe?url=https://infogram.com/dd9b834c-20c6-48bb-92c3-1d5877850f65

Response:

{
  "version": "1.0",
  "type": "rich",
  "provider_url": "https://infogram.com/",
  "provider_name": "Infogram",
  "author_url": "iconews",
  "description": "",
  "title": "Nuisance calls and messages - action we've taken, October 2016",
  "thumbnail_url": "https://s3-eu-west-1.amazonaws.com/infogram-thumbs-1024/5e297813-2852-426c-a5d6-23f1acf01242.jpg",
  "uri": "https://infogram.com/dd9b834c-20c6-48bb-92c3-1d5877850f65",
  "html": "<iframe src=\"//e.infogram.com/dd9b834c-20c6-48bb-92c3-1d5877850f65?src=embed\" title=\"Nuisance calls and messages - action we&#39;ve taken, October 2016\" width=\"1024\" height=\"\" scrolling=\"no\" frameborder=\"0\" style=\"border:none;\"></iframe>",
  "width": 1024,
  "height": 400,
  "author_name": "Information Commissioner's Office"
}

iFrame Height Resizing

Infogram allows platforms to change the height of the embed through JavaScript. This is useful if your Embed has a fixed height or does not predictably resize with default responsive sizing. Inspiration

Document inside Infogram’s embed IFRAME sends information on infographic’s height in pixels via postMessage API like this:

window.parent.postMessage(JSON.stringify({
  src: window.location.toString(),
  context: 'iframe.resize',
  height: 300 // pixels
}), '*')

And to listen for message event you would need this javascript code in your page:

<script>
  window.addEventListener('message', function(e) {
    var data;
    try {
      data = JSON.parse(e.data);
    } catch (e) {
      return false;
    }

    if (data.context !== 'iframe.resize') {
      return false;
    }

    var iframe = document.querySelector('iframe[src="' + data.src + '"]');

    if (!iframe) {
      return false;
    }

    iframe.height = data.height;

    return;
  });
</script>