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¤cy_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.
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
Yup. :) TIAS.
Not yet. But that’s a fine idea. :) Patches welcome!
Meitar
24 Oct 10 at 9:56 AM
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
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
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
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:Meitar
1 Dec 10 at 6:24 PM
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
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
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
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
Hi Steen. :)
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
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
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
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.
Hope that helps.
Meitar
3 Feb 11 at 7:16 PM
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
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
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
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
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
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
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
Is it possible to display clickable multiple sheets?
ed
28 Mar 11 at 7:04 PM
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
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
Not with this plugin yet. Patches welcome. :)
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.
Make sure the spreadsheet has been published.
Meitar
11 May 11 at 2:54 PM
Thanks for responding, Meitar.
Brenda
11 May 11 at 7:10 PM
Hi,
Love the plugin! Does it support template tags, or only shortcodes?
Thanks!
Travis
26 May 11 at 11:11 AM
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
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
Again commenting on the above – it seems to like dollar signs but not pound signs ??
chris
31 May 11 at 10:36 AM
Hi Chris. You described an issue like this:
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.iso88591but your file is encoded in, say,en_GB.utf8, thenfgetcsv()(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
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
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
Adri, use CSS to hide any columns you don’t want visible.
You need to change the configuration of allow_url_fopen in your
php.inifile, Todd.Meitar
26 Jul 11 at 3:31 PM
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
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
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
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
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
Here are a few guides to styling tables with CSS, haze. Good luck.
Meitar
13 Sep 11 at 12:53 PM
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
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
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-ABDCEFfor “schedules” and#igsv-GHIJKLfor “rosters”. Re-read the plugin description, above, to refresh your memory about how this works.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
[...] 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 [...]
Inline Google Spreadsheet Viewer | Eli's Blog
3 Nov 11 at 1:12 PM
I added on the page:
[gdoc key="0AqnOsk5qBibQdEZ6RXFKZmpTMFJZWDBkYUNXMFNkWFE" gid="0"]
but nothing gets displayed
marko
26 Nov 11 at 1:40 AM
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
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
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
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.
Nadine, the
php.inifile 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
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
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
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