Using oEmbed to simplify embedding

oEmbed is a format for embedding third party content (such as videos, photos or charts) in to your website or blog. Providers like YouTube and Flickr implement oEmbed, and as of this week users can now take advantage of oEmbed with ChartBlocks charts.

What does this mean?

Put simply, instead of having to find the (albeit not that long) embed code for your chart, you can just paste the URL of your chart instead.

<iframe src="//"

becomes just the line

When a visitor arrives at your website, instead of seeing the URL they see a marvellous chart instead!

How it works

Like magic, behind the scenes your CMS or blog will visit the URL you pasted and ask the page if it has any oEmbed links. The ChartBlocks pages oblige, providing both a JSON or XML format to consume.

Your CMS or blog then does one final request to one of the links asking for information on how to embed the chart. Contained within that response is the HTML for the iFrame.

The benefits of doing this over the iFrame are that if at any time we change our embed codes, your charts continue to load. That and its much easier to paste a URL than some HTML!

How do I use it?

Link example

You will need a website that supports oEmbed, blog software like Wordpress and many content management systems should already support oEmbed.

For security reasons it is sometimes necessary to enable an oEmbed provider. Your CMS provider should have more details, but in essence you need to add ChartBlocks oEmbed URLs to an authorised list.

Once you've enabled oEmbed its normally just a case of pasting the public URL of your chart on to its own line within your content.


Using oEmbed and Wordpress

Wordpress logoIf you use Wordpress for your blog we've made it really easy to start using oEmbed links in your posts. Just install the ChartBlocks plugin and start pasting URLs!

Get the ChartBlocks wordpress plugin