The information on this page is dedicated to written content, documents, images, and videos added to your site. All content added to your site must be accessible to users with disabilities and follow appropriate legal guidelines. Review the EIT Accessibility Policy and the PSU Copyright Guide for more information.
...
Content from other sources, such as Google Calendar and YouTube, can be embedded using an iframe. Most programs that allow content to be embedded elsewhere allow you to create iframes which are then inserted into the page’s HTML. Your site has a built in method to create iframes in the Text: 1 Column paragraph block.
Do be aware that embedding external content is appropriate for stand-alone widgets and elements that supplement pdx.edu content; they are not intended to replicate an entire other site. If there is an existing well-developed external resource, link to that content instead. This is a mutual benefit as it reinforces the connection between content through interlinking and page views.
| Expand |
|---|
|
To add a new iframe: Login to your site and navigate to the page where you want to add the iframe. Add a new Text: 1 Column paragraph block to the page. Select the the iframe menu item in the formatting menu (it looks like a world). Complete the popup window. A few notes: URL: this is not the full iframe embed code, just the URL extracted from that code. Width can be set to exact numbers (eg. 600px) or percentages (eg. 100%); height can only be set to exact numbers. You may need to play around with sizing to get the desired fit.
Select Ok to close the pop-up; in the edit page the iframe will show as a box with the words iframe in it. It will display appropriately when the page is saved.
|
| Expand |
|---|
| title | Embedding a Google calendar |
|---|
|
You can embed a Google Calendar using an iframe. However, there are a few added steps you need to take, to ensure the calendar is accessible: On a computer, open Google Calendar. You can only get the code to embed in your website from a computer, not the Google Calendar app. In the top right, select the Settings menu (it looks like a gear) and then Settings. On the left side of the screen, select the name of the calendar you want to embed. Select "Integrate Calendar" in the menu that expands under the calendar name you selected. Copy the "Public URL to this calendar" section URL. For example, the Public URL to my 1:1 help calendar is:
https://calendar.google.com/calendar/embed?src=pdx.edu_p6hjlahv1gsmk0e8g6oereldh4%40group.calendar.google.com&ctz=America%2FLos_Angeles Open some kind of text editor and paste the URL in it. This is just for temporary purposes so we can edit this URL. Replace everything before src= in the URL with:
https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showCalendars=0&showTz=0&mode=agenda&height=600&wkst=1&bgcolor=%23FFFFFF& Example: the new URL for my 1:1 calendar is:
https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showCalendars=0&showTz=0&mode=agenda&height=600&wkst=1&bgcolor=%23FFFFFF& src=pdx.edu_p6hjlahv1gsmk0e8g6oereldh4%http://40group.calendar.google.com &ctz=America%2FLos_Angeles
Copy the new URL, this will be used for the iframe.
A few notes: When creating the iframe, set the width to 100% and the height to 600px. Calendars with appointment slots cannot be embedded; they only display the scheduled appointments, not the available times to book. For appointment calendars, use a call to action to link to the appointment calendar.
|