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 to embed Google Docs in any HTML page or blog post. 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 and LEAVE A COMMENT if you like . You should see the Google Docs document now.

to embed Google Docs in any HTML page or blog post