Project

General

Profile

Actions

Feature #1961

closed

Google Docs embed plugin

Added by Boone Gorges over 12 years ago. Updated over 12 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
WordPress (misc)
Target version:
Start date:
2012-06-25
Due date:
% Done:

0%

Estimated time:
2.00 h
Deployment actions:

Description

See #1947

It seems as if there is no Google Docs shortcode plugin that actually works. It shouldn't be difficult to build one.

I'm going to put this under 1.4, as I think it's only going to take an hour or so to build. If it ends up being more difficult, I'm going to move it to a futere release. Scott, in the meantime, if you find a GDocs plugin that actually works, please let me know and I'll abort my mission :)


Files

gdoc.JPG (67.1 KB) gdoc.JPG scott voth, 2012-07-07 10:46 AM
Screen_Shot_2012-07-07_at_3.41.28_PM.png (149 KB) Screen_Shot_2012-07-07_at_3.41.28_PM.png Matt Gold, 2012-07-07 03:42 PM
Actions #2

Updated by Raymond Hoh over 12 years ago

Hi Scott,

I took a quick look at the "Docs to WordPress" plugin and it seems quite complicated. I couldn't find a suitable Google Docs shortcode plugin, so I coded one myself.

I just pushed the plugin to the master branch:
https://github.com/castiron/cac/commit/bcf34a5fb2888ecd876fbaac71ff97b54dcf9534

I've installed it on Cdev for testing.

Here's an example:
http://cdev.gc.cuny.edu/help/ (scroll to the bottom)

Some quick docs:

  1. Login to your Google Docs and navigate to the doc you want to embed. Go to "File > Publish to the Web". Make any configuration changes you want.
  2. For a document or presentation, copy the "Document Link". (If you don't see the "Document Link" field, click on "Start Publishing".) For a spreadsheet, make sure "Web page" is selected in the drop-down menu. Next copy the link in the textarea. (If you don't see the link, click on "Start Publishing".)
  3. Login to your WP dashboard, start writing a blog post and enter in the following shortcode:
    [gdoc link="PASTE YOUR GOOGLE DOC LINK HERE"]

Here are some other custom parameters you can use:

"width" - By default, this tries to use the current theme's content width. If this doesn't exist, the width is "100%". Fill in this value to enter a custom width.

"height" - Enter in a custom height for your Google Doc if desired.

"size" - This parameter is only applicable to Presentations. You can enter in 'small', 'medium' or 'large'. To set a custom width and height, use the 'width' and 'height' parameters listed above instead.


The plugin supports Documents, Presentations and Spreadsheets. I haven't added support for Forms and Drawings yet, but that should be quite easy.

Let me know if the documentation isn't clear enough or if you have any Qs!

Actions #3

Updated by Matt Gold over 12 years ago

Wow -- that's fantastic, Ray! Will you be packaging this for general release?

Actions #4

Updated by Boone Gorges over 12 years ago

Thanks, Ray. Looking at what you wrote, it turns out it was actually an easier job than I thought it'd be - kudos to Google for using nearly identical URLs for embeds and regular views.

As Matt suggests, feel free to throw this in the repo. Put cuny-academic-commons as a co-author, and maintain it on CUNY time. You can also write a post about it on dev.commons.gc.cuny.edu if you decide to release. (You're an Editor on that blog.)

Actions #5

Updated by scott voth over 12 years ago

This is awesome Ray! Thanks! I tested it out and it's great. I think google forms would be really useful, too, whenever you can get around to it.

I did notice one display issue that seems to happen in Firefox/Windows7 when you scroll down to the bottom of a long doc ( I set both width and height = 100%). When I scroll up, the BuddyPress Admin bar starts repeating - it seems that the two sections get confused - I am testing at http://newg2blog.cdev.gc.cuny.edu/test-google-docs/

I attached a screen shot.

I noticed that Chrome and IE (in Windows 7) both display the page quite differently in terms of the scrolling - and thus do not have the issue.

Actions #6

Updated by Raymond Hoh over 12 years ago

Scott: Glad you like it!

Can I ask what version of Firefox you're using? I tested on FF 13 and I do not get the repeating thing. It could be a problem with FF's hardware acceleration. Try turning it off:
https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems#w_turn-off-hardware-acceleration

About the height="100%" issue, it's not reliable to use a percentage for the height. It's better to use a fixed integer like "800". Yeah, I know that isn't great, but without using some javascript to auto-detect the iframe's height, this isn't really possible.


I've just pushed an update that adds Forms support and an additional parameter for Documents:
https://github.com/castiron/cac/commit/019f17dbe94c7172f8516e07dbe70197189fa310

For forms, get the direct, public URL to the form and use the shortcode as usual.

For the additional parameter for Documents, you can try this:
[gdoc link="LINK TO DOCUMENT" seamless="0"]

This will show the document with Google Docs' header and footer. If you don't want the header and footer, just omit the "seamless" parameter.

Give both a test and let me know what you think.

I've decided to omit Drawings support because a drawing simply uses the <img> tag, which isn't a security issue like an <iframe> is.


Boone, Matt: I'll add the plugin once we're done testing!

Actions #7

Updated by Matt Gold over 12 years ago

Thanks, Ray. Just FYI, I think I'm seeing what Scott is seeing (Mac OS X, Chrome). Please see attached screenshot, which shows what happens when I scroll within the google doc

Actions #9

Updated by scott voth over 12 years ago

Hi Ray -
The issue with Firefox 13 has disappeared for me after turning off accelerator - but in Chrome I noticed what Matt was noticing too, after I changed the length to 800. But then I changed the length to 400, and everything works really nicely, in all three browsers, no problems. I think when the length is too long, you get the extra scroll bar that messes things up. I haven't got a chance to try forms yet - I set one up in Google, but cdev has been down - so I haven't been able to test. I will let you know...

Actions #10

Updated by Boone Gorges over 12 years ago

Hiya gang. What's the status on this ticket? Do we need to put something into the plugin that prevents oversizing windows?

Actions #11

Updated by Raymond Hoh over 12 years ago

I believe the plugin is ready.

Scott: If you have done any additional testing and there are issues, please let me know.


I think the iframe scrolling issue with Chrome is a bug with their browser, so I don't think we should do anything special here.

The height can be manually overriden in the shortcode as well.

Actions #12

Updated by Boone Gorges over 12 years ago

  • Status changed from Assigned to Resolved

Dope. Thanks Ray :)

Actions #13

Updated by scott voth over 12 years ago

Yes, I tested awhile back and it was good. Looking forward to its implementation. Thanks Ray!

Actions

Also available in: Atom PDF