You can add an iframe into a static text portlet that appears in the right side of the page, below the content on the home page, or into the content of the page. To insert the iframe:
- first you need to find what code you must add (see below for some pointers)
- next you must make sure that your site will let you add the code and not strip it out - the html filtering is set up to protect the site and you might need to allow tags to be used before you copy in the code.
- edit your page and look at your body text in HTML view
- paste in the iframe code where you want the iframe to be added
This is an example of how you would add an iframe of the University map, taking the URL from the map page, but removing the http: from the front.
When the page is saved at the iframe is embedded in the page, you will see that some dimensions have been added - you can change these it you want to increase the dimensions of the map shown (making the width equal to 100% will make it responsively fit the content area available):
<p><iframe height="300" src="//map.cam.ac.uk/Computing+Service" width="100%"></iframe></p>
To get automatic zoom on the map, add zoom factor from 13 (least) to 19 (greatest), like this:
<iframe height="240" src=”//map.cam.ac.uk/Computing+Service#18" width="100%"></iframe>
- There are instructions for embedding sections of the new University map at https://wiki.cam.ac.uk/university-map/The_Embedding_API
Adding iframes to Twitter and Facebook
There are various different iframes you can add linking to your Facebook pages - these are described on https://developers.facebook.com/docs/plugins. Complete the information and click on 'Get code', making sure you select 'iframe' as the option. The code you get might look similar to this:
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width&layout=standard&action=like&show_faces=true&share=true&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>
If there are additional styling attributes in the iframe code, as there is above, you will have to allow these attributes and styles in the editor settings to prevent the Falcon editor from discarding them.
To do this:
- go to Site Setup and select HTML filtering
- under 'Stripped tags', select 'style' and then 'Remove selected items', then save
- Click on the 'Styles' in-page tab
- under 'Permitted styles' click 'Add Permitted styles' and add width and height, then save
To add the iframe (usually best in a portlet):
- go to the page or folder where you want the iframe and click on 'Manage portlets'
- add a static text portlet
- give it a title, go to the text box and click on 'HTML' then paste in the code and update
- under the text box, check the box next to 'omit border', and save.
When you go back to the page, you may need to refresh the cache (it depends if your site is live or still in development) to see the portlet working.
To find the iframe code to embed a Google calendar, in the Google calendar:
- go to Settings and click on the calendar or calendars you want to use
- the iframe code you want is under 'Embedding this calendar' - it can be customised.