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