Publish and Embed a Google Slide

[jperkins]

If you are the type of teacher who spent hours building out beautiful PowerPoints with lots of transitions and things, you may have noticed that the Canvas document viewer strips all of that out. A solution is to upload your PowerPoint to Google Drive (or OneDrive) and then embed the presentation from Google's (or Microsoft's) software. We'll cover how to do this with Google Drive, but the process is very similar if you are using OneDrive.

1. Open up the Presentation in your Google Drive (you may have to convert to Google Slide)

2. Go to File->Publish to the Web

3. Start Publishing the Presentation and Copy the Embed Code

4. Put the Embed Code into the HTML editor anywhere in Canvas

5. Save and View your Presentation in Canvas

[Stef_retired]

For those of you interested in exchanging your Google tips and tricks with other teachers, or who want to pick up some new ideas,  @tmercer ​'s CanvasLIVE​ Twitter chat #Canvas4Elem: Getting Googley with Canvas is coming up this week, on Tuesday, October 11, 2016. Please RSVP if you plan to attend--and if you're interested, but your schedule doesn't allow you to participate in the live tweeting, RSVP anyway to receive notifications of comments to the event.

[john_morris]

 @jperkins ​, Thanks for putting this document (and grouping) together. I use Google Drive a lot with Canvas to help me carry content forward between sections from one quarter to the next. I found your page because I'm unhappy with how Canvas is using my Google Slides content. If I set them up links in Modules, when the student clicks on them they remain in Canvas with the Google Slide content embedded in an iFrame. (This is what I'm after, see first image.) On the other hand, if I setup the same link on a wiki page, when the student clicks on it they are taken to a new tab or window with the Google Slide content. (This is not what I'm after, see second image.) Do you, or anyone reading this know how can I set up a link on a wiki page that will keep the student inside of Canvas?

[Stef_retired]

 @john_morris ​, just to clarify, are you using the link to the Google Slides, or are you publishing the slides and getting the embed code as  @jperkins ​ has described--and if you're indeed using the embed code, are you saying that the presentation is opening in a new window rather than in a frame?

[jperkins]

 @john_morris ​, if you take the Google Presentation URL (including the notes) you can insert it into an iFrame by copying and editing the code below.

<iframe src="GOOGLE_PRESENTATION_URL" style="width:100%; height:600px;"></iframe>

Though generally the way I mention in the article is a better way for students to consume the presentation (assuming they don't need access to the notes or need the ability to comment/edit the document).

Hope that helps!

[Stef_retired]

CanvasLIVE​ has launched a series of presentations on the new Google Apps LTI, and you'll find the complete lineup of events here. (And we'll promote each individual event in this space as its date approaches.) RSVP “yes” to an event if you will be there--and if you’re interested, but your schedule doesn’t allow you to attend in real time, RSVP "no" or "maybe" to receive all event updates. Your RSVP ensures that you will receive a notification should the event be cancelled or changed.

[Stef_retired]

The next installment in the CanvasLIVE‌ series on the Google Apps LTI is coming up on Friday, February 3, 2017: Google LTI Series: Accessing Your Assets. Click on the event link to RSVP “yes” if you will be there--and if you’re interested, but your schedule doesn’t allow you to attend in real time, RSVP "no" or "maybe" to receive all event updates. Your RSVP ensures that you will receive a notification should the event be cancelled or changed.

[john_morris]

Sorry to post and stay away... it has been a busy couple of terms. Playing with the code  @jperkins ‌ provided helped me understand what I was really after... Based on this information now (I think) I know what is happening in Canvas. When I click the "+" button from the list of Modules, I am creating a new Content Page and telling Canvas to embed the target URL in that page. So, clicking that page from the Modules is opening a Canvas Content Page. I missed the fact that I was creating a new Content Page when I clicked the "+" icon. By creating a bunch of Content Pages, embedding each published Google file in its own Content Page, and linking to those content pages FROM my Content Page... I'm creating the same effect.

This becomes a trade-off between how much effort it will take me to setup and the elegance of design for usability.

1. Use Canvas Modules and create new Content Pages almost effortlessly that keep the user in the Canvas environment. Trade-off is that the list of modules with their links becomes unwieldy to navigate.
2. Create a Content Page for each of the 27 Google Slides presentations I want students to use, then link to these Content Pages from a Master Content Page. This could be done by publishing the Google Slides to the web and using the embed code Google provides. This takes a lot of tedious effort, but creates the effect I'm after.
3. Use a "half-way" solution that creates a separate Content Page for each Module (there are six), then spread the 27 Google Slides across those pages and embed the slides in iframes on each. I can do this either using the Google Slides embed code or the URL and Jeremy's iframe code. This is not quite as elegant as #2 since students will have to scroll quite a bit but it is a whole lot less effort for me to setup.

Now, I understand the options. I'm not happy with any of these but I'm also not teaching this course again for a year. So, I have time to decide whether it is worth the effort to redesign the setup.

[john_morris]

So, stefaniesanders, what do you think it would take to convince Instructure to add a feature to make embedding a link FROM a Content Page TO a new Content Page as easy it is in Modules? This seems like the type of "too geeky" behind-the-scenes feature request that would never garner enough votes to make it onto the development roadmap through the official process, but it sure would make life easier for instructors concerned about end users and navigation...

[john_morris]

If it helps, below is the effect I'm after. I took what I learned from stefaniesanders‌ around creating an attractive Home page and set up the first screenshot. This course is entirely case-based and does not use a textbook, all resources are supported through Canvas or Google Drive (Docs, Slides). The second screenshot shows what an individual "module" looks like -- I put that in quotes because when I had a single Modules page, it was not user friendly. Even though Modules can be collapsed and expanded as we progress in the course, students were frequently overlooking resources. We have a much better response from students with the new design. Setting this up to operate entirely within Canvas (which I want) would take a lot of effort -- When I include all resources (not just the 27 Content Pages) the number of pages would more than double.

[Stef_retired]

what do you think it would take to convince Instructure

that's the million dollar question,  @john_morris ‌. 🙂

[john_morris]

I considered clicking the "No" link on your comment but I didn't want to send the wrong message. The message I want to send is... There must be a better way!

[Stef_retired]

Maybe this will help,  @john_morris . The newly revamped feature idea process is launching on Friday, February 24, 2017 (one week from today): https://community.canvaslms.com/community/ideas/feature-ideas/blog/2017/02/17/flipping-the-switch-on... 

[john_morris]

How timely! I was not aware of the new process coming on line. I'll be curious whether this will give student/teacher priorities greater weight. I have clicked to follow the space. There is certainly a lot going on in the Canvas and Canvas Community!

[jperkins]

John, instead of creating a different page in Canvas for each of your presentations, you can just edit the url of the google presentations from

https://docs.google.com/presentation/d/12345/edit 

to

https://docs.google.com/presentation/d/12345/present?usp=drivesdk 

That'll open the presentation in presentation mode without having to go through all the many steps above... Hope that helps!

[john_morris]

 @jperkins , you are a wizard!

[rob_harsch]

I'm following the directions to the tee and am still not seeing the Google Slideshow in the HTML editor when I save.

[floresr]

Hi Robert, makes sure your Google settings allow anyone with the link to view the presentation.

[floresr]

Try this code and replace the blue text with your own iframe (or replace only the URL):

<div id="Slides-side" class="col-md-7" style="margin: 30px; float: left; overflow-x: auto;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRtIL_BmSQYSzFTy5KopCR7Mr59y8_qDF_7V72lJ0dFo9hmD4kqj..." width="600" height="400" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe></div>
<div id="Instructor-side">
<p><strong>Instructor:</strong> Tea Cher  <i class="material-icons">label_outlin</i></p>
<p><strong>Email:</strong> teacher@email.edu</p>
<p><strong>Contact:</strong> (555)123-4567</p>
<p><strong>Zoom Hours:</strong>2-4pm CST</p>
<p><strong>Biography:</strong></p>
<p><span style="font-size: 12pt;"><span style="font-size: 18pt;">☜</span>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet dolor quis orci ullamcorper sagittis. Suspendisse nec ligula in arcu interdum facilisis nec sit amet velit. Nullam vel purus lorem. Fusce lobortis neque vitae enim vestibulum, pellentesque feugiat nibh dictum. Ut sit amet tortor justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse accumsan laoreet elit at venenatis. Nullam nec justo augue. Curabitur dictum ex et tellus hendrerit dictum. Sed tempor ipsum elit, ac aliquam sem imperdiet at. Proin imperdiet pellentesque nisi, non finibus mauris semper vulputate. Sed nec quam quis odio pulvinar maximus sit amet non libero. Maecenas quis suscipit elit.  Vivamus nec nisi nec risus fermentum elementum. Etiam pretium odio quis eros sagittis, non consectetur dolor ornare. Donec vel quam porta, aliquet leo eget, egestas ante. Integer sed mollis ex, non mollis tellus. Nunc neque tellus, euismod at libero eu, rutrum venenatis elit. Pellentesque mattis mattis justo, nec eleifend felis volutpat quis. Cras eget mi accumsan, pharetra augue vitae, consectetur odio. Phasellus et cursus sem. Suspendisse ac lorem euismod, efficitur odio et, convallis orci. Cras eget dictum mauris.</span></p>
<p><span style="font-size: 12pt;">Nunc elementum consectetur nulla, pellentesque condimentum libero finibus id. Fusce ex orci, finibus et ante ut, feugiat rhoncus lacus. Sed eu turpis non turpis viverra mollis. Aliquam finibus tortor sapien, sed dictum massa dictum in. In hac habitasse platea dictumst. Cras ac metus ante. Maecenas leo elit, tincidunt quis nisl vitae, vestibulum interdum elit. Ut quis porttitor leo. Proin nulla diam, fringilla sed erat a, gravida feugiat justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam viverra semper orci ut consequat. Fusce vestibulum pellentesque ipsum, at tristique lacus hendrerit eget. Nam condimentum nisi quis nunc lacinia, ut tincidunt risus euismod. Phasellus mattis convallis quam, nec tristique lectus mollis sed.</span></p>
</div>
</div>

To get this result: 

[TeacherHelp]

Hi! When I embed the code to Canvas, I get a black background and what looks like a play button with the words "Google Slides" around the image. Is there a way to remove this? Is there something specific in the code that I can remove or edit so it's just the image and not the background or Google Slides frame? Or is there no way to remove this? Thank you in advance!

[bmfrank]

I am having the same problem that TeacherHelp is having where I have a black background surrounding all my embedded google slide presentations.  I'm not good enough with code to know what I need to fix.

Here's the code:

<div class="enhanceable_content tabs">
<ul>
<li style="background-color: #f33b3bff;"><a href="#fragment-2">Franklin</a></li>
<li style="background-color: #bc79e9ff;"><a href="#fragment-3">Fremont</a></li>
</ul>
<div id="fragment-2"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTEDZJnluo6SynPc8lUeefIbJm0ZIjWtJo2-WMcMJsoTuU232Ynm..." width="960" height="569" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe></div>
<div id="fragment-3"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSOMk6IzxrzHwXQjN7ly-n0uG_zqMFFf5gqsItG7rmBAzohMtkT3..." width="960" height="569" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe></div>
</div>

Help!  Thank you in advance

[penny_christens]

Hi @jperkins  - I am interested in how accessible Google Slides are within Canvas?

I am trying to decide how to advise content creators to move forward and want to create content once - not multiple times as situations dictate we modify. Can you shed some light on the accessibility of Google embedding in Canvas?
Thank You!