BB Code Enhancements - BBCode - Embed Google Documents Collection (BB Code)

Embed Various Google Docs

Live Demo: Here

Google Docs is a free service by Google. Google Docs are a professional collection of "Office" applications like a Word Processor, Spreadsheet, Presentation Designer, and Drawing tool. Google Docs is a serious alternative to the very expensive Microsoft Office. Documents are stored online, can be shared among users, and in the case of this BB Code they can be embedded in other web pages.

There are several BB Codes in this collection, Google Doc (Document), Google Spreadsheet and Google Presentation. Google Drawings can be embedded using the standard [img] tags but I will give an example here anyway.

You may get a warning message saying the {param}s aren't enclosed in quotes. You can hit "continue" to ignore this error. As you can see in the code there are eventually double-quotes.

When working on any Google Document in the top right of the window will be a "Share" button with drop-down arrow. Click on this arrow and choose "Publish to Web" or "Publish / Embed" and you will be given code to link to and/or embed the document. You will be given a URL such as:
https://docs.google.com/document/pub?id=1bhtK-AhiXqfWK5bGJcULvEO3zMahcFgnJEsT1YvYsuc

What you need is the document ID which is the long string of characters after "id=" or "key=" and before the ampersand (&) if present, in this case your id is:
1bhtK-AhiXqfWK5bGJcULvEO3zMahcFgnJEsT1YvYsuc

In all cases you put the ID between the appropriate tag for the type of document.

Google Document (Word Processor Document)
[gd]1bhtK-AhiXqfWK5bGJcULvEO3zMahcFgnJEsT1YvYsuc[/gd]

Google Spreadsheet
[gs]0AmOHO6Cm8vvAdFR2b0dMMnVwMUE0MlpXYnowWnowWWc[/gs]

Google Presentation
[gp]dcjktv94_1fcpptwqc[/gp]

Google Drawing
No special BB Code is needed to embed a drawing because it's rendered as any other image. Just put the URL given between IMG tags...
[IMG]https://docs.google.com/drawings/pub?id=1C1arwoUzUyzxnzk9yD7ysx6vyMfcDuDXXzQTqnngh2 c&w=640&h=480[/IMG]

To add one or more of these BB Codes follow any of the below instructions:

Add a New BB Code

Title: Google Document
BB Code Tag Name: gd
Replacement:

<div align="center"><iframe src="https://docs.google.com/document/pub?id={param}&amp;embedded=true&gid=0&output=html&widget=true" width="95%" height="500">IFRAME Not Available. <a href="https://{option}.google.com/document/pub?id={param}">Direct Link to Google Document</a>.</iframe></div>

Example:[gd]1bhtK-AhiXqfWK5bGJcULvEO3zMahcFgnJEsT1YvYsuc[/gd]
Description: Embed a Google Document.
Use Option: No
Button Image: (optional)
Remove Tag If Empty: Yes
All Disable Options: Yes

------

Add a New BB Code

Title: Google Spreadsheet
BB Code Tag Name: gs
Replacement:

<div align="center"><iframe width='95%' height='500' frameborder='0' src='https://spreadsheets.google.com/pub?key={param}&hl=en&single=true&gid=0&output=html&widget=true'>IFRAME Not Available. <a href="https://spreadsheets.google.com/pub?key={param}&hl=en&single=true&gid=0&output=html">Direct Link to Spreadsheet.</a></iframe></div>

Example: [gs]0AmOHO6Cm8vvAdFR2b0dMMnVwMUE0MlpXYnowWnowWWc[/gs]
Description: Embed a Google Spreadsheet.
Use Option: No
Button Image: (optional)
Remove Tag If Empty: Yes
All Disable Options: Yes

------

Add a New BB Code

Title: Google Presentation
BB Code Tag Name: gp
Replacement:

<div align="center"><iframe src="https://docs.google.com/present/embed?id={param}" frameborder="0" width="700" height="559">IFRAME Not Available. <a href="https://docs.google.com/present/view?id={param}">Direct Link to Presentation.</a></iframe></div>

Example:[gp]dcjktv94_1fcpptwqc[/gp]
Description: Embed a Google Presentation.
Use Option: No
Button Image: (optional)
Remove Tag If Empty: Yes
All Disable Options: Yes

------

In any of the above codes you can edit the height and width attributes to suit your needs.

------

------------------------------------------------------

Please "Mark as Installed" if you use this.
Donations always appreciated. :up:
Nominate MOTM if you LOVE it!

Check My Profile for other BB Code enhancements. They work on all versions.

Download the .txt file for a copy of the Install instructions.

Screenshots Attached:

[BirdOPrey5]

Resolved the above- it was a browser issuer.

[Chivster]

I keep getting an error to it saying that the key is incorrect.
I followed the guidelines, can anyone help me out ?

[BirdOPrey5]

Can you pste a key and document type here? Like spreadsheet 3ff456d75g5ge3wsdghjh?

[MarineColorado]

so it loads up for me fine with the code but it keeps telling me sorry the file you requested is unavailable. Any thoughts?

[MarineColorado]

edited NM i hade the code wrong I changed a ' to " originally before html in the code. I changed it back to a ' and it works great!!! Thank you for the mod

[kylek]

It looks like the share code for google spreadsheets has changed now. Trying to use it again but it just shows blank.

Looking at a link last month and the new share link the ccc?key= is now /d/

Last month link:

https://docs.google.com/spreadsheet/...UE&usp=sharing

Latest link:

https://docs.google.com/spreadsheets...it?usp=sharing

[XSV_4ce]

I am also getting a blank page. Your sample code works perfect. here is what I am using.

 [gs]1QEWFbs0iRPHNZaMuoKnzO_zv6if2Rudt8Zx8AtgbPzI[/gs]

Just blank frame.

[kylek]

Just surfing on google and found this: https://support.google.com/drive/answer/3541068

"Starting in March and April 2014, Google Sheets users creating new spreadsheets will be automatically directed to the new Sheets. All previously created spreadsheets will remain in the older version of Sheets for now. If you need to create a spreadsheet using the old Sheets, you can do so at g.co/oldsheets"

[whodah]

Oops - just noticed you had this mod in the 4.x area. Pretty cool, thx! Like some users above, , I removed the "single=true" portion of the GS tag so that users could click multiple sheets.

Any hints on how to do a google chart? I see the publish code on a chart is a bit different than the docs/spreadsheets.

Thx!

[DemOnstar]

Google docs also has a PDF viewer.
How do we get this to display? Do we click share and take the link, change who has access to 'public on the web'?

Sorry, new to google docs but I have some PDF's that may well prove useful.

Ta...