Latest posts by Donncha Hughes (see all)
- Configuring Contact Form 7 WordPress - March 13, 2017
- Instructions to set up ‘Pay with a Tweet’ in WordPress - March 6, 2017
- How to embed an individual tweet in a WordPress blog or post? - March 6, 2017
Google documents are great. I particularly like Google Forms – very easy to embed into your website as per this blog post. Of the other Google docs, Google Slides (formerly called Google Presentations) is similar to PowerPoint. This post will explain how to embed a Google presentation which is stored publicly on your Google Drive so that it displays (with all animations working) on your WordPress site. It is a valid alternative to Slideshare for that reason. To see the output simply look at the Social Media Workshop page on this site.
Embed Google Presentation
To ’embed a Google Slide’ file; follow these steps:
#.0 Create your Google Slides file and save in Google Drive.
If you have created a file in PowerPoint, you can import your slides into Google Slides (seems to work best when original file is saved in PowerPoint 2007 – the original template can be retained but formatting may have a few gremlins).
#.1 Go to File and Select Publish to Web
Click on image below to enlarge what you should be able to see.
Go to File and Select Publish to Web
This is separate to the SHARE blue button which is for sharing privately with others who can be assigned as either a Viewer or Editor under permissions. You should also read the Google Docs help which explains that:
Anyone can view a Google Docs, Sheets, or Slides file that you publish to the web.
When a file is published, a copy of the original file is made. The copy is the file that people see when they visit your website. It doesn’t carry over sharing permissions, so anyone will be able to see it.
You’ll still have your original file with the same sharing permissions. Only people with view, edit, or comment permissions will be able to view, edit, or comment on your original file.
#.2 Select the Embed Menu
In the Pop Up Menu, select the Embed option.
#.3 Copy the Embed Text
As per image below – you can configure as per settings.
Configure settings and copy embed code
#.4 Paste the Embed Text in WordPress
The embed code should be pasted into the Text Tab and when you move to Visual, the Slideshow placeholder should be visible. Update and preview.
Please note that published Docs and Sheets files update automatically whenever a change is made in the original file. This is the default option but the file owner can un-select (turn off) this option in advanced settings.
The old way : Starting Point
A few years ago, Google did not have an embed functionality which I why I wrote this post. Here it is for historical purposes (it still works):
Starting point is that you have a Google Account and a Google Drive.
- Create a presentation on your Google Drive
- Make it public (under the sharing button)
- Get the URL linkhttps://docs.google.com/presentation/d/1EfZms4dYQGUA9WavDXouqaurNgTfqFtot1FsDEpaQlI/edit?usp=sharing
- Copy the Presentation ID in the middle (in pink here)
- Go to the page that you want to display this presentation and paste in this code – replace your Presentation ID in the appropriate place
start=false&loop=false& frameborder=” height=”405″ width=”500″></iframe>
- I usually change the width paramter at the end from 500 to 100% (goes across full length of browser). Publish and enjoy!
How to use Google Viewer functionality to display presentations and pdfs on your WordPress site (but not in Chrome)?
There is also a plugin called Google Docs Embedder. This places a button into the Text Editor (where you edit Html) to posts and pages. GDE allows the viewing of files such as pdfs, powerpoint etc that are available publicly (either uploaded to your server or in the public folder of Dropbox for example) to be viewed online using the Google Viewer. This has 2 limitations. Google Chrome does not display the files. And files saved to your google drive are not viewable either. But it is easy to use. Firstly copy the public URL of the file. In the Text editor click on the GDE button once. Then paste the URL. Then click the GDE button again. The text is as below with the copied URL in purple.
[ g view file=”https://dropbox URL.pdf“]
The output is also below.