Everything In Between

The brutally honest, first-person account of Meitar Moscovitz's life.

Inline Google Spreadsheet Viewer

52 comments

A WordPress plugin that renders a published, public Google Spreadsheet in a WordPress post or page.

=== Plugin Name ===
Contributors: meitar
Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=TJLPJYXHSRBEE&lc=US&item_name=Inline%20Google%20Spreadsheet%20Viewer&item_number=Inline%20Google%20Spreadsheet%20Viewer&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted
Tags: Google Docs, Google, Spreadsheet, shortcode
Requires at least: 2.6
Tested up to: 3.0.1
Stable tag: trunk

Embeds a published, public Google Spreadsheet in a WordPress post or page as an HTML table.

== Description ==

Fetches a published Google Spreadsheet using a `[gdoc key=""]` WordPress shortcode, then renders it as an HTML table, embedded in your blog post or page. The only required parameter is `key`, which specifies the document you’d like to retrieve. Optionally, you can also strip a certain number of rows (e.g., `strip=”3″` omits the top 3 rows of the spreadsheet) and you can supply a table `summary`, `<caption>` and customized `class` value.

For example, to display the spreadsheet at `https://spreadsheets.google.com/pub?key=ABCDEFG`, use the following shortcode in your WordPress post or page:

[gdoc key="ABCDEFG"]

Currently, this plugin only supports Google Spreadsheets that are “Published as a web page” and therefore public. Private Google Docs are not supported (yet).

To render the HTML table with additional metadata, you can also do the following:

[gdoc key="ABCDEFG" class="my-sheet" summary="An example spreadsheet, with a summary."]This is the table’s caption.[/gdoc]

The above shortcode will produce HTML that looks something like the following:

<table id=”igsv-ABCDEFG” class=”igsv-table my-sheet” summary=”An example spreadsheet, with a summary.”>
<caption>This is the table’s caption.</caption>
<!– …rest of table code using spreadsheet data here… –>
</table>

Finally, you can use the `gid` attribute to embed a worksheet other than the first one (the one on the far left). For example, to display a worksheet published at `https://spreadsheets.google.com/pub?key=ABCDEFG&gid=4`, use the following shortcode in your WordPress post or page:

[gdoc key="ABCDEFG" gid="4"]

== Installation ==

1. Upload `inline-gdocs-viewer.php` to the `/wp-content/plugins/` directory.
1. Activate the plugin through the ‘Plugins’ menu in WordPress.
1. Use the `[gdoc key="ABCDEFG"]` shortcode wherever you’d like to insert the Google Spreadsheet.

== Frequently Asked Questions ==

= The default style is ugly. Can I change it? =
Yes, if you’re able to change your theme’s style sheet. The plugin renders HTML with plenty of [CSS](http://en.wikipedia.org/wiki/Cascading_Style_Sheets) hooks. Use the `igsv-table` class from your style sheets to target the plugin’s `<table>` element.

Additionally, each row (`<tr>`) and cell (`<td>`) is assigned a specific `class` attribute value. The first `<tr>` element is assigned the `row-1` class, the second is assigned `row-2`, and the last `row-N` where `N` is the number of rows in the rendered table. Similarly, each cell is assigned a class based on its columnar position; the first cell in a row is assigned the `col-1` class, the second `col-2`, and so on:

.igsv-table .row-2 .col-5 { /* styles for the cell in the 2nd row, 5th column */ }

Finally, both rows and cells (based on columns) are assigned an additional class of either `odd` or `even`, allowing for easy zebra-striping in [CSS3](http://www.w3.org/TR/css3-selectors/) non-conformant browsers.

.igsv-table tr.odd { /* styles for odd-numbered rows (row 1, 3, 5…) */ }
.igsv-table tr.even { /* styles for even-numbered rows (row 2, 4, 6…) */ }
.igsv-table td.odd { /* styles for odd-numbered cells (column 1, 3, 5…) */ }
.igsv-table td.even { /* styles for even-numbered cells (column 2, 4, 6…) */ }

= A table appears, but it’s not my spreadsheet’s data! And it looks weird! =
You should triple-check that you’ve published your spreadsheet. Google provides instructions for doing this. Be sure to follow steps 1 and 2 in [Google Spreadsheets Help: Publishing to the Web](http://docs.google.com/support/bin/answer.py?hl=en&answer=47134).

== Change log ==

= Version 0.2 =

* Implements `gid` attribute in shortcode to allow embedding of non-default worksheet.
* Updates plugin internals; now requires WordPress 2.6 or higher.

= Version 0.1 =

* Initial release.

Written by Meitar

August 17th, 2010 at 1:02 am

Posted in

52 Responses to 'Inline Google Spreadsheet Viewer'

Subscribe to comments with RSS or TrackBack to 'Inline Google Spreadsheet Viewer'.

  1. How should I use strip=”3″ ?

    Is it [gdoc key="ABCDEFG" strip="3"] ?

    And is there a way to show only the top rows, e.g. show the first two rows?

    handig

    23 Oct 10 at 1:28 PM

  2. Is it [gdoc key="ABCDEFG" strip="3"] ?

    Yup. :) TIAS.

    is there a way to show only the top rows, e.g. show the first two rows?

    Not yet. But that’s a fine idea. :) Patches welcome!

    Meitar

    24 Oct 10 at 9:56 AM

  3. I tried strip as in :
    [gdoc key="ABCDEFG" strip="3"] but that doesn’s strip anything? Using the latest WordPress (multisite config).

    handig

    24 Oct 10 at 2:19 PM

  4. I tried strip as in :
    [gdoc key="ABCDEFG" strip="3"] but that doesn’s strip anything? Using the latest WordPress (multisite config).

    I’m sure that it does, as I’m using that parameter on my sites, but I believe that you’re having trouble with it. You may consider double-checking that there aren’t any empty rows in your Google Spreadsheet that are being stripped out.

    Unfortunately, I can’t troubleshoot your issue for you. If you’d like to report a bug, feel free to submit an issue.

    Meitar

    26 Oct 10 at 4:48 PM

  5. LS
    Any reason why this key wouldn’t work?
    [gdoc key="tKGnpi2W1kHafUIQOwRsfMQ&hl=nl&authkey=CNvkgKMB#gid=0"]
    that’s how the spreadsheet named in my browser. Language should be omitted? Wrong configuration of WordPress?

    Thanks,
    Pim.

    pmarsman

    30 Nov 10 at 2:22 PM

  6. That’s not a key, pmarsman, that’s a query string. Your key is probably tKGnpi2W1kHafUIQOwRsfMQ. If my inference is correct, you want to use this:

    [gdoc key="tKGnpi2W1kHafUIQOwRsfMQ"]

    Meitar

    1 Dec 10 at 6:24 PM

  7. Thanks Meitar.
    I didn’t know I had to publish the document to the web: that button is in the right corner of the documentscreen in pull downmenu sharing. I usually share document via another links just besides the title.
    In the end I used “TGN embed everything” plug in because it also allows me to embed privatie gDocs, and to embed youtube en other pages via iFrame.

    Thanks,
    Pim.

    pmarsman

    2 Dec 10 at 1:16 AM

  8. I am trying to edit the column spacing. Currently there is no spacing between the columns. could you please tell me how to do this?

    adam

    30 Dec 10 at 11:24 AM

  9. I am trying to edit the column spacing. Currently there is no spacing between the columns. could you please tell me how to do this?

    Try using left and right padding on the cells themselves. To space the second column out from the first and third, for instance, this might work:

    .col-2 { padding-left: 3em; padding-right: 3em; }

    Meitar

    2 Jan 11 at 2:01 PM

  10. Hi Meitar

    It’s a great achievement to be able to use Google inline viewer in my blog – I just hope that you will make another plugin for Google Calender. Do you think it would be possible ?

    Steen Jakobsen

    19 Jan 11 at 12:10 AM

  11. Hi Steen. :)

    I…hope that you will make another plugin for Google Calender. Do you think it would be possible ?

    Well, Google Calendar is pretty easily embed-able within any HTML page. See the Google help page about embedding a Calendar view in a web page. I’m unsure what a plugin would do that isn’t already possible with the free Google Calendar embed code. Can you let me know what you were hoping to accomplish that you can’t accomplish simply embedding the Calendar into your HTML pages?

    Thanks. :)

    Meitar

    19 Jan 11 at 2:23 AM

  12. Hi Meitar

    First of all, thanks for your reply. I didn’t know that I could embeb a Calendar and I wonder why I needed to have a plugin for the spreadsheet and not for the Calendar.

    Thanks,

    Steen

    Steen Jakobsen

    19 Jan 11 at 2:29 AM

  13. Hi there

    Many thanks for writing this plugin!
    My question is, is it possible to strip out a column like you can do with a row? If so, how do you do it?

    Thanks

    Joe

    Joe

    3 Feb 11 at 6:04 AM

  14. is it possible to strip out a column like you can do with a row? If so, how do you do it?

    The plugin doesn’t have an option for it, but you can use CSS to achieve that effect. For instance, the following CSS rule will remove the fourth column from the page.

    .col-4 { display: none; }

    Hope that helps.

    Meitar

    3 Feb 11 at 7:16 PM

  15. Html links in my spreadsheet are not appearing. Is this a know error or is something wrong. I can see the links when viewing the google docs but nothing appears in website view

    Steven Miedema

    8 Feb 11 at 7:58 AM

  16. Html links in my spreadsheet are not appearing. Is this a know error or is something wrong. I can see the links when viewing the google docs but nothing appears in website view

    This plugin doesn’t operate on any of the data inside the cells, Steven, which is why you aren’t seeing the URL‘s appear as hyperlinks. That’s a good feature request though, because it’s a pretty safe operation, so I’d appreciate it if you can submit an issue to this effect on the issue tracker. :)

    Meitar

    8 Feb 11 at 4:57 PM

  17. Hi Meitar. Love the plugin, thanks. Would like also to have URLs working, as above. I’ve added it to the issue tracker as requested. Thanks, Stuart

    Stuart Wales

    25 Feb 11 at 9:02 AM

  18. I am trying the plugin. I created a public spreadsheet, but it’s not appearing on my page.

    Here’s the public address:

    https://spreadsheets.google.com/ccc?key=0AhUtMNvdXelwdEFORFVqQ3RtaVZXdG5LUmstMG8tdlE&hl=en#gid=0

    Here’s the page where the shortcode is:

    http://sandbox03.veloware.net/class-schedule-university-elite-fitness-taekwondo/

    Here’s the shortcode:

    [gdoc key="0AhUtMNvdXelwdEFORFVqQ3RtaVZXdG5LUmstMG8tdlE"]

    Thank you for your help.

    Julian

    3 Mar 11 at 4:40 PM

  19. You don’t appear to have published your document, Julian. See Publishing to the Web at Google Help.

    Meitar

    3 Mar 11 at 5:51 PM

  20. I love this plugin.
    Any reason why an update to a published sheet would not display?
    Seems to only show the original state when I first published.

    Brian

    20 Mar 11 at 4:17 PM

  21. Any reason why an update to a published sheet would not display?

    Nope, Brian, no reason as far as the plugin is concerned. The plugin merely fetches whatever the most recent version is, as published by Google. Sometimes Google Docs does take a few minutes to refresh the published-to-the-web version of a “published” document, though. That may be what’s happening.

    In the future, I would like to see the plugin itself keep a cache of that “most recent” version, but as that’s not yet implemented, that can’t be the explanation for why you’re not seeing the most recent version of your spreadsheet when using the plugin.

    Meitar

    20 Mar 11 at 5:18 PM

  22. Is it possible to display clickable multiple sheets?

    ed

    28 Mar 11 at 7:04 PM

  23. Great plug-in!

    Is there a way to select which colummns are displayed? I hid columns using css, but the data is still visible in the source code.

    Could I alter the php to only select columns I specify?

    Brenda

    1 Apr 11 at 1:43 PM

  24. I’m trying to display one sheet, and using
    key=”axxxxxxxx” gid=2], but I’m not getting the spreadsheet (it’s actually a lot of junk from google’s website that shows up). I’ve also tried gid=”2″ – doesn’t make a difference. How do I display a specific sheet? I must be missing something here. Thanks.

    Mike Quinn

    11 May 11 at 9:24 AM

  25. Is it possible to display clickable multiple sheets?

    Not with this plugin yet. Patches welcome. :)

    Could I alter the php to only select columns I specify? Is there a way to select which colummns are displayed? I hid columns using css, but the data is still visible in the source code.

    If you’d like to change the PHP yourself, sure, go ahead. For now, CSS is what one’s got, and arguably all one should have.

    I’m not getting the spreadsheet (it’s actually a lot of junk from google’s website that shows up)

    Make sure the spreadsheet has been published.

    Meitar

    11 May 11 at 2:54 PM

  26. Thanks for responding, Meitar.

    Brenda

    11 May 11 at 7:10 PM

  27. Hi,

    Love the plugin! Does it support template tags, or only shortcodes?

    Thanks!

    Travis

    26 May 11 at 11:11 AM

  28. Love the plugin! Does it support template tags, or only shortcodes?

    Not yet, Travis, but that’s probably a good feature to add. :) Patches welcome or, barring that, submitting this as a feature request on the Github Issue tracker for the project. Thank you!

    Meitar

    27 May 11 at 7:23 PM

  29. I am trying to embed a subscriptions page which includes currency – see the published page here:

    https://spreadsheets.google.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AumoeWGVsnHrdHRjN3JZZVozamNBOW96RTFQekEtbGc&single=true&gid=0&output=html

    But when displaying on the webpage it appears without a currency symbol as is evident here:

    http://irsociety.info/subscriptions/

    Sorry the web pages are still in development…

    chris

    31 May 11 at 8:20 AM

  30. Again commenting on the above – it seems to like dollar signs but not pound signs ??

    chris

    31 May 11 at 10:36 AM

  31. Hi Chris. You described an issue like this:

    when displaying on the webpage it appears without a currency symbol […] it seems to like dollar signs but not pound signs ??

    This is a frustrating problem because the problem is part of PHP‘s mishandling of certain characters when they are in the first position in a new CSV cell and there is a mismatch between the current locale setting on your server and the character encoding in the file being read. If your server is running in, say, en_US.iso88591 but your file is encoded in, say, en_GB.utf8, then fgetcsv() (the native PHP function this plugin uses) will read local character symbols (like the GBP symbol, £) incorrectly when it is the first character in a new cell. See, for instance, this report of the problem as well as this one on a PHP user’s board.

    Now, one way to solve the problem is to find out which character encoding your spreadsheet uses (I looked for you; it’s currently en_GB.utf8), then find out which locale your PHP is currently running in (I can’t check this for you, but you can invoke setlocale(LC_CTYPE, “0″) to find out for yourself), and then make sure they match. This is a bit more work than I’m willing to put into the plugin right now, although you’re more than welcome to submit a feature request on the plugin issue tracker to this effect.

    Another workaround might be to surround the values in your spreadsheet in quotes so that the currency symbol isn’t the first character in the cells, and then strip or hide those quotes from your actual web page.

    Meitar

    31 May 11 at 12:09 PM

  32. Hi! I would like to use my table with only the 1,2,3 columns. Can I do it with this plugin? Thanks your help! The plugin is great! :)

    adri

    24 Jul 11 at 8:48 AM

  33. Hello,

    I have been using your plugin for development of a site locally and it works great but once I moved the site live I now get this error.

    Warning: fopen() [function.fopen]: URL file-access is disabled in the server configuration in /***/inline-gdocs-viewer.php on line 44

    Warning: fopen(https://spreadsheets.google.com/pub?key=0AhCN3DNjYldMdC1HTDVEZXZxemI1X1FXcTRWb1pyZXc&output=csv) [function.fopen]: failed to open stream: no suitable wrapper could be found in /***/inline-google-spreadsheet-viewer/inline-gdocs-viewer.php on line 44

    Any ideas on how to fix would be greatly appreciated.

    Thanks,
    Todd

    Todd

    26 Jul 11 at 2:02 PM

  34. I would like to use my table with only the 1,2,3 columns. Can I do it with this plugin?

    Adri, use CSS to hide any columns you don’t want visible.

    I have been using your plugin for development of a site locally and it works great but once I moved the site live I now get this error.

    Warning: fopen() [function.fopen]: URL file-access is disabled in the server configuration in /***/inline-gdocs-viewer.php on line 44

    Warning: fopen(https://spreadsheets.google.com/pub?key=0AhCN3DNjYldMdC1HTDVEZXZxemI1X1FXcTRWb1pyZXc&output=csv) [function.fopen]: failed to open stream: no suitable wrapper could be found in /***/inline-google-spreadsheet-viewer/inline-gdocs-viewer.php on line 44

    Any ideas on how to fix would be greatly appreciated.

    You need to change the configuration of allow_url_fopen in your php.ini file, Todd.

    Meitar

    26 Jul 11 at 3:31 PM

  35. Got it working on my site, thanks a lot! It does what it is supposed to do. Even if your doc is public you need to share it as a webpage or it won’t work. But after I did that it worked fine and looks good with the CSS too. Awesome.

    Jacob Schweitzer

    27 Jul 11 at 1:25 PM

  36. Hi Meitar,

    Thanks for the help on the fopen, it works great now. I have one more question. Is there any way to make the spreadsheet columns sortable? Thanks!

    - Todd

    Todd

    27 Jul 11 at 4:36 PM

  37. I need to be able to use one big google spreadsheet (one column and 1000++ rows). Is there a way to narrow the displayed table to only cells containing specific words? What if I need to display results for a few different words?

    Amanda

    31 Jul 11 at 6:55 PM

  38. I love your plug-in. Our school just switched over to Google Apps for all staff/students. I am integrating it into the school website. Our athletics secretary has a multi-sheet spreadsheet with the schedules for every Fall Sport. I have a separate page for each sport schedule and tried including the gid to display only one sheet.

    For example, Girls Tennis: http://ehs.hbuhsd.edu/athletics/athletic-schedules/girls-tennis-schedule-all-levels looks like: [gdoc key="0Asfo0q9AvVdtdE9OekV3cFM0UW8tYkFqQlRBTmJDamc&single=true&gid=4"].

    and

    Field Hockey: http://ehs.hbuhsd.edu/athletics/athletic-schedules/fall-athletic-schedules/field-hockey looks like: [gdoc key="0Asfo0q9AvVdtdE9OekV3cFM0UW8tYkFqQlRBTmJDamc&single=true&gid=3"].

    Tennis has GID=4 and Field Hockey has GID=3. I published Field Hockey first and then when I published tennis, it changed the Field Hockey (GID=3) to the Tennis schedule (GID=4).

    How can I show separate sheets from the same spreadsheet without messing the other one up?

    haze

    12 Sep 11 at 5:10 PM

  39. doh. I got it. User error.

    I am having trouble with CSS. I want to style the tables a bit so every other row has a bg color and there are borders around the the table/cells. I tried “.igsv-table tr.odd { background-color: #xxxxxx; }” to no avail. Also, I couldn’t figure out what element (s) to add the border property to.

    haze

    13 Sep 11 at 6:59 AM

  40. I couldn’t figure out what element (s) to add the border property to.

    Here are a few guides to styling tables with CSS, haze. Good luck.

    Meitar

    13 Sep 11 at 12:53 PM

  41. Is there a way to give a spreadhseet/table a unique identifier for CSS?

    For example, we have Sport Schedules with several columns that we want to hide. All of our sports schedules have the same columns in the spreadsheet, so it was easy to .igsv .col-1, .col-8, .col-9, etc. {display: none; } to hide all of the columns that we didn’t need.

    However, we also have sports rosters, but they don’t have the same number of columns. So, my CSS is hiding columns I want to show for the rosters.

    Long story short, is there a way to designate .igsv#schedules and .igsv#rosters so that I can apply CSS only to certain ones?

    haze

    15 Sep 11 at 9:45 AM

  42. Hi Meitar,

    A great google spreadsheet importing plugin, thank you for your time and effort. I did have a question, but you’ve been kind enough to many users already!

    All the best,
    Chris, UK

    Chris

    21 Sep 11 at 3:05 PM

  43. Is there a way to give a spreadhseet/table a unique identifier for CSS? […] Long story short, is there a way to designate .igsv#schedules and .igsv#rosters so that I can apply CSS only to certain ones?

    Each spreadsheet already has a unique identifier, haze: the Google Doc “key” used to access it. These aren’t very human-friendly names, but they do distinguish one spreadsheet from another. So you might do #igsv-ABDCEF for “schedules” and #igsv-GHIJKL for “rosters”. Re-read the plugin description, above, to refresh your memory about how this works.

    A great google spreadsheet importing plugin, thank you for your time and effort. I did have a question, but you’ve been kind enough to many users already!

    You’re welcome, Chris. If you have a question, though, do ask. I can’t be kind and try to answer it if you don’t give me the chance to. ;)

    Meitar

    21 Sep 11 at 3:25 PM

  44. [...] found this cool plugin called Inline Google Spreadsheet Viewer By Mr. Meitar Moscovitz that lets you insert a Google Doc Spreadsheet into a Post or Page. The [...]

  45. I added on the page:
    [gdoc key="0AqnOsk5qBibQdEZ6RXFKZmpTMFJZWDBkYUNXMFNkWFE" gid="0"]

    but nothing gets displayed

    marko

    26 Nov 11 at 1:40 AM

  46. Hello Meitar,

    I installed this plugin on my fresh installation of WordPress (v3.2.1). Is this version not supported (Plugin page WordPress –> Compatible v.3.0.1)?

    I get the same problem as several other people mention. However, I published the sheet over the web.
    I implemented this code: [gdoc key="0AksW9-Ch9KqxdHFUS25EamtEd0kxRG1VbjB6d1pfY1E"]
    The link to the sheet is this: https://docs.google.com/spreadsheet/ccc?key=0AksW9-Ch9KqxdHFUS25EamtEd0kxRG1VbjB6d1pfY1E&hl=nl#gid=0

    What I am doing wrong?

    Thanks in advance!!

    Pedro

    12 Dec 11 at 4:44 AM

  47. Sorry, what I did not told you
    –> The page is mashed up with stuff of Google (with also a signup fields)
    http://wp.rockmedia.nl/?page_id=2

    Pedro

    12 Dec 11 at 4:47 AM

  48. Hi Meitar,

    I am getting the same error Todd was getting. Where can I find this php.ini page? I am not sure where to find it or how to fix it.

    Cheers

    Nadine

    Nadine

    19 Dec 11 at 6:06 AM

  49. I added on the page:
    [gdoc key="0AqnOsk5qBibQdEZ6RXFKZmpTMFJZWDBkYUNXMFNkWFE" gid="0"]

    but nothing gets displayed

    Dunno what to tell you, Marko. That’s not a lot to go on. At the very least, make sure you’re not hitting a cache of your website instead of the live site.

    Pedro, the URL you’re mentioning isn’t a public webpage. Be certain you’ve published your spreadsheet to the Web using Google Spreadsheets first.

    I am getting the same error Todd was getting. Where can I find this php.ini page? I am not sure where to find it or how to fix it.

    Nadine, the php.ini file is part of PHP itself. Read the manual to learn how it works and where it is likely to be on your system.

    Meitar

    19 Dec 11 at 3:24 PM

  50. Hi Meitar,
    Thanx for your response. I really do not understand what is going wrong. The document is Published to te web.
    I have made a screenshot of the Settings of this specific document. See: http://www.rockmedia.nl/googledocs.png

    Pedro

    19 Dec 11 at 3:40 PM

  51. I initially had problems as above because instructions are not quite right. Maybe Google changed the interface?

    What you need to do is: In File menu of spreadsheet (ie inside browser window) choose ‘Publish to the web …’ and click ‘Start Publishing’ button.

    I’m not sure whether sharing as described in instructions also needs to be set as ‘Public on the Web’ via Share button top right of spreadsheet. I guess there’s no reason not to.

    Note: I also had problems with a gid which was first created (ie gid=0) but then moved so no longer be left-most. Because of way plugin is scripted, gid=0 is ignored so defaults to left-most tab. Simply re-generated problem tab with another gid to work around.

    Plugin works fine so far with WP3.3 :-)

    Hope this helps. Big thanks to author!

    gggt

    29 Dec 11 at 5:29 AM

  52. Hi Meiter!

    Apologies for starting this with a praise, but I just can’t help it! This plugin makes non-coders look like pros :)

    Nevertheless, a non-coder is still a non-coder.

    I’ve been trying to format the tables using css. I’ve prevailed in formatting the tables one-by-one using .igsv-table..

    However, is there a way I can implement this to all spreadsheets? I’m publishing a huge number of spreadsheets. I can format each table, but too cumbersome.

    Any help?

    thanks

    nick

    7 Feb 12 at 7:17 AM

Leave a Reply