PDF Widget on Acrobat.com
Many times I’ve seen a link to a PDF document and thought that maybe it contained the information I needed but I didn’t want to wait for the download, or worse yet… I wait for the download and then the file isn’t what I really wanted.
One of the cool new features of Acrobat.com (Adobe’s new free hosted services — currently in public beta) allows you to embed a widget directly in your HTML page (like I’ve done below) – to allow you to view the PDF content — inline — in the HTML page before deciding if you want to download it. For example, this file is now 10 MB after I attached the exercise files to the PDF document for convenience.
(Please note: you’ll need Adobe Flash Player installed to view this content)
How do you do this yourself?
- Login to Acrobat.com. If you don’t have an account yet, don’t worry. It’s free – and you just click Sign Up to get started.
- Upload the file you want to make available in your HTML page.
- Select Copy Embed Code from the details pod (Figure 1) or if you are looking at all of your files (figure 2)
just click on the arrow to the right of the file name and select Copy Embed Code from the dropdown.
Figure 1. Document is open Figure 2. Viewing all documents
- Place the copied link into your html page, similar to this example:
<html><title>Demonstration of using PDF Widget in a Web Page</title>
<body><p>The following is a preview of PDF content hosted on Acrobat.com</p>
<p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=9,0,115,0" width="365" height="500"> <param name="movie" value="https://share.acrobat.com/adc/flex/mpt.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent"/> <param name="allowFullScreen" value="true"/> <param name="flashvars" value="ext=pdf&docId=1826d5f7-ab86-4350-9590-d55c7a18f1c5"/> <embed src="https://share.acrobat.com/adc/flex/mpt.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="365" height="500" wmode="transparent" allowFullScreen="true" flashvars="ext=pdf&docId=1826d5f7-ab86-4350-9590-d55c7a18f1c5"> </embed> </object></p>
<p>Really cool, right?</p>
And my HTML page looks like this
Figure 3. HTML Example displayed in Safari browser.
Now I can flip through the file, and determine if it is indeed the information I wanted, and then select Download or Share from the menu, and I’m directed to Acrobat.com.
Notice here in Figure 4 that I’m prompted to download (vs. preview) due to the fact that here is additional functionality in this PDF supported on in Acrobat and Reader — that is basically the fact that I’ve attached the exercise files to the PDF document as an attachment.
Figure 4. Message appears when viewing in Adobe Acrobat or Adobe Reader delivers the best experience.