Paste Code or iframe to Website

In the prior section, you copied the embed code (or created an iframe) for your interactive visualization that is hosted online by the primary site. In this section, we’ll demonstrate ways to properly paste the embed code or iframe to seamlessly display your interactive chart or map in the secondary site.

to WordPress.com sites

If you own free or personal or premium WordPress.com site, with a web address in the format anyone.wordpress.com, you cannot insert an embed code that contains an iframe or Javascript due to security concerns, as described on their support page. This means that if wish to show data visualizations created from this book on a WordPress.com site, you have two options. First, with your free or personal or premium plan, you can still insert a static image of a chart or map and a link to its interactive site, but that’s clearly not ideal. Second, WordPress.com suggests that you can update to their paid Business or eCommerce plan, which supports embed codes that contain iframes or Javascript, following instructions similar to the self-hosted WordPress sites below.

to Self-hosted WordPress sites

Make sure you understand the difference between a WordPress.com site above versus a self-hosted WordPress site. The latter is sometimes called WordPress.org site because anyone can freely download the software from that address and host it on their own webserver, or more commonly, have access to a self-hosted WordPress server through their school or work, or by renting space on a vendor’s webserver. But the web address of a self-hosted WordPress site does not necessarily need to end in .org. It also could be .com or .edu or any other ending, so don’t let that confuse you.

There are several ways to insert an embed code or iframe in a self-hosted WordPress site, but your success may depend on your WP version, your access level, and the complexity of the code.

For the first method, assume that you’re using WordPress 5.0 or above with the newer block editor, and you have editor or administrator access to your site. TODO: Check whether less-than-admin privileges strips out iframe codes, as it used to before WP 5.0

In your block editor, select a custom HTML block, and directly insert the embed code or the iframe, as shown in Figure 10.16.

Paste an embed code or iframe into a custom HTML block.

Figure 10.16: Paste an embed code or iframe into a custom HTML block.

For the second method, assume that you’re using WordPress with either the classic or block editor, and that you have administrator access to the site.

  1. Install and activate the iframe plugin, as shown in Figure 10.17. This plugin allows authors to embed iframe codes in a modified “shortcode” format surrounded by square brackets. Without the plugin, self-hosted WordPress.org sites will usually “strip out” iframe codes for all users except the site administrator. TODO: update this image
Install and activate the iframe plugin on a self-hosted WP site.

Figure 10.17: Install and activate the iframe plugin on a self-hosted WP site.

  1. In the WordPress editor, click to the text tab to view the code, and paste the embed code or iframe, as shown in Figure 10.18. Initially, the code you pasted includes iframe tags at the start (<iframe...) and the end ()...></iframe>).
Install and activate the iframe plugin on a self-hosted WP site.

Figure 10.18: Install and activate the iframe plugin on a self-hosted WP site.

  1. Modify the start tag by replacing the less-than symbol (<) with a square opening bracket ([). Modify the back end by erasing the greater-than symbol (>) and the entire end tag (</iframe>), and replace both of them with one square closing bracket (]), as shown in Figure 10.19.
Modify the front and back end with square brackets.

Figure 10.19: Modify the front and back end with square brackets.

TODO ABOVE: check method with more complex embed codes, check with non-admin privileges, and update images

to SquareSpace, Wix, or Weebly Sites

TODO

Summary

TODO