How to embed Google Docs document into your page

Google has changed how Google Docs are exposed. As result method discussed in this article is no longer applicable. Please explore other options (ex: Google Sites). Thank you.

There are plenty of presentations, documents, and spreadsheets we may want to share with the world.

We can use homegrown document handling solutions, use commercial 3rd party solutions or… utilize power provided by Google Docs.

When storing articles on Google Docs you are provided with the option to share them with some people only or with everyone. I like to have option to link my articles from anywhere but I also like to have not just plain page, but a page embedded into my web-site pages.

What it means is that instead of external page, I want to put it in my own box.

There was time when it wasn’t as easy because of the additional code Google was injecting into articles, but time changed and now it is fairly easy and strait forward.

Goals

  • Embed Google Docs document into existing page
  • PHP. This is not really a requirement per se, it is just code below is PHP.
  • Retain copyright information

Solution

The following code snippet allows to get a desired result

// id parameter is used to pass Google Docs arcticle id
// Example: mydocview.php?id=nnnnnnnnnnnnnnnn
$id    = $_REQUEST['id'];
if ($id) {
  $started = "0";
  echo('<div class="googledocs" >Stored and managed via <a title="Learn more about Google Docs" href="http://docs.google.com" target="_blank">Google Docs &copy; -- Web word processing, presentations and spreadsheets.</a></div>');
  // Read document content, parse to normalize and output
  $file = fopen ("http://docs.google.com/View?id=" . $id, "r");
  while (!feof ($file)) {
    $line = fgets ($file, 4096);
    // Parse header info out
    if ($started == "0") {
      if (substr($line, 0, 5) == '<body') { $started = "1"; }
      else { continue; }
    }
    // Parse body content until document content block is detected
    if ($started == "1") {
      if (strstr($line, '<div id="doc-contents">')) { $started = "2"; }
      else { continue; }
    }
    // Output document content
    if ($started == "2") {
      // Stop processing, end of content reached
      if (strstr($line, '<div id="google-view-footer">')) { break; }
      // Normalize image links to keep link back to google docs
      $line = str_replace('src="File?id', 'src="http://docs.google.com/File?id', $line);
      // Normalize links to other articles
      $line = str_replace('href="View?docid=', 'href="/mydocview.php?id=', $line);
      $line = str_replace('href="View?id=', 'href="/mydocview.php?id=', $line);
      $line = str_replace('href="View?docID=', 'href="/mydocview.php?id=', $line);
      $line = str_replace('href="View?', 'href="/mydocview.php?', $line);
      // Output result
      echo($line);
    }
  }
  fclose($file);
}

Sample page:

<html>
<head></head>
<body>
<? // Include code above here
?>
</body>
</html>
This entry was posted in Web-design and tagged , . Bookmark the permalink.

24 thoughts on “How to embed Google Docs document into your page”

  1. Chinmay Patil says:

    Hey gyuz i want to try it out in asp.net. so can you suggest me how to do this in asp.net???

    1. I think this method is now obsolete. You need to use Google Sites.

Comments are closed.