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
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
.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.
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.
- 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
- 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 ()
- 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.
TODO ABOVE: check method with more complex embed codes, check with non-admin privileges, and update images
to SquareSpace, Wix, or Weebly Sites