Using Thickbox with an Embedded PDF

This weekend, I finally worked out a solution to embed a PDF file into a Thickbox. This was challenging because cross-browser support for the Adobe Acrobat Reader format is iffy at best, and Thickbox' iFrame is really designed to open web pages.



To solve these issues, I decided to use a solution that's recently become available. Here's a link to the thickbox embedded PDF samples.

1. For the PDF embedding problem, I'm using Adobe's Acrobat.com site. This site is free to sign up for, adds no extraneous advertising to your embed code, and is fairly simple in its implementation. Note: [i] The site has an available "link to..." option, but I found that, coupled with the parameter requirements for Thickbox, this wasn't a viable solution, as the link you had to pass through Thickbox had to be untampered with extra variable, as Thickbox requires to work.[/i]
   
   
2. I use PHP to code. Essentially what I've done is created a form that you paste your embed code into, along with an alt text input and a caption input. These variables and a category (for organization) and auto-increment IDs are stored on the MySQL server. Before you pass the embed code through, you'll want to run it through urlencode(). If you don't do this, the code will drop out when you try to pass it through the URL as a variable, because there are # characters in it. Here's what it looks like, and below is the code behind it:
   
   
   <p>Proceed with these steps in order:</p>
   <form action="<?php echo $_SERVER['PHP_SELF'] . '?page=work'; ?>" method="post">
       <ol>
           <li><p>Go to <a href="https://share.acrobat.com/adc/adc.do?app=share" target="_blank">this site</a> and log in with the username ### and the password ###.<br />
           <li><p>Click on the Upload tab at the top and browse your computer for the PDF file you would like to upload and click the upload button.
           <li><p>You should see a list of all the files you've uploaded. Look for the one you just uploaded and roll your mouse over it. It will highlight with a small arrow next to it. Click the arrow and from the following dropdown, click on 'Copy Embed Code'
           <li><p>Click on the box below and paste into it (ctrl/cmd+v):<br />
           <textarea name="embedcode" rows=10 cols=50></textarea></label><br />
           <li><p>Type in a brief title for the document. This will end up being the link on the page:<br />
           <input type="text" name="title" style="width:300px;"/><br />
           <li><p>Add a brief caption to explain the work or give a little more background on it. You may leave this field blank, if you wish:<br />
           <input type="text" name="caption" style="width:500px;"/><br />
       </ol>
           <input type="hidden" name="category" value="<? echo $_POST['category'] ?>" />
           <input type="hidden" name="samplesubmit" value="1" />
           <input type="hidden" name="cmd" value="add" />
           <input type="submit" value="Click here to submit when you're done"><br /><br />
       </form>
       <form action="post.php?page=work" method="post">
           <input type="submit" value="Cancel" />
       </form>
   
   
   
   
3. The embed code that the user gets from the Adobe site comes preloaded with the default dimensions of width=365 and height=500. I used str_replace to change these to 800x1200 automatically. You can use your favorite string parser to do the same, or expressions, if that's your thing, but I haven't come across an instance where the Flash viewer uses any other dimensions but those 365x500. My PHP looks like this:
   
   
   $embedcode = $_POST['embedcode'];
   $embedcode = str_replace('width="365"', 'width="800"', $embedcode);
   $embedcode = str_replace('height="500"', 'height="1236"', $embedcode);
   $embedcode = urlencode($embedcode);
   $title = mysql_real_escape_string($_POST['title']);
   $caption = mysql_real_escape_string($_POST['caption']);
   $category = $_POST['category'];
   
   //code here to send to database
   
   
   
   
4. The code that PHP runs to output the link to the page looks like this:
   
   
   $urlstring = "<a href=pdfViewer.php?keepThis=true&tb_Iframe=true&height=600&width=800&embedded=" . $embedcode . " title='" . $caption . "' class='thickbox'>" . $title . "</a>";
   
   
   
   The file pdfViewer is stored locally on the website (we'll come back to that soon). The $embedcode variable stores the urlencode()'ed code, the $caption variable stores the caption and the $title variable stores the alt text. What this code does is opens our default viewer in the Thickbox and passes through the embed code as a variable.
   
   
5. When a user clicks on this link, the information is passed to the pdfViewer.php page, which looks essentially like this:
   
   
   <? $embeddedsource = urldecode($_GET['embedded']);
   echo $embeddedsource;?>
   
   
   
   All this is doing is taking the embed code out of the URL, decoding it, and then displaying it. It's that simple, and really, this bit of code is almost all your pdfViewer.php page needs.
   

Obviously, these instructions aren't for super-beginners, and there are definitely shortcomings to this process. For one, your user has to go to another site to upload documents, which is never ideal (I'm currently looking at the API to see if there's a way to do it from the user's CMS), and for another, it uses Flash, which is not a super-compatible format. But it seems to work quite well for PDF files, and I'm willing to bet on the availability of Flash over the unreliability of embedded Acrobat any day.

If you have any questions about this process, please don't hesitate to e-mail me.