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
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
Here is a New File, Created now I will publish this file to Web
Go to File > Publish to the Web
Embed Google Spreadsheet Get Code
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.
Embed Google SpreadSheet WordPress Post to as an iframe
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
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&single=true&widget=true&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&single=true&widget=true&headers=false&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.
