vory

Blog

How to embed Google Docs, Sheets, Slides and Drive into a webpage

google-sign-vory.co.jpeg

How to embed Google tools on your webpage

Google Docs is a popular service for managing documents online. You can easily embed your Google Docs spreadsheets, documents, forms, and presentations into your WordPress.com blog by copying and pasting the embed code.

 

Privacy Note

Before you share a Google Docs file, please make sure that the document is public. If it is private, you’ll be the only one who can see it. To change your privacy setting, click the Share link at the top of the screen to make it public.

sharelink-vory.co.png

Note: The embed codes for the following instructions need to be pasted in the HTML tab of your editor.


Google Docs

To embed a Doc into your blog, open the document. Select the Publish to the Web under the Filemenu.

publish_to_web-vory.co.png

Click the Publish button.

screen-shot-vory.co.png

Then copy the embed code and paste it into your blog.

publish on the web-vory.co.png

Google Sheets

To embed a Sheet from Google Docs, open the spreadsheet you want to embed and click on the Publish to the Web link under the File menu.

ss_publish_to_web-vory.co.png

Click the Publish button.

publish.vory.co.png

Then Embed and copy the code into your blog.

content-visible-oneline-vory.co.png

Google Slides

To embed Slides into your blog, open the project and Publish to the Web button under the Filemenu.

pre_publish_to_web--vory.co.png

Click the Publish button.

screen-shot-2015-05-18-at-2-12-47-p.png

Select Embed. There are a few dropdown menus to control the size and speed of the slides. Then, copy the code into your blog.

screen_shot_2015-05-18_at_2_03_25_p.png

Google Drive

To embed a document, for example, a PDF from Google Drive, right-click the document and click Share. Make it public by clicking Get shareable link.

drive-1-share.jpg

Double click this shared document in Drive, which should open up a preview. Click Open in new window from the option menu (vertical bar with three dots).

google-drive-open-in-new-window.png

In the new window, click Embed item from the options menu.

google-drive-embed.png

Copy the code and paste into your blog. Note: Replace drive.google.com with docs.google.com. Leave everything else intact.

drive-3-embed-code.jpg

Featured Products