There are many documents that are not readily converted into text or HTML. Legal documents are very good example of this, especially if they involve signatures. These are typically scanned and saved as PDF files, which can then be linked to on a web page.
But in some cases you want to embed such a document directly in a web page. For example you might have an article about a court case and you want the user to see the document directly, without leaving the page.
Scribd is a digital library that makes millions of books and documents available. Publishers and individuals can upload documents to Scribd and users can view and download them using a their viewer.
Of particular interest to us is the ability to embed their viewer within a web page. This tutorial produces a result that looks like this:
Step by Step
1: First locate your document on Scribd. In this example the document is the verdict in a legal dispute between Apple and Samsung. Many Scribd documents, like this one, are free but some require payment to access.
2: In the top right of the Scribd page click the Share button, followed by Embed.
3: In the Embed configuration window that comes up, you can select the size of the embedded document, whether to include recommendations of similar documents, etc. One very useful option allows the document to open at a specific page. If you wanted to show the user a particular section of a long document, you could use this to save them having to dig through the entire thing.
4: Next you copy and paste the Embed code into your web page, save and reload.
5: The user can explore the document in their browser, zoom in and out, and download it to their machine.
Understanding the Code
The code follows the style that we have seen with many embeddable widgets. An iframe loads the Scribd viewer with the desired content as its src. Preceding this in the block of HTML are a couple of links that allow you user to access the document on the Scribd site, as well as see all documents that have been uploaded by that Scribd account.
Code for this Tutorial
|1 :||tutorial_13_example_1.html||Live Demo 1|
Share this tutorial
20 : Embed a Github Gist (Basic)
Comment on this Tutorial
comments powered by Disqus