iFrame Sources & Embedding Content in Text Boxes

Overview - iFrame Sources & Embedding Content in Text Boxes

Are you sure you want to remove this component?

Adding to the Safe IFrame List

Are you sure you want to remove this component?

To display a website in Schoolbox as an iFrame in the Text Editor, it must first be whitelisted as a safe iFrame source.

To do this, you will require Superuser permissions.

1. Get the URL of the 3rd party site. See the below example on how to construct the URL:

Find the URL in the embed code, looking for the http code. In order to make your whitelist url, remove the URI component and the final identification component.

So for example:

http://padlet.com/embed/dznf5c6w8w

Should become

padlet.com/embed

2. Add this under the Admin System, Settings > Security > Safe iFrame Sources.

3. Separate each URL by placing each URL onto its own line.

If you wish to embed it, simply copy the Embed code from the website, and paste it directly into the HTML editor in the Text Box Component.

Safe iFrame Sources

Are you sure you want to remove this component?

For security purposes, Schoolbox does not allow random applications and code to be embedded directly into WYSIWYG content areas. These pose a risk to all users of the system, if malicious code is embedded into Schoolbox.

To avoid this risk, Schoolbox provides a whitelist of supported applications that can be embedded. This list is updated as new services are added.

Schoolbox administrators can now also add additional whitelisted embed codes via the admin system. 

 

Name URL Description
YouTube http://www.youtube.com/  
Vimeo http://vimeo.com/  
Slideshare http://www.slideshare.net/ Convert your powerpoint presentations to online slideshows
Glogster http://www.glogster.com/  
Wikieducator http://wikieducator.org/  
Google Maps https://maps.google.com/  
Google Docs https://docs.google.com  
Tiki-Toki Timeline http://www.tiki-toki.com/  
Thinglink http://www.thinglink.com/  
Facebook Plugins https://developers.facebook.com/docs/plugins/ Note: Facebook now uses javascript embeds, so they are unlikely to work, old style ones continue to work though
Padlet (Formerly known as Wallwisher) http://padlet.com/ We give you a blank wall. You put anything you want on it
Linoit http://en.linoit.com/ Sticky and photo sharing
Showme http://www.showme.com/ iPad app for creating lessons
Sunsmart UV Alert http://www.sunsmart.com.au/  
Microsoft Skydrive https://skydrive.live.com  
Studyboost https://studyboost.com/ Study using instant messaging and text messaging using your favorite chat applications
Prezi http://prezi.com/ Prezi is a cloud based presentation software that opens up a new world between whiteboards and slides.
Spiderscribe http://www.spiderscribe.net/ SpiderScribe is an online mind mapping and brainstorming tool.
eTV http://www.etv.org.nz/ eTV has over 20,000 TV and Library recordings
Issuu http://issuu.com/ Provides flipbook hosting and service for newsletters and online magazines
Clickview http://www.clickview.com.au/ Online video repository for educational content and Australian TV networks
Khan Academy https://www.khanacademy.org/  
Giphy

http://giphy.com

Online GIF file repository

Homepage Components

Are you sure you want to remove this component?

Schoolbox already has specific, custom built homepage components for the following 3rd party services:

NameURL
Clickviewhttp://www.clickview.com.au/
Wolfram Alphahttp://www.wolframalpha.com/

To embed this, click the Insert Embedded Media button in the text editor, go to the 'Source' and copy the embed code into the textbox and press insert.

Adding an iFrame to a Text Box to Embed Content

Are you sure you want to remove this component?

Websites can often have their content put into Schoolbox by clicking on a 'Share' button from the external webpage. Commonly sites will then give visitors either the option to select 'Link' (giving you a URL) or 'Embed' (giving some HTML code) along with some options to share their content.

If there isn't a 'Share' button, you can try to put the content into Schoolbox by copying the URL from your browser's address bar.

Both of these formats can then be added to a text box within your instance.

Methods for Embedding Content

1. Add a Text Box component to the page utilising the normal steps. Then within the Text Box component:

a. If you selected 'Link', sometimes the site will be compatible with Schoolbox

2. Paste the URL directly into the content area of the text box.

image.php?hash=b6d217056ed6445173c06a4cb040ff5a62344527

b. If you selected 'Link', and the content isn't already compatible or you want more control over the iframe

2. Select the 'Embed Iframe' button within the WYSIWYG editor.

image.php?hash=dc61f83c07ada10ff57d9ec1fbacfbe487e6713f

3. Paste in the URL to the pop-out window.

4. If desired, you can customise the dimensions and appearance options.

5. Select 'OK'.

c. If you selected 'Embed', add the HTML code.

2. Select the '<> Source' button within the WYSIWYG editor.

image.php?hash=6db1126faaf9c189f2d3c5c8e6b755d0fb5fc13f

3. Paste the HTML code into the pop-out window.

4. Select 'OK'.

Troubleshooting iFrames

Are you sure you want to remove this component?

There are sometimes issues with iframes not working as expected. 

When things aren't working as expected, 1 of 4 things will commonly be shown within the text editor:

image.php?hash=2c3f9bf39482283698e75dba687c6ccad0358eac

 

image.php?hash=6dfe762dd73236e1a1255f387cc38f52fb236902
1. When pasting the URL directly into the textbox it will say “This URL could not be automatically embedded”. 2. Before saving or publishing the content, it will display a message saying the web address refused to connect.
image.php?hash=a92d88dfd5bab98a88ad756eaf0e74a571276317 image.php?hash=40a58417e82715a33594bed2762de27185076076

 

image.php?hash=d4f34cc301d348e1263794419235cee57bf2fbe8

 

3. Before saving or publishing the content, the iframe will display the Schoolbox instance. 4. Before saving or publishing the content, the iframe will display the intended content, but will disappear after saving or publishing the component.

Here are the steps to take to try and rectify the issue.

1. Ensure the website is added as an exception to the whitelist within the Admin area. This will require a Schoolbox Superuser and commonly requires a staff member to contact a member of their IT administration team or senior member of the Digital Learning team.

videoThumb.php?size=poster&id=9289f74dfb7d29bad32f0499d622e41037244e7f&type=storage

2. Once the URL is on the whitelist, the iframe will often still not work. This is because the web address has already been attempted to be added to the instance and is stored within the cache, meaning the instance doesn't realise that any changes have been made. To combat this:

  • First delete the iframe from the text editor from the HTML editor.
  • Then exit the HTML editor and re-add the iframe with the required URL.
  • Press the space bar, to add a space after the iframe.
  • Save or publish the content.

videoThumb.php?size=poster&id=4bf8631c11a3d7e8ddea5e8b974045d325f70632&type=storage

3. If the iframe is still failing to load, it may be that the website does not permit iframing. You can find this out by debugging the Schoolbox page where you are trying to create the iframe and looking at the console. It will show a line of text in red on the console tab saying something containing “.......X-Frame-Options…....” if the website cannot be put in an iframe. In this case, and if the website has an embed code, you could paste that into the HTML editor instead.

videoThumb.php?size=poster&id=c8e376e5636fc0d100689d843fb4d3a5a4bed923&type=storage

4. If all else fails, ask a registered Support contact from your school to contact us at Schoolbox.