Embedding interactive rich media on WordPress

Source: Wiki Commons

There are a lot “one-click” tools available online that help you to create good visualisation and export to iframe for embedding into your site. Good use of those tools can better present your content to the readers. Note that the free version of WordPress hosted service does not allow embedding iframe, so they can only rely on shortcodes. For example, one can use is  to embed interactive charts generated from Google Sheets. See more options of available shortcodes for free version here

Data and News Society is operated on a paid plan so we installed the iframe plugin. This makes it possible to enable a wide range of 3rd party visualisation into your project. This tutorial is contributed by Jade Li to demo how to embed interactive content from several common tools. The general workflow is to first export the 3rd party project as iframe, find the URL in the src=”” section, and use  [ iframe src=”” ] to embed it into WordPress.

Google Chart (use shortcode)

Original URL: [Link]

Code

Screen Shot 2017-12-01 at 19.07.23

Result

DataWrapper

Original URL: [Link]

Code

Result

ArcGIS StoryMap/ KnightLab StoryMap.js

Original URL: [Link]

Code

Screen Shot 2017-12-01 at 19.07.44

Result

TimelineJS

Original URL: [Link]

Code

Screen Shot 2017-12-01 at 19.07.52

Result

Kumu

Original URL: [Link]

Code

Screen Shot 2017-12-01 at 19.07.57

Result

Canva

Original URL: [Link]

Code

Screen Shot 2017-12-01 at 19.08.05
(P.S. this example is special because iframe didn’t work for canva. If you click share button on canva website, the only link for embedding on wordpress is the original link.)

Infogram/Piktochart

Original URL: [Link]

Code

Screen Shot 2017-12-04 at 23.41.08.png

Result

Tableau Public

Original URL: [Link]

Code

Screen Shot 2017-12-06 at 20.46.47

Note:

If you directly paste the link above after “src=”, you can only embed a view of whole web page. What if we want to just paste the chart view? Here are the steps:

  1. copy and paste the link from the share button https://public.tableau.com/shared/JWS442STS?:display_count=yes
  2. noticed that there’s a question mark”?” in the middle of this link.
  3. delete the part after the question mark, then the original link turns to be like https://public.tableau.com/shared/JWS442STS?
  4. add “:showVizHome=no&:embed=true” behind the question mark. Original link turns to be like https://public.tableau.com/shared/JWS442STS?:showVizHome=no&:embed=true
  5. then add the link above into the iframe coding form.

Result


Posted by: jadeimaginist

2 thoughts on “Embedding interactive rich media on WordPress”

  1. Google Chart itself is not responsive. It has a fixed width x height no matter what is the size of the iframe. It was developed long before the notion of responsiveness became the mainstream. You may want to try other charting platforms that export to responsive charts.

Leave a Reply