Embedding Content From Other Sites

WordPress makes it easy to embed content from many content providers by simply inserting the external URL (its web address) on a separate line in a page or post if you are using the Classic Editor.

If using the Block Editor, click the plus sign to add a new block, select “Embed” and choose the content provider and paste in the URL. See below:

 

Custom Embeds

In some cases, content cannot be embedded this way. Some content providers supply embed codes that use HTML iframe tags which pose a security risk for the Commons. Others suggest using out-of-date plugins.

Before you try any of these, you might want to activate the EmbedPress plugin, which purports to be able to embed over a hundred file types. You might find it a more convenient solution.

Listed below are file and content types which require a bit more effort to embed.

PDFs

To embed a PDF, activate the “PDF Embedder” plugin. Go to “Add Media” and add the PDF file to the media library.

In the Block Editor, you will see “PDF Embedder” as a block. Add it and select the PDF from the Media Library.

Microsoft Files and PDFs

Microsoft Files and PDFs can be embedded using the “Embed Any Document” plugin. The documents are stored in the Media library. File size needs to be less than 10 MB.

In the Classic Editor, you will see a new option in your toolbar. Simply click and select the file you want to embed.

In the Block Editor, you will see a new “Document” block. Click and choose your document.

Please note: this plugin only works when the site is public.

3D FlipBook Embeds – PDFs, HTML, and Images

The 3D Flipbook plugin is available on the Commons to create interactive books, handle user events, and manage plugin behaviour.

3D FlipBook is well documented, has a lot of examples and video lessons. The WordPress plugin has user manual and video examples. It is easy to start.

Google Docs, Sheets, Forms, etc.

Commons Developer Ray Hoh developed a plugin for embedding Google files. Activate the “Google Docs Shortcode” plugin and follow these instructions to create your shortcode.

In the Block Editor, create a shortcode block and paste in the shortcode.

Google Calendars

For Google Calendars, you need to use the plugin ”Simple Calendar.”

You will need to get the ID of your calendar from the shareable url (the ”cid” parameter) that is available from your Google calendar, and put it in the appropriate place in the calendar “add” section. Then you will get a shortcode such as this – [calendar=”1817″]

In the Classic editor, simply paste it in. In the Block editor, create a shortcode block and paste in the shortcode.

See Simple Calendar Documentation for more information.

YouTube

Videos can be easily embedded by just pasting in the URL in the Classic Editor, but you might want to activate the “YouTube” plugin for other cool options.

In the Classic Editor, you will see a new icon in your toolbar. Click it and follow the instructions to configure the shortcode.

In the Block Editor, you will see a block called “YouTube Wizard” in the Embed section after you have installed the plugin. You will also see a “YouTube” embed block which you can use without installing the plugin.

Google Maps

There is a plugin called “Embed Google Maps” – it requires an Embed API Key which can be obtained here. Another, maybe simpler option is to use the “Ultimate Shortcodes” plugin. You will see a “Google Map” option.

Many premium themes have Google Map embed code built in.

In the Block Editor, select the shortcode block and enter the “Ultimate” map shortcode.

Sutori

The Commons Dev team created a handler for Sutori content. In the Classic Editor, simply paste in the URL.

The embed handler is not yet supported in the Block Editor. Please use the Classic editor for now.

Padlet

The Commons Dev team created a shortcode for Padlet content. It requires a Padlet key and optionally, the height. Watch how to find the Padlet key.

The shortcode syntax is:

For the Block Editor, you will need to use a shortcode block. Follow these instructions.

VoiceThread

The Commons Dev team created a handler for VoiceThread. In the Classic Editor, simply paste in the URL.

The embed handler is not yet supported in the Block Editor. Please use the Classic Editor for now.

Prezi

The Commons team created a plugin for Prezi called “PreziWP.” Follow this link for information on how to configure the shortcode.

For the Block Editor, you will need to use a shortcode block.

Piktochart

The Commons Dev team created a handler for Piktochart. In the Classic Editor, simply paste in the URL.

The embed handler is not yet supported in the Block Editor. Please use the Classic Editor for now.

Story Maps (ARCGIS)

To use, put the Storymaps URL its own line in the editor. For greater control over ‘height’ and ‘width’, you can also use a shortcode:

[storymaps url="https://storymaps.arcgis.com/stories/7a7a533b184f495c8a83a6a63cad810c" height="800px" width="600px"]

Story Maps JS

In the Classic editor, just paste the URL on its own line.

In the Block Editor, paste the URL in the “Embed” block:
https://wpcompendium.org/wordpress-gutenberg/blocks/embed-block/

The URL must begin with “https://uploads.knightlab.com/storymapjs/“.

Tableau

In the Classic editor, paste the Tableau share URL on its own line.

In the Block Editor, select the Shortcode block and input the following:

[embed]PASTE TABLEAU SHARE URL HERE[/embed]

To get the Tableau share URL, click on the share icon as seen below:

Flipsnack

The Commons has a custom handler for Flipsnack. In both the block and classic editors, use the following shortcode:

[flipsnack src="https://cdn.flipsnack.com/widget/v2/widget.html?hash=19fb8mprzp"]

Note that the ‘src’ attribute must match the ‘src’ attribute from the iframe code provided by Flipsnack.

Loom

To use, just put a loom.com video URL on its own line in the editor. Accepted URLs must be in one of the following formats:

https://www.loom.com/share/26172371630c41a89a03966d4bbbf6a3
https://www.loom.com/embed/26172371630c41a89a03966d4bbbf6a3

Knowmia

The Commons has a custom handler for Knowmia. In both the block and classic editors, use the following shortcode:

[knowmia key="7j7C" height="582px" width="720px"]

repl.it

The Commons has a custom handler for repl.it. You can simply paste the URL on a new line, or if you want more control over the width, you can use the following shortcode:

[replit url="https://repl.it/@Mr_RR1/Examples#main.py" width="50%" height="600px"] 

Jitsi Meet

Please active the “Webinar and Video Conference with Jitsi Meet” plugin and use the Block editor to add a block on your WordPress page for your Webinar or Video Conference.

Scribd

To embed Scribd content, click on the “< > Embed” icon. A popup will appear. Click on the WordPress radio button and copy the embed code. It will look like this:

[scribd id=329123976 key=key-gOe1cnxUYZbf4IuCgi9S mode=scroll]

If you have the JetPack plugin activated, you can just use this shortcode. Otherwise, make this small (four chararacter) change to the shortcode.

[scribd-doc id=329123976 key=key-gOe1cnxUYZbf4IuCgi9S mode=scroll]

sketchfab

To embed content from sketchfab, please install and activate the JetPack plugin. Once this plugin is installed, simply paste the model URL onto a new line. The URL should look something like this:

https://sketchfab.com/models/221a604282d449978cbcc4b5351bfe18

quizlet

The Commons has a handler for quizlet and there are two ways to embed it content. The simplest way is to type the url on a new line:

https://quizlet.com/264774785/cat-skull-flash-cards/

https://quizlet.com/264774785/test

For greater control, you can also use a shortcode. Pass either the numeric ID or the URL. You can provide from the five ‘type’ values supported by Quizlet embeds: ‘match’, ‘flashcards’ (default), ‘learn’, ‘test’, ‘spell’.

[quizlet url="https://quizlet.com/264774785/cat-skull-flash-cards/" width="400px" height="400px"]

[quizlet id="264774785" type="test"]

Microsoft Forms

You can simply paste the URL on a new line. The URL should begin with “https://forms.office.com ….”

If you need to control the dimensions of your form, you can use the following shortcode:

[msform url="..." height="..." width="..."]

The default size is 500px tall and 100% width.

ZeeMaps

You can embed ZeeMaps by simply pasting the URL on a new line in the editor or as a shortcode:

 [zeemaps url="https://www.zeemaps.com/map?group=4369080"]

In either case, you need to use the URL from the address bar, the one that contains ‘map’.

Screen-o-matic

To embed Screencast-o-matic content, simply pasted the URL on its own line. The URL must begin with https://screencast-o-matic.com/watch/.

By default, the seekbar controls will be shown and the title will be hidden.

To hide the seekbar controls, you can add controls=0 to the URL. So for the example URL, that would be:

https://screencast-o-matic.com/watch/c3X2DpVUjbh?controls=0

To show the Screencast-o-matic title, you can add title=1 to the URL. So for the example URL, that would be:

https://screencast-o-matic.com/watch/c3X2DpVUjbh?title=1

You can also combine the two parameters together like so:

https://screencast-o-matic.com/watch/c3X2DpVUjbh?controls=0&title=1

Internet Archive Audio

Internet Archive has a native audio player and can host audio files. The preferred lossless formats are: FLAC, AIFF, and WAV. The most common lossy file format is MP3. VBR and OGG formats are also supported.

To embed on the Commons, use the following custom embed handler shortcode, following this pattern:

[internet-archive-audio url="https://archive.org/details/FreeHappyBirthday"]

Awesome Table

Use the shortcode shown below. Optionally you can add width and height params.

[awesometable url='URL FOR AWESOME TABLE' width='100%' height='600px']
[awesometable url='https://view-awesome-table.com/-N_g5ETe8gPCUz62TAjy/view']

Scratch

Get the embed code from Scratch. It should end in /embed. Use the EmbedPress plugin and create a shortcode.

[embedpress]https://scratch.mit.edu/projects/955894631/embed[/embedpress]