Last Updated on by Michael Brockbank
As a blogger, there’ll probably come a time when you’ll want to embed something from Google Docs into your WordPress website. It’s actually quite an easy process, and today, I’ll show you a couple of ways you can easily do it for free.
Whether you’re doing it manually or through a plugin, it will only take a few minutes.
2 Ways to Embed Google Docs into WordPress
Before we get started, I’m going to assume you have a self-hosted WordPress installed. This is because the process is a bit different for free sites using WordPress.com.
This tutorial is for the WordPress.org version.
Manually Add HTML to Embed Google Docs in WordPress
Don’t worry, you won’t have to learn too much HTML for this method. In fact, you can literally just copy and paste to embed Google Docs directly into WordPress.
Step 1: Copy Snippet from Google
Go to any Google Doc you have saved. In this example, I’ll use my “Workout Routine” spreadsheet. The steps are the same for other document types.
Go to “File” and click, “Publish to the Web.”
A new window will load with various options from Google. From here, you can change what is being shared, what type of file, adding links to social media, and whether you want to stop publishing.
Click on the “Embed” option.
The options might be a bit different depending on the Google Doc you’re trying to embed into WordPress. If it’s a spreadsheet, you can choose to share the “Entire Document,” or use the drop-down to select a specific table.
Select the entire code from Google and copy it.
The entire code will be selected if you click anywhere in the box. Then, you can either press Ctrl+C (if you’re using a PC) or right-click and copy from your mouse.
The option to copy for MAC users should be CMD+C.
Step 2: Paste Code into WordPress
Go to any post or page you want to embed Google Docs in WordPress.
For this tutorial, I’m just going to create a new post. We’re going to add a new block to add our code snippet.
Click the blue “+” button on the top left to add a new block.
In the Search Field, type “HTML.” WordPress will immediately pull up the correct block.
Click on the “Custom HTML” block to add it to your post or page.
Paste the code snippet you copied from Google into the field provided.
Step 3: Publish or Update the Post or Page
All that’s left is to either publish or update the post or page you added the code to.
Once you do that, it’s probably a good idea to check your content to make sure the embed for the Google Docs is showing up correctly in WordPress.
Step 4: Final Size Adjustments
As you can see above, the Google Docs don’t fit perfectly on my post. Results may vary depending on your own layout and theme. But if you see something similar, you’ll need to tweak the code snippet slightly.
There are two ways you can resize iFrames in WordPress. You can either use a percentage of the container or make adjustments in pixel dimensions.
Today, I’ll show you how to use both on your site. It’s pretty quick and easy.
First, go back to your post or page in WordPress where you placed the code to embed Google Docs.
Let’s say that I want the spreadsheet to take up the full width of the container. This means I want the spreadsheet to stretch from left to right as far as it can according to the size of the blog post.
The actual dimensions of this will vary depending on the theme you use.
Using Percentages
Click into the code just after the “<iframe” area. Paste the following:
width=”100%”
Make sure to put a space after the last quotation.
The “100%” tells WordPress to resize the element to fit 100% of the post width. In my case, it just means it will fill the width from the left side all the way to the beginning of the widgets on the right.
You can adjust this as needed depending on how much room you want Google Docs to take up in the post or page of WordPress for the embed.
You can also do this for height, depending on where you placed the embed to begin with. But, I usually use pixel dimensions when adding Google Docs to WordPress. It gives me more control over exactly where and how I want to show the document.
Using Pixel Dimensions
Now, let’s say that I want the spreadsheet to show more along the length of the post or page. For this, I’m going to add another element to the code snippet for height.
Click into the code snippet after the space you put for the last quotation of the width. Paste the following:
height=”400″
As before, make sure you add a space after the last quotation.
This will tell WordPress that I want the embed to be 400 pixels tall. You can change this number to anything you wish depending on what you want to show.
Once you’re done, simply update or publish the post or page.
Using a Plugin to Embed Google Docs in WordPress
Manually pasting the code snippet in WordPress isn’t all that difficult. However, using a plugin will sometimes offer more flexibility in what you show.
In this tutorial, I’m going to show you how to add Google Docs with EmbedPress. It’s a very versatile plugin that lets you add all kinds of things to your website.
For example, you can add YouTube, Google Maps, Vimeo videos, and even Twitch content.
Today, though, we’re just adding Google Docs and Sheets.
Step 1: Install EmbedPress
Go to the “Add Plugins” section of WordPress.
In the search field, type, “EmbedPress.”
Install and activate the plugin.
Once the plugin is activated, you will be taken to its settings screen.
Step 2: Change Your Default Settings
Enter the default values you want when you embed Google Docs into WordPress. These are in Pixels, so you will need to know the dimensions of your theme’s areas if you want to properly size them.
In this instance, I am leaving them as their default values. You can come back to this page at any time by clicking the “EmbedPress” option from the left admin dashboard panel.
Step 3: Get the Google Docs URL
Unlike the method above, EmbedPress uses the Google Docs URL to embed files into WordPress.
Go to your Google Docs file and select “Publish to Web,” as seen in the method above.
Copy the link URL from Google.
Step 4: Add Google Doc Embed to WordPress Post or Page
Go to any post or page in WordPress. I’m simply going to use the one I created in the method above.
Click the blue button to add a block to the editor.
EmbedPress has added several blocks to the Gutenberg editor in WordPress. This makes it easier to add specific Docs. In my case, I’m adding a sheet.
Search for “Google” in the field.
Click the doc type you want to add. I’m selecting the “Google Sheets” option as I’m adding my spreadsheet to the post.
Paste the URL you copied from Google.
After adding the URL, click the “Embed” option under the link field.
The plugin will then embed your Google Docs in the WordPress editor.
Step 5: Update or Publish the Content
Once you add the URL from Google, update or publish the post or page.
It’s Easy to Embed Google Docs in WordPress
Although I did have a few issues with EmbedPress not changing the width and height of Google Sheets, I was still able to get it to work. If you’re not too sure about the plugin, there are plenty to choose from.
Personally, I prefer manually adding the code snippet from the first method. I don’t have to worry about adding any more plugins and it’s simple enough.
Either way, you have a lot of options in WordPress to embed Google Docs.
- An Evening with Drea Talley on After Hours - September 16, 2024
- An Evening with Maddi Bluhme on After Hours - September 9, 2024
- An Evening with Ian Thomas Healy on After Hours - August 22, 2024