Inline Google Docs Wordpress Plugin - Rating, Reviews, Demo & Download

Inline Google Docs Preview Wordpress Plugin - Rating, Reviews, Demo & Download

No ratings yet

Free

Follow for free plugins, new theme releases and theme news

Plugin Description

Many people maintain dynamic content on Google Documents or hold volatile data on Google Spreadsheets. These change when collaborators save an update or users submit a form. Occasionally, one may wish to embed the contents of one’s Google Documents or Spreadsheets in a post or page to reflect the latest updates on one’s blog. This plugin seeks to provide this functionality without using an <iframe>. In addition, it caches contents of the Google Documents or Spreadsheets to speed up page loading.

Currently, the plugin can only access published documents, but can access both private and public spreadsheets.

Shortcode

After you have installed the plugin, go to the Write Page or Write Post form on your Wordpress blog and type the following where you want your document to appear:

[gdocs id='<doc-id>' type='document']

[gdocs st_id='<spreadsheet-id>' wt_id='<worksheet-id>' type='spreadsheet']

[gdocs st_id='<spreadsheet-id>' wt_id='<worksheet-id>' cell_id='<cell-id>' type='cell']

Replace <doc-id>, <spreadsheet-id>, and <worksheet-id> with the ID of the document or worksheet that you wish to embed. The ID’s are available at the plugin’s configuration page. Don’t forget to enclose them in quotes.

When embedding a single cell, specify the coordinates of the cell in the worksheet as RC<column number, such as R6C4 for the cell in the sixth row and fourth column of the worksheet.

Post Helper

As of v0.5, you may embed a document or spreadsheet by simply clicking on its link in the Google Documents/Spreadsheets panel at the bottom of the page. This may be the preferred method as it relieves you of the technical task of typing the shortcode. Just place your caret where you want your document to appear and click on the title of your chosen document in the panel. This works in both Visual and HTML modes.

If the list of documents and spreadsheets shown in the panel is outdated, just click on the refresh button located at the top left-hand corner of the panel and an updated list will be retrieved immediately.

HTML 5 Drag & Drop

v0.7 introduces a new drag and drop functionality based on HTML 5 specifications. If your browser has native support for HTML 5 drag and drop events (at the time of writing, only Firefox 3.5), you can drag the document/spreadsheet from the panel and drop it in the textarea where you want it to appear.

Javascript needs to be enabled for this to work.

Column Headings

v0.5 also introduced 2 optional attributes for spreadsheets, namely headings and style (style will be described in detail in a later section.) Due to technical reasons, all the column headings retrieved from Google Spreadsheets have their spaces removed and characters converted to the lowercase. Furthermore, if a column heading is left blank on the Google Spreadsheet, the Google API will replace it with a random string of characters.

As a workaround, the user may supply the plugin with a string of comma-separated headings that will be displayed in place of the headings retrieved from Google Spreadsheets. The replacement works from left to right i.e. if you provide only one heading and the spreadsheet has 3 columns, the heading of the leftmost column will be replaced.

CSS Styling for Spreadsheets

Selectors

All embedded worksheets are formatted as valid tables with the following structure:

<table>
    <thead>
        <tr><th>...</th></tr>
    </tbody>
    <tbody>
        <tr><td>...</td></tr>
    </tbody>
</table>

A typical table element has the following attributes:

<table id="gdocs_<spreadsheet-id>_<worksheet-id>" class="gdocs gdocs_<spreadsheet-id>">

A typical tr element has the following attributes:

<tr class="row_<x> <odd|even>">

A th element:

<th class="col_<x> <odd|even>">

Finally, a td element:

<td class="col_<x> <odd|even>">

Given the above markup, the following selectors are available:

All spreadsheets: table.gdocs
All worksheets of a particular spreadsheet: table.gdocs_<spreadsheet_id>
A particular worksheet: table#gdocs_<spreadsheet-id>_<worksheet-id>
A column: td.col_<x>
A row: tr.row_<x>
A cell: tr.row_<x> td.col_<y>
All odd rows: tr.odd
All even columns: td.even

Stylesheets

You may also define a new style class and specify it using the style attribute in the shortcode. Refer to the stylesheets in inline-google-docs/styles/ for examples.

For example, suppose you would like to define a new class named my-class for your tables. First, create a new CSS file in inline-google-docs/styles/ and name it my-class.css. Then, specify the class in your shortcode, as follows:

[gdocs st_id='...' wt_id='...' type='spreadsheet' style='my-class']

If you need to use images, create a new folder in inline-google-docs/styles and move my-class.css as well as all your images into this folder. Name this folder after your class.

Table Sorter

Inline Google Docs now includes tablesorter!

To use tablesorter without passing any parameters, set sort to true in your shortcode, as follows:

    [gdocs ... sort="true"]

To pass simple parameters to tablesorter, simply include them within braces in the sort attribute, as follows:

    [gdocs ... sort="{cancelSelection:false,...}"]

Certain characters, such as square brackets, will confuse the shortcode parser. If you have complex parameters, pass them through a Javascript variable, as follows:

    <script type='text/javascript'>
      var properties = {cancelSelection:false, sortList:[[1,1]]};
    </script>
    [gdocs type='spreadsheet' st_id='twRDk9_BEs9E6Jevb82ETvw' wt_id='od7' style='tablesorter' sort="properties" headings='A, B, C, D, E, F, G, H']

v0.8 also includes the default blue theme; set style to tablesorter to use it to style your tables.

Supported Browsers

This plugin has been tested on IE 7, IE 8, Chrome, Firefox 2, Firefox 3, Firefox 3.5, Opera 9, and Safari 3. If you are using another browser, please update this wiki if it works and post a new issue if it doesn’t.

Leave Feedback | Bug Report