Easily Embed Google Spreadsheet WordPress With Specific Range

embed spreadsheet
embed specific range of cells

If you have Data in a Google Spreadsheet and have to embed that data on your WordPress site that is a simple thing to do but what about embedding specific cells, or a specific part of your google spreadsheet.
Here’s a link from google explaining how to embed files
https://support.google.com/docs/answer/183965#embed_files
But as I would like to only show specific part cells from my spreadsheet, not the entire one.

Total Time: 5 minutes

Open a Google Spreadsheet or Create New

google spreadsheet embed specific cells

Go to the Google Spreadsheets select a blank file to create one or a template, or an already made file.

Publish Google Spreadsheet to Web

Google Spreadsheet Embed

Here is a New File, Created now I will publish this file to Web

Go to File > Publish to the Web

embed google spreadsheet on website

Embed Google Spreadsheet Get Code

embed google spreadsheet wordpress

As in the Screenshot Once you click Publish to the Web, you will see the above window go to Embed > Select Sheet ( to embed ) > Check Automatically Republish When Changes are made > Publish ( Green Button )

After you Publish you will see this Window Below in the Screenshot that will have the code that you can embed in your WordPress.

wordpress google sheet embed

Embed Google SpreadSheet WordPress Post to as an iframe

embed spreadsheet

Follow the Short Screencast Above, To embed the code of google spreadsheet on the WordPress Post or Page you have to

Add a new HTML Block > Paste code inside the block > Preview,

once your preview the same you will see the Sheet as shown in
Example 1 of Code Embeds Below of this tutorial.

Embed Google Spreadsheet WordPress With Specific Range

embed specific range of cells

For displaying only specific cells with a defined width and height of the Spreadsheet, We will modify the HTML code of iframe,

Take an example to display the A2 to D3 cells range.

Example 2 of Code Embed Below Shows the same.

Supply:

  • A Google Spreadsheet

Tools:

  • A Google Account to Edit View the Spreadsheet

Example 1 of Google Spreadsheet Code Embed

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRUn0XW7C63CyCPe5ZxkGSontQq-cJdDnFwBynZZTICAyRyKX7yxbgz3BwuxeYAwIay92NfYKyWMhul/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false"></iframe>

Example 2 Embed Google Spreadsheet WordPress With Specific Range

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRUn0XW7C63CyCPe5ZxkGSontQq-cJdDnFwBynZZTICAyRyKX7yxbgz3BwuxeYAwIay92NfYKyWMhul/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false&amp;range=A2:D3" width="400" height="350"></iframe>

Html Blocks are really usable in WordPress I have also made some Reusable Html Blocks WordPress in a separate post here that are AMP Compatible.

Avatar of Rahul Kharbanda

By Rahul Kharbanda

Hi, I am Rahul Kharbanda from India. I hope you like all the content I made. Welcome to comment & connect. I am on Quora , Github , Twitter

Leave a Reply