Every year one of the questions most frequently asked by journalism students is “How do I embed a map/chart/infographic/liveblog/video/audio/gallery/tweet/document in a WordPress site?”
Here is a comprehensive overview of what is and is not possible in terms of embedding, and what you should do if you cannot embed.
To embed in a WordPress.com site, the service should (probably) be listed on the shortcode page or social tools page
If you want to know whether you can embed something on WordPress, there are two pages to check first:
- The guidance on shortcodes on WordPress.com’s support pages
- The guidance on WordPress’s integration with Social Tools
Here’s why: WordPress.com does not allow you to use normal embed code (anything that begins with <iframe> for example) because it represents a security risk to all the other sites hosted by the same service.*
As a workaround WordPress.com provides other ways to embed some types of content. This is normally done through a shortcode in square brackets, or by simply pasting the URL of the content you want to embed.
For example: for a special SoundCloud player you need to use a shortcode in square brackets like this.
And to embed a YouTube video all you have to do is paste its URL and WordPress.com will turn it into an embedded video.
Likewise for tweets, Facebook updates, Instagram images, and other media.
Embedding audio in a special player
If you want to embed an audio file in a player you just need to know the URL of the audio file.
So, although Audioboom is not listed on the services you can embed Audioboom audio by simply using the direct link to the MP3 of the audio (which you can do by adding .mp3 to the URL of the page holding it).
Multimedia embedding is well supported, but interactivity is not
These shortcodes and paste-the-URL options are not available for every service.
Broadly speaking embedding for video, audio image and social media services is well supported.
But when it comes to maps, charts, liveblogs and interactivity, assume it’s not going to be possible to embed.
There are a few exceptions to this: interactive image service ThingLink, for example, say you only need to paste a URL for WordPress to embed it.
And mapping service CartoDB, for example, say they are also supported by WordPress:
Google Maps can also be embedded.
If you cannot embed
If the service you are using is not listed at the shortcodes or social tools links above, and it doesn’t involve an audio URL, then check by searching for “Embedding [insert service name] on WordPress.com” and ignore any results that mention plugins or pages hosted on WordPress.org.
Expect to discover that you cannot embed a live or working version. For example, currently searches like that will tell you that:
- You cannot embed liveblogging and curation tools Storify and CoverItLive;
- You cannot embed maps made with Google Fusion Tables, BatchGeo or OpenHeatMap.
- You cannot embed interactive infographics made with Infogr.am or Piktochart.
- And you cannot embed interactive charts made with Datawrapper or Tableau. (But you can embed Datawrapper in Medium posts)
In these cases, your best option is to take a nice big screengrab of your map/chart/interactive/infographic/Storify/CoveritLive and use that in your post.
Then, link the image to the live version.
Users may not know that they can click the image to see the live version, so add a caption that not only describes the map/liveblog but also invites the user to “Click the map to explore an interactive version”.
Once that caption has been created you can also link that invitation to the same live or working version of the liveblog or interactive.
Then, just to cover all angles, add an explanatory paragraph or two in the main text of your post and link that (e.g. ‘We’ve created an interactive map of…’).
Fancy workarounds
Sometimes you may stumble across a workaround that someone has come up with. Here, for example, one blogger explains a way to embed a CoverItLive liveblog in a WordPress.com blog.
But always read the comments first and look at the date: WordPress has changed a lot over the years, and some things that may have worked a few years ago might not work now.
Other workarounds explain how to export from one service into another: here, for example, Todd O’Neill explains how to take a BatchGeo map and import it into Google Maps so you can then embed it in WordPress.
“I bought a domain from WordPress, does that mean I can use embed code?”
If you have bought a domain from WordPress.com, this makes no difference at all. Your site is still hosted by WordPress.com, and subject to the same restrictions on embedding.
What you get for your money is a different name in the browser address bar, but nothing else has changed.
*Some other notes:
- Your best port of call for any help on this, aside from the links mentioned above, is the service’s own help pages and Twitter account. If you find search results frustrating or confusing, try tweeting @ the company on Twitter.
- Know the difference between support pages on WordPress.com, and those on WordPress.org. The pages on support.wordpress.com are for users on WordPress.com. The pages on wordpress.org are aimed at people who have bought hosted and installed WordPress on that hosting instead.
- If you host the site yourself rather than on WordPress.com, you can do what you want. But this post assumes that’s not what you’re doing.\
They just added shortcode for Storify recently, if I recall correctly
Got a link? I can’t find anything about that.
Thanks for the mention. I’ve had an assignment in my Writing for Digital course since 2012. My students have a required website that they use to publish their work.
I’ve come up with workarounds like yours to enable students to complete projects.
One benefit to giving them a kluge to embed content is that they learn the web is not perfect or easy and that it takes a level of expertise to publish content successfully. You grab your teachable moments when you can.
Thanks again.
Cheers!
Todd
Pingback: 8 common mistakes when writing for the web – and what to do about them {now 9} | Online Journalism Blog
Pingback: A simple hyperlocal experiment which shows how publishers can engage with different audiences | Online Journalism Blog
Pingback: Datawrapper Examples | *MaySpace*
Pingback: Datawrapper: Visualize the World | *MaySpace*
Pingback: Embedding is the new linking | Online Journalism Blog