skip to primary navigationskip to content
 

Adding an iframe to your page (map, Facebook, Twitter, Google calendar)

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

University map

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.

 <iframe src="//map.cam.ac.uk/Computing+Service"></iframe>

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>

Adding iframes to Twitter and Facebook

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&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;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.

Twitter

For Twitter embeds a few of them can be made as iframes - for others they can be added as javascript as long as you are willing to trust your fellow managers not to add other dodgy javascript to your site (see Adding embeds with javascript).

The method for adding 'follow' and 'tweet' buttons can be found at https://dev.twitter.com/docs/follow-button and https://dev.twitter.com/docs/tweet-button. Use the method shown above.

Google calendar

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.