I actually read about this little feature a while back…like almost a year or so ago. I thought it was a neat feature, I just really had no use for it.
Recently though, I wanted to embed a PDF into a webpage and remembered seeing this article from last year. I immediately went out to create a simple, useful function to be able to use this in WordPress.
After jacking with the code for a bit, I ran it by Shat who always helps fix up my code. He tweaked it, and stripped out extraneous code that I had to make it easier to use. Thus, Shat and I present the Google Document Viewer functions hack.
Add this to your functions.php file and you’re in business to use the Google Document Viewer shortcode to display a PDF, PPT, or a TIFF file inline.
Functions Code
/*
Title: Google Document Viewer in WordPress
Author: Travis Quinnelly & Justin Shattuck
AuthorURI: http://www.tquizzle.com
Usage: You can use this by adding this to your functions.php file in your WordPress theme directory and passing it variables.
1. path to document (.ppt, .pdf, .tiff) * Mandatory
2. iframe width in pixels
3. iframe height in pixels
4. any inline CSS styling elements you wish
*/
function google_doc_viewer($atts, $content = null) {
extract(shortcode_atts(array(
"width" => '600',
"height" => '800',
"path" => '',
"style" => ''
), $atts));
return '
<iframe style="'.$style.'" src="http://docs.google.com/viewer?url='.$path.'&embedded=true" frameborder="0" width="'.$width.'" height="'.$height.'"></iframe>';
}
add_shortcode("docview", "google_doc_viewer");
Usage
We’ve made it simple to use, just like all other shortcodes. And by simple, I mean simple! As you see above, the width, height, path, and style are all things to pass to the shortcode. The only one that’s obviously mandatory is the path. The function already sets some height/width settings and those are easily changed in your function. I like 600X800 so that’s what the default here is.
Simply type: [docview width=”yourvalue” height=”yourvalue” path=”pathtofile” style=”extrainlinestyle“]
Usage variables
- width = enter specific width you’d like if it differs from the default values
- height = enter specific height you’d like if it differs from the default values
- path = enter full url path to document to render *mandatory
- style = enter any extra inline styling you’d like added to the iframe html element
Example
Here’s an example of my code in use with “The Anatomy of a Large-Scale Hypertextual Web Search Engine” by the now infamous Sergey Brin and Lawrence Page.
Google Doing Right – Military Families Win
11 Essential WordPress Plugins for September 2011
Sweet! Glad to see an alternative to DocStoc for embedding documents in Web pages. Thanks for your work on this.
You are welcome sir! Glad someone’s getting some use out of my crazy ideas.
DUDE! I could and would use this… if only it wasn’t so ugly! What is the friggin deal with all the gnarly pixellation on all my pdf google docs, right? It is like windows xp is serving this up!
If google could antialias all this stuff (cuz It has to be their fault, right?), I would use it, but until then, there are plenty of flash pdf viewers – and of course…. scribd, which there is a wp plugin for, too.
I love google docs, well, the idea of it, rather… but google needs some ipad apps, and there should be a client app for it.
True, its not the most beautiful rendering of a pdf file. But hey, it does work like a charm.
I hate flash and tend to stay away from it like its the plague so that’s out for me…and as for scribd, well, its not for me either.
I like Google Docs and this was enough to suit my needs in under 9 lines of code.
I AM NOT ABLE TO DISPLAY THE FILE WHICH IS STORED IN MY WEBSITE ITSELF I USED THE CODE GIVEN BY YOU PLEASE HELP