How to embed Google Docs into HTML pages or blog post

The easiest way to embed Google Docs in any HTML page or blog post is using iframe.

Every Google Docs files are assigned with unique URL as an identifier. So we’ll need this unique identifier in order to embed it to any HTML pages.

1. Get the unique URL. Open any Google Docs file. To get the URL, you have to publish the files to public. From the top right of that page, click on ‘Share‘ -> ‘Publish As Web Page‘. New page will be opened. Click on the ‘Publish Document’ button. You’ll see the message saying the document has been published such as below.

Your document is publicly viewable at:
http://docs.google.com/Doc?id=dcrwnphc_255dc6vhnf6

2. We’ll use iframe in order to embed the URL above. This iframe code is taken from Google blog.  Copy URL above and replace the red font color code below. You can set the parameters such as width, length and frame border to suit your page. Learn more about iframe.

<iframe src=”http://spreadsheets.google.com/lv?key=pDDaecJdkAYQ1Lb5HTswLBA&amp;type=view&amp;gid=0&amp;colid0=1&amp;filterstr0=Associate&amp;sortcolid=-1&amp;sortasc=true&amp;rowsperpage=5″ width=”500″ frameborder=”0″ height=”330″></iframe>

3. Finally copy and paste this code to any HTML page or into your blog(HTML) mode. Read how to embed iframe code in this post. You should see the Google Docs document now.

How to embed iframe code in wordpress

I encountered this problem when I wanted to embed Google Presentation in WordPress post. So as usual, in writing post screen, I switch to ‘HTML’ mode, paste the code and go back to ‘Visual’ mode. Surprisingly nothing showed up, so I switched back to ‘HTML’ mode, and found out that the embedded code is no longer there. Tried couple of times but with no luck.

I headed to WordPress forum, and moments later found what the problem is. This is a known issue in WordPress 2.5 and above. Whenever ‘iframe‘ code is copied to the post on the ‘html’ mode and when you switch back to ‘Visual’ mode, the code will be gone. The milestone for this bug to get fixed is on 2.9.

The workaround is, once you had put the code there, don’t move back to ‘Visual’ mode. Directly save or publish the post, and the embedded code is viewable. So whenever you want to use ‘iframe’ code in your post, make sure you have finished writing your post, and embedding this code should be the last step before you publish the post.

Alternatively, you can also stay in HTML code whenever you edit the post. Enjoy the slide!