Add a shortcode for your PDF documents

 Why use the Google Documents engine to show PDF documents?

As you already know, in order to display properly a PDF document you need to have specific proprietary software (like Adobe Reader) installed on your computer. Besides that, the proprietary software doesn’t integrate in a native way with your browser to display PDF documents from the web, as a result, PDF documents on the web take a considerable time to be displayed into the client computer, and in some sad situations no even display at all.

All those issues could be fixed using the Google Documents engine to display our PDFs, with the Google Document engine the viewer for our PDF documents will be integrated natively in our browser; it is in that way because the Google Document engine uses only web-based technologies. Plus that, our documents will show quickly, because the documents are converted “on the fly” for the Google Documents engine to be shown as images.

How to use the Google Docs engine to show PDFs into our blog?.

To allow your blog’s PDFs to be shown using the Google Docs engine, open the functions.php file in your current theme directory and add the following code at the end of it:

<?php

/*
--------------------------------------------------
pdfviewer
--------------------------------------------------
Allow PDF documents to be shown using the Google
Documents engine.
--------------------------------------------------
*/

function pdfviewer($attributes, $text)
{

return '<a href="http://docs.google.com/viewer?url=' . $attributes['url'] . '">'.$text.'</a>';

}

add_shortcode('pdf', 'pdfviewer');

?>

The code converts the PDF URL provided to a properly formatted link that will open the document into the Google Docs engine.  

One final step:
The last thing to do is add some CSS for your Pdf class to make your PDF links look better. Here is the code that we used to make the PDF links in WpCity look like buttons:

/* PDF viewer link ------------------------------ */

a.pdf
{

color : #FFF;
border : 1px solid #2558A0;
padding : 5px 15px;
font-size : 16px;
background : #3175D5;
font-weight : bold;
text-shadow : 0px -1px 1px #2860AF;
text-decoration : none;
-moz-border-radius : 5px 5px 5px 5px;
-moz-box-shadow    : 0 3px 4px #cdcdcd;

}

a.pdf:hover
{
opacity     : 0.9;
color          : #fff!important;
text-decoration    : none;
}


Comments

Popular posts from this blog

Getting Started with python

5 harmless ways to kick spam out of your blog

Numbers in Python