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:

[willie53]

I do agree there if you are not comfortable altering the database then leave it alone this is why i always use one of my my testing sites on my laptop before i put anything on my live site also i backup the database beforehand.

[IggyP]

Originally Posted by Grimholtt

Can anyone assist with this? After the changes were made by Google, I use the /d/ now and it loads the spreadsheet just fine, but now instead of just the cells appearing, I get the entire Spreadsheet including the Tools at the top.

For example:

I'm looking to see just this:



What I'm actually seeing:



Any way to clean this up that anyone knows about?

i am curious of this too....the extra header can be a security concern would be nice to hide it....also it now added a chat as well, which we dont really want....i tried hiding them by css, even tho its loading the main sheet from google, but fail...not sure what else to even try...

also have got errors loading spreadsheets like this:

GET filesystem:htt ps://docs.google.c om/persistent/docs/fonts/cCwcoZCh95jEfkePtzfl9_k_vArhqVIZ0nv9q090hN8.woff2 net::ERR_FILE_NOT_FOUND

Refused to display 'htt ps://docs.google.c om/sharing/init?id=14pmOx9znK02UTHeY7BdQKe792MML1f81CtO7I4DAn fM&foreignService=ritz&gaiaService=wise&shareServi ce=ritz&subapp=10&popupWindowsEnabled=true&shareUi Type=default&hl=en&authuser=0&rand=1504167017294' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

GET ht tps://docs.google.c om/sharing/init?id=14pmOx9znK02UTHeY7BdQKe792MML1f81CtO7I4DAn fM&foreignService=ritz&gaiaService=wise&shareServi ce=ritz&subapp=10&popupWindowsEnabled=true&shareUi Type=default&hl=en&authuser=0&rand=1504167017294[/url] net::ERR_BLOCKED_BY_RESPONSE

be nice to clean it up and secure it a little better but seems to basically work..vb4.2.5 php 5.6


oh and btw, that is result by using this replacement code which is the one that seemed to work for me

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

[Kane@airrifle]

Add

headers=false

to your bbcode remove the toolbars.

Eg:

<div align="center"><iframe width='95%' height='600' frameborder='0' src="https://docs.google.com/spreadsheets/d/{param}/pubhtml?widget=true&amp;headers=false"></iframe></div>

[IggyP]

Originally Posted by Kane@airrifle

Add

headers=false

to your bbcode remove the toolbars.

Eg:

<div align="center"><iframe width='95%' height='600' frameborder='0' src="https://docs.google.com/spreadsheets/d/{param}/pubhtml?widget=true&amp;headers=false"></iframe></div>

that works perfectly thank you....i tried the same however for the google docs and didnt seem to work..is it slightly different there? i know that first part at least is the same with the updated "htt ps://docs.google.co m/document/d/{param}" format but the after part i tried matching your ss code then a few other ways and still failed..

[Kane@airrifle]

Originally Posted by IggyP

that works perfectly thank you....i tried the same however for the google docs and didnt seem to work..is it slightly different there? i know that first part at least is the same with the updated "htt ps://docs.google.co m/document/d/{param}" format but the after part i tried matching your ss code then a few other ways and still failed..

Try this for a Google Doc.

<div align="center"><iframe width='95%' height='600' frameborder='0' src="https://docs.google.com/document/d/e/{param}/pub?embedded=true"></iframe></div>

[IggyP]

works if you take the /e out thanks

[BirdOPrey5]

Someone PMed me this question-

Hi BOP5...

This mod seems to work beautifully to embed Google Docs spreadsheets on my vB4 test forum, as long as I'm on something with a large screen. When I view an embedded sheet on the vB mobile style on a small device, the rendering seems all compressed. On my S7 phone it displays only the cells containing text (in this case, the first 4 rows) and the sheet's footer bar is strangely right across the middle of them. Have you seen this before? Do you know of an easy fix?

...
Thanks in advance!

There was a screenshot.

Unfortunately I do not know of any fix. It was never intended for mobile devices, sorry.

If anyone finds a mobile friendly bbcode feel free to release it here or as your own mod, no permission needed.

[edgeless]

Originally Posted by BirdOPrey5

Unfortunately I do not know of any fix. It was never intended for mobile devices, sorry.

Thanks for taking the time to respond, BOP.

All I know is the problem seems to stem from something vB's default directives are controlling. This seems so because I can alter the replacement code parameters in a multitude of ways but the footer bar & tab across the content area issue persists no matter what changes I make. I should also note that it's the 'height' aspect that's compressed and frozen when a sheet is viewed on a narrow, mobile screen. That results in the footer bar and the sheet tab perpetually obstructing the sheet's content. They remain there even when using Google's own generated embedment code, and even with the widget directive set to false (which should toggle off the sheet tab that appears on the overlapping footer bar). Also, when the mobile style is viewed on a larger screen, all aspects become rendered correctly (i.e., the footer bar, the sheet tab, etc. are each in place). So it seems vB is restricting the height of the display area for embedded documents on the mobile style. As such, if I could learn how to get my vB4 to allow mobile style height flexibility I'm guessing it would fix the problem. Someone smarter then I would have to determine how that might be done, though.

Edit: Just some further information. The scope of this problem is somewhat different from my initial assumption. I've tested the issue on two Samsung mobile devices. As it turns out, when in vB full desktop version mode the iframed sheets display in the identically compressed and distorted state that I'm seeing in vB mobile mode. Oh, and the issue is browser independent as well... at least among the three mobile browser versions I have tested (i.e., Google Chrome, Firefox, and the browser that comes pre-loaded on Samsung devices). So to summarize, the iframed Google sheets simply will not render properly on these mobile devices - through iframes on vBulletin forum sites at least. But they render amazingly well with full synch'ing/linking control and visibility on my desktop and laptop computers. They even present quite well in vB mobile mode on those computers. Therefore, the screen dimensions on my phone are obviously not the issue. I can't imagine what it would take to get this working on these phones.

Edit2: I've been able to get it to display on my mobile device without the obstructive sheet tab bar blocking the sheet's content on the phones. However, sheet cells are not editable under the required configuration. It is thus exclusive to displaying the sheet's data. So for editing the sheets, I've employed a workaround by adding another bbcode item that can quickly and easily be toggled and saved through a post edit, then switched back to the frozen data display mode using the original bbcode tags, allowing the data to again be seen on mobile devices. I can also add some buttons to the editor, making it even a bit more convenient.

[Hostboard]

I have not been able to get this to work with the original code nor the code provided by others. Does anyone have this working or know how to? The Google Docs is my primary need.

[lange]

Try this:

File/Publish to the web/Embed
<iframe src="https://docs.google.com/document/d/e/2PACX-1vSP991tBybGIo8Y8EsLbsRi2QUmuugQC85slx153HELeU_0qgy4V0a9PB1zJ08_TBDuz51_32ESLUhH/pub?embedded=true"></iframe></div>
Google Docs
gd
Replacement: <div align="center"><iframe src="https://docs.google.com/document/d/e/{param}/pub?embedded=true"></iframe></div>
Example:[gd]2PACX-1vSP991tBybGIo8Y8EsLbsRi2QUmuugQC85slx153HELeU_0qgy4V0a9PB1zJ08_TBDuz51_32ESLUhH[/gd]
Description: Embed a Google Document.
Use Option: No
Button Image: (optional)
Remove Tag If Empty: Yes
All Disable Options: Yes