EurActiv Mothership

Embedding

—

by

Matthew Hawker
in 
Embedding Content on EurActiv
  - Basics (Youtube, Vimeo...)
  - Embedding EurActiv content on EurActiv
  - More Providers
    - Google Trends
    - Tiki-Toki timelines
    - Storify
    - CartoDB maps
Embedding EurActiv content on another website

Embedding Content on EurActiv

Embedding content is generally handled by WordPress itself.  It is as simple as copy/pasting the page URL of the item that you wish to embed into the text editor. For example, typing this URL:

https://www.youtube.com/watch?v=BKorP55Aqvg

will result in this embed:

For security reasons, services that can be embedded must be white-listed.  WordPress maintains a list of services that are whitelisted by default.

To request the addition of another service, please submit a support ticket.  Please note that only websites that are set up as oEmbed providers or that are compatible with embed.ly can be added in this manner.

Embedding EurActiv content on EurActiv

From an author’s perspective, embedding EurActiv content on EurActiv works in the same manner as as embedding third party content. There is however the technical difference that embedded content is directly injected into the page HTML instead of of as an IFRAME.  As a result, the embeds may appear slightly differently in the text editor and on the front end.

More 3rd Party Providers

In addition to the WordPress built-in providers, we’ve enabled the embedding of some other third party providers.

The process for embedding Google Trends widgets is a bit convoluted, but it works. First you need to get the URL to the widget itself:

  1. Go to the Google Trends graph you want to embed.
  2. Click on the “Share” button (it’s under the 3 vertical dots at the top right of the graph).
  3. Click on Twitter.
  4. Get the shortened URL (It’s the URL at the end of the Twitter message).
  5. Paste the shortened URL into your browser.
  6. The unshortened URL should appear in your browser bar.

In the end, you should have a URL that looks like this:

https://www.google.co.uk/trends/story/GB_cu_EoBj9FIBAAAj9M_en#horserace_chart_2c11d1aa-a23d-4da3-a08c-7c71f6d0c590

The embed looks like this:

Tiki-Toki Timelines

Paste the URL of the embed:

http://www.tiki-toki.com/timeline/embed/664821/3986672289/

Which renders:

Storify

Paste the URL of the storify page:

https://storify.com/euractiv/the-new-cap-stories-from-on-the-ground

Which renders:



CartoDB

CartoDB is a service that allows you to create interactive maps. It is used by Google Trends to provide interactive maps.

https://googledataorg.cartodb.com/u/googledata/viz/fefbeda2-2e5e-11e6-b291-42010a14800c/embed_map

Which renders:

Embedding EurActiv content on another website

EurActiv is set up as an oEmbed provider. This means that any third party system that is configured to trust EurActiv can embed EurActiv posts simply by pasting the URL.

Most third party providers will not be set up to trust EurActiv. There are two options for embedding EurActiv content in this case:

First, third parties can embed EurActiv content via embed.ly. This is probably the best option.

Alternatively, third parties can embed content manually. An embeddable version of page is available by appending “embed/” to any page URL. For example, the URL

http://www.euractiv.com/section/global-europe/news/slovakias-fico-poised-for-win-in-boost-to-eus-anti-refugee-east/

would become

http://www.euractiv.com/section/global-europe/news/slovakias-fico-poised-for-win-in-boost-to-eus-anti-refugee-east/embed/

This link can be used in an IFRAME to embed the article abstract, for example:

<iframe src="[euractiv_url]/embed/" width="X" height="X"></iframe>