“How do I embed a map/video/infographic/audio/timeline/chart/liveblog on WordPress?” Everything you need to know

wordpress logo

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:

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:

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.\
Advertisements

8 thoughts on ““How do I embed a map/video/infographic/audio/timeline/chart/liveblog on WordPress?” Everything you need to know

  1. Todd O'Neill

    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

    Reply
  2. Pingback: 8 common mistakes when writing for the web – and what to do about them {now 9} | Online Journalism Blog

  3. Pingback: A simple hyperlocal experiment which shows how publishers can engage with different audiences | Online Journalism Blog

  4. Pingback: Datawrapper Examples | *MaySpace*

  5. Pingback: Datawrapper: Visualize the World | *MaySpace*

  6. Pingback: Embedding is the new linking | Online Journalism Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s