Embed Google Spreadsheet In WordPress Posts And Post Types

Earlier we have discussed about a WordPress plugin that allows you to office files, PDF and more in your website. Now today in this lesson you will learn embedding public Google spreadsheets inside your WordPress posts, pages and other custom post types using a simple handy shortcode.

Inline Google Spreadsheet Viewer is a WordPress plugin that allows you to easily display data stored in Google spreadsheet into an interactive chart, graph, a sortable and searchable table or both.

It allows you to embed live previews of PDF, XLS, DOC, and other file formats supported by the Google Docs Viewer. A built-in cache provides extra speed. With this cool plugin you can:

  • Update your blog post or page whenever your Google Spreadsheet changes.
  • Create beautiful interactive graphs and charts from your spreadsheet with ease.
  • Embed almost any online document to view without leaving your blog.
  • Use a powerful and flexible query language and a plethora of configuration options.
Start by installing ‘Inline Google Spreadsheet Viewer’ plugin in WordPress

Upon activation visit your admin area dashboard Settings -> Inline Google Spreadsheet Viewer and you can set data table classes and default objects.

Embedding spreadsheet is easy,

Before embedding any spreadsheet data, first make sure that it is shared either by using the “Public on the web” or “Anyone with the link” options present on your spreadsheet page on Google drive docs.

For embedding any spreadsheet inside your post

Inline Google Spreadsheet Viewer 1

Simply visit your admin area dashboard Posts -> Add New screen or open any old post to edit.

Switch to text editor mode and you will be noticing a gdoc button in your editor, click that button, paste your spread sheet URL and click ‘Add Spreadsheet’ button to insert the shortcode.

[gdoc key="https://docs.google.com/spreadsheets/d/ABCDEFG/edit"]

Or manually use the given shortcode replacing the spreadsheet URL with your spreadsheet URL. Now publish or update your post and that’s it.

If in-case your spreadsheet uses OLD Google Spreadsheets URL structure:

Then you will be needing to copy only “key” out from the URL.

For instance, if the URL of your old Google Spreadsheet ishttps://docs.google.com/spreadsheets/pub?key=ABCDEFG, then just copy the characters given after key in URL and your shortcode should look like this:

[gdoc key="ABCDEFG"]
To fetch data from a worksheet other than the first one:

For instance, to display a worksheet published at https://spreadsheets.google.com/pub?key=ABCDEFG&gid=4, use the following shortcode style:

[gdoc key="ABCDEFG" gid="4"]
For creating an interactive chart:

Inline Google Spreadsheet Viewer 3

Use chart attribute with a supported chart type. Such as:

  • Area charts
  • Bar charts
  • Bubble charts
  • Candlestick charts
  • Column charts
  • Combo charts
  • Histogram charts
  • Line charts
  • Pie charts
  • Scatter charts
  • Stepped area charts

For instance: 

Inline Google Spreadsheet Viewer 2

[gdoc key="ABCDEFG" chart="Bar" title="Total goals per team"]

More chart usage examples are listed on plugin’s download page on WordPress.org.

Leave a Reply

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