Embed Google Sheets in WordPress

How to Embed Google Sheets into WordPress and Why

Last Updated on by Michael Brockbank

Google Sheets is a great, free alternative to Microsoft Excel. And the best part is that it is incredibly easy to embed Google Sheets directly into any website. Today, I’ll show you how to embed these Sheets in WordPress and why it matters.

In fact, it’s one of my most common methods for delivering certain pieces of data for specific blog posts. Sure, I could upload a spreadsheet or set up tables. But Google makes it very easy to integrate Sheets into WordPress.

Why Embed Google Sheets into Your Website?

If you’re unaware, Google Sheets is essentially online spreadsheet software. Data is constantly saved when using Google Sheets, which reduces losing files if your computer crashes or being able to access the information from virtually anywhere.

For those who create data-driven content, you can share a lot of information directly from Googles Sheets through provided embed code.

One of the best features, though, is if you’re currently working on data that is shown in a blog post. Visitors can easily see updates if they refresh the page or come back to it later.

For example, let’s say I am keeping track of fixing a dead blog. I can share the process and data analysis on a blog post and visitors can see how it evolves over time.

The bottom line is that embedding Google Sheets is kind of like providing living data that is constantly updated. It’s a method that can engage your readers while providing data-specific details for the topic.

How to Embed Google Sheets

There are two easy ways to embed your Google Sheets into WordPress. And in reality, you can use the first method I’m going to show you on virtually any website that has access to HTML edits.

Personally, I prefer the first option. It reduces how many plugins you’ll have installed at any given time, which keeps your WordPress cleaner and running smoothly.

Method 1: Direct Embed Code from Google Sheets

Directly embedding code from Google Sheets is essentially a copy-and-paste process. However, you can make adjustments for height and width depending on your needs.

I’ll show you how to do those as well.

Step 1: Open or Create a Post or Page

From the WordPress dashboard, go to posts or pages and click the “Add New” option. For this tutorial, I’m going to make a test post.

Add a New Post

Step 2: Get the Embed Code from Google Sheets

Go to any Google Sheets document you want to embed. In this example, I’m using the “Dead Website” data set.

From the Google Sheet, go to “File,” and then “Share.” From here, click the “Publish to Web” option.

Google Sheets Publish to Web

This will bring up the Publish to the Web window from Google.

Step 3: Copy the Embed Code

From the new window, click the “Embed” tab.

Embed Tab

Using the drop-down box, select whether you want to share the entire document or just the current sheet. This is helpful if you don’t want people to have access to other sensitive data you might have on the Google Sheet.

Share Doc or Sheets

As you can see in the example image, I have four sheets on this spreadsheet that I can show instead of the entire document. For this example, I’m going to just select “Jetpack Traffic Stats.”

Copy the iFrame embed code provided by Google Sheets. You can either click into the coding to highlight it and hit CTRL+C on your keyboard or right-click and copy it.

iFrame Embed Code

Step 4: Paste Code into HTML Block

Go back to your WordPress post or page and add a new Custom HTML block to the editor.

Custom HTML Block

Paste the code for the embed from Google Sheets into the Custom HTML block in WordPress.

Paste Google Sheets Embed

From here, you can click Save Draft, Publish, or Update to save your post or page with the spreadsheet.

Step 5: (Optional) Preview Your Google Sheet

It’s always a good idea to test your code before publishing. That way, you can avoid any embarrassing mistakes while making sure your sheets are displayed like you want them.

Click the “Preview” option from the Custom HTML box.

Preview Google Sheets

As you can see, the default display for the sheet is pretty small.

Embedded Display in WordPress

Let’s make it bigger so people can see it without having to use the scroll bars.

Step 6: (Optional) Resize the Google Sheets Embed

Changing the size of the Google sheet isn’t all that difficult of a process. Though, it does require adding a bit to the code.

Don’t worry, these additions are quite simple and easy to understand.

First, go back to the HTML view of the sheet in WordPress.

HTML View of Google Sheets

After the “iFrame” section, copy and paste the code below to add it:

width=”100%”

Make sure there is a space in front and behind the width element.

Width HTML Code

This tells WordPress to expand the width of the Google Sheet to the maximum width of the content as per your website’s theme.

In other words, it will expand the viewable area of the sheet to fit your blog post.

Full Width of Sheet

You can make this any percentage you see fit depending on how you want the embed of the Google Sheets to appear on your website.

You can also use a numerical value instead of percentages, which will then size your sheet according to the number of pixels. To do this, you would copy and paste the code below and enter your preferred size.

width=”450″

This will tell WordPress to size the sheet to 450 pixels on your post.

Now, let’s make the sheet taller. This works in virtually the same way only you’re using height instead of width.

So, copy and paste the following as you did before:

height=”450″

Height HTML Code

NOTE: Notice you won’t be able to use percentages when it comes to height. I suggest adjusting the number and then previewing it to see if the height fits your needs.

Viewable Sheets in WordPress
This is a width of 100% and a height of 665

Method 2: Using the EmbedPress Plugin

The second method to embed Google Sheets into WordPress is by using a plugin. For this, I’m going to demonstrate EmbedPress.

This particular plugin has a great deal of flexibility when it comes to adding third-party content to your posts. For example, EmbedPress can help you add content from YouTube, Vimeo, Google Maps, Facebook, Spotify, and a whole lot more.

Using a plugin means you don’t have to worry about copying iFrame code from Google Sheets. This might be beneficial for those who are new to HTML or otherwise don’t feel comfortable with third-party code.

Step 1: Install and Activate EmbedPress

From the WordPress dashboard, go to Plugins and click, “Add New.”

Add New Plugins

Search for, install, and activate EmbedPress.

Activate EmbedPress

Step 2: Adjust Settings to Embed Google Sheets

EmbedPress doesn’t have a lot of settings to adjust in the free version. But let’s take a look at them anyway in case you want to customize a bit of the embed’s appearance.

Click on “EmbedPress” from the admin bar on the left side of your screen.

EmbedPress

From this screen, you can select the default width and height for your Google Sheets embed. It’s helpful if you know the viewable dimensions of your blog content, and you can find that information in the documentation of some themes.

Customize Size of the Embed

You can also customize the dimensions from the WordPress editor, which I’ll demonstrate in a moment. Though, it is a bit of a pain to manage.

If you make any changes within the settings screen, don’t forget to click the “Save Changes” button, which will immediately become highlighted in red.

Let’s go over the other settings on the left of the screen real quick.

Platforms
This section is for managing other third-party embeds, such as YouTube or Spotify.

Elements
In the Elements section, you can choose which blocks are available in WordPress.

Branding
If you upgrade to the Pro version, you can customize the branding of the block for each platform you add.

Using the ShortCode Instead

In case you just want to use a shortcode to add your Google Sheets, you can do so from the “Shortcode” option in the settings screen.

From here, you simply add the URL of what you want to add, click “Generate,” and EmbedPress will create the Shortcode you can copy and paste anywhere in WordPress.

Step 3: Get the URL from Google Sheets

To embed Google Sheets with the EmbedPress block, you’ll need the URL provided by Google. This is a bit different as opposed to the method above.

Go to the Google Sheet you want to add to WordPress.

Go to File > Share, and click, “Publish to web.”

Publish to Web

This will launch the link and embed window from Google.

Under the Link section, use the drop-down box to select the section of the spreadsheet you wish to share.

Select Spreadsheet Type

You can choose to share the entire document or specific tabs in case you don’t want people to see sensitive data on the other sheets.

You won’t need to change anything in the “Web page” drop-down window.

Copy the URL from the field below the two drop-downs.

Copy Embed URL from Google

Step 4: Add URL to EmbedPress Block

Go back to your WordPress website and open or create a post or page. Essentially, go to the post or page where you want to share the spreadsheet.

In this example, I’m going to add it under the previous method.

Click to add a new block in WordPress.

Add New Block

Search for EmbedPress. You’ll see a list of the connections you can add from third-party sources.

Click the option for “Google Sheets.”

Choose Google Sheets

Paste the Sheets URL from Google into the field provided and click, “Embed.”

Embed Google Sheets URL

EmbedPress will now use your width and height from the settings screen to show your spreadsheet.

Default Size of Spreadsheet

But what if the size isn’t right for the spreadsheet you want to show in WordPress?

Step 5: (Optional) Make Adjustments to the Embed Size

Unfortunately, EmbedPress currently doesn’t provide an easy method to resize the display of Google Sheets from within a WordPress post or page.

This means you have two options. You can either go back to the EmbedPress settings and enter new width and height dimensions, or you can convert the EmbedPress block to HTML.

Let’s say we want to convert the EmbedPress to HTML for sizing. Click on the three dots on the right to open the block options.

Open Block Options

Next, click on the option to “Edit as HTML.”

Edit as HTML

From here, edit the numbers within the quotations for width and height.

Adjust Width and Height

The moment you click out of the box for any reason, WordPress is going to display an “unexpected or invalid content” error. That’s because the EmbedPress block doesn’t support HTML edits.

Click the three dots on the right of this error message. (Do not click on Attempt Block Recovery)

Block Options in HTML

Click the option to “Convert to HTML.”

Convert Block to HTML

Now, the EmbedPress block looks similar to the iFrame code from the first method. Notice how your width and height are at the sizes you want.

Converted EmbedPress Block

Click on the “Preview” option to see what your Google Sheets looks like.

Preview EmbedPress HTML

Because it is a block originally from EmbedPress, it’ll look just a tad different from the first method. You probably won’t be able to use the exact same width and height dimensions.

In that case, just click on the HTML option and change the numbers again.

In reality, it’s probably easier for beginners to use the EmbedPress settings window to change the size dimensions. The only problem is that all of your embeds will follow those width and height settings regardless if you’re using Google Sheets or YouTube.

However, this might not matter much depending on what you plan on embedding for your needs.

Embedding Editable Spreadsheets

One thing I need to point out about EmbedPress. If you use the plugin to embed the Google Sheets URL, be aware that you don’t want to use the address from your browser’s window.

If you use the URL from your browser’s address bar instead of the one from Publish to Web, it will add an editable Google Sheet to your website.

This means any visitor can make changes to the spreadsheet directly from your post or page.

In some cases, this might be a useful tool. For example, you could let visitors add their own ideas for future blog posts or videos. However, anyone can go in and delete everything or enter obscene information from your website.

So, when embedding anything from Google, make sure you’re using the Publish to Web option.

Using the Embed Code Instead of a Plugin

While there’s no doubt that plugins like EmbedPress make adding third-party content easier for WordPress users, using the embed code directly from Google is often the better choice.

Not only does the code give you absolute control over size dimensions without jumping through hoops, but the sizing is more precise.

Perhaps one of the more important aspects of using copy-and-pasted code is that it doesn’t require an additional plugin for your website.

The more plugins you have installed, the more inodes and drive space your website consumes. This can affect the performance of your website overall while increasing the number of things that can go wrong.

Besides, most of the platforms that are supported by EmbedPress have code snippets for embedding that you can copy and paste anyway.

The only real contributing factor to using EmbedPress is that it makes embedding super easy for the beginner. Instead of hunting down the code snippet to copy into WordPress, you can just throw in the web address.

This is incredibly easier when it comes to other third-party sites, such as YouTube or Twitch. Just copy and paste the URL into EmbedPress and it’s done.

Conclusion

It’s not all that difficult to integrate Google Sheets into a website. You can either copy and paste the code or use EmbedPress to simplify the process. Either way, you’re sharing external content to engage your audience.

Personally, I share spreadsheets all the time as I want to show results and data related to certain case studies and experiments.

How would you use a spreadsheet to pique the interest of visitors?

Michael Brockbank
Follow Me...

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments