{"id":627,"date":"2014-04-30T09:06:38","date_gmt":"2014-04-30T13:06:38","guid":{"rendered":"http:\/\/www.benschersten.com\/blog\/?p=627"},"modified":"2014-04-30T09:06:38","modified_gmt":"2014-04-30T13:06:38","slug":"embedding-a-pdf-from-drive-into-a-blog","status":"publish","type":"post","link":"https:\/\/www.benschersten.com\/blog\/2014\/04\/embedding-a-pdf-from-drive-into-a-blog\/","title":{"rendered":"Embedding a PDF From Drive into a Blog"},"content":{"rendered":"<p>Embedding PDFs in a blog can be a great way to share information, especially with parents and the community. These days Google Drive makes this\u00a0easy: when you&#8217;re viewing a PDF you can easily get the embed code and drop it into you blog. But, the code includes a preview pane and no options for zooming, so it&#8217;s not idea. The default Google Drive PDF embed code\u00a0ends up creating\u00a0this:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/docs.google.com\/a\/bpsk12.org\/file\/d\/0B3xoQi_oa7_hU2J5S1RQbFdqS3c\/preview\" width=\"640\" height=\"480\"><\/iframe><\/p>\n<p>Getting the embed code is easy, but the result is in no way\u00a0ideal. In fact you&#8217;ll notice that <em>most<\/em> of the first page of the PDF you can&#8217;t even see. Fortunately, there&#8217;s a better way. It take a little code (really, just a little), but it&#8217;s very doable.<\/p>\n<p>The embed code Drive gives you looks like this (it&#8217;s what I used above):<\/p>\n<p style=\"padding-left: 30px;\"><code>&lt;iframe src=\"https:\/\/docs.google.com\/a\/bpsk12.org\/file\/d\/0B3xoQi_oa7_hU2J5S1RQbFdqS3c\/preview\" width=\"580\" height=\"480\"&gt;&lt;\/iframe&gt;<\/code><\/p>\n<p>What we need to do though, is to use this code instead (it&#8217;s way better, for lots of reasons):<\/p>\n<p style=\"padding-left: 30px;\"><code>&lt;iframe src=\"https:\/\/docs.google.com\/viewer?srcid<a href=\"https:\/\/docs.google.com\/viewer?srcid=\" target=\"_blank\">=<\/a>[put your file id here]&amp;pid=explorer&amp;efh=false&amp;<wbr \/>a=v&amp;chrome=false&amp;embedded=<wbr \/>true\" width=\"580px\" height=\"480px\"&gt;&lt;\/iframe&gt;<\/code><\/p>\n<p>I know, the code\u00a0looks a little intimidating, but most if it we can ignore.<\/p>\n<p>There are only three things in the code\u00a0we need to worry about:<\/p>\n<ol>\n<li>The file id.<\/li>\n<li>The height of the frame.<\/li>\n<li>The width of the frame.<\/li>\n<\/ol>\n<p>The file ID for your PDF (one that is already in Google Drive) can be found in the PDFs web address. When you open a PDF, it&#8217;s the garbage-looking piece of the URL (it will be between forward-slashes, &#8220;\/&#8221;).<\/p>\n<div id=\"attachment_653\" style=\"width: 908px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.benschersten.com\/blog\/wp-content\/uploads\/2014\/04\/Screen_Shot_2014-04-30_at_8_29_17_AM.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-653\" class=\"wp-image-653 size-full\" src=\"http:\/\/www.benschersten.com\/blog\/wp-content\/uploads\/2014\/04\/Screen_Shot_2014-04-30_at_8_29_17_AM.jpg\" alt=\"The file ID is highlighted in yellow.\" width=\"898\" height=\"130\" srcset=\"https:\/\/www.benschersten.com\/blog\/wp-content\/uploads\/2014\/04\/Screen_Shot_2014-04-30_at_8_29_17_AM.jpg 898w, https:\/\/www.benschersten.com\/blog\/wp-content\/uploads\/2014\/04\/Screen_Shot_2014-04-30_at_8_29_17_AM-300x43.jpg 300w, https:\/\/www.benschersten.com\/blog\/wp-content\/uploads\/2014\/04\/Screen_Shot_2014-04-30_at_8_29_17_AM-500x72.jpg 500w\" sizes=\"auto, (max-width: 898px) 100vw, 898px\" \/><\/a><p id=\"caption-attachment-653\" class=\"wp-caption-text\">The file ID is highlighted in yellow.<\/p><\/div>\n<p>In this case it&#8217;s the\u00a0<code>0B3xoQi_oa7_hU2J5S1RQbFdqS3c<\/code><\/p>\n<p>That id will need to be placed into the code in place of the &#8220;[insert your file id here]&#8221;. Make sure to get rid of the square brackets in the sample code.<\/p>\n<p>Height and width are exactly that, height and width. You can change these numbers (they&#8217;re measured in pixels) to change the size of the frame that you&#8217;re PDF is enclosed in.<\/p>\n<p>And what does it look like? If we take this code (notice that I&#8217;ve inserted my file ID)<\/p>\n<p style=\"padding-left: 30px;\"><code>&lt;iframe src=\"https:\/\/docs.google.com\/viewer?srcid=0B3xoQi_oa7_hU2J5S1RQbFdqS3c&amp;pid=explorer&amp;efh=false&amp;a=v&amp;chrome=false&amp;embedded=true\" width=\"580px\" height=\"480px\"&gt;&lt;\/iframe&gt;<\/code><\/p>\n<p>and put it into a\u00a0blog\u00a0(remember, when you&#8217;re embedding html code you have to use the HTML window\u00a0of the editor, not the Compose window), you get this:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/docs.google.com\/viewer?srcid=0B3xoQi_oa7_hU2J5S1RQbFdqS3c&amp;pid=explorer&amp;efh=false&amp;a=v&amp;chrome=false&amp;embedded=true\" width=\"580px\" height=\"480px\"><\/iframe><\/p>\n<p>This is so much better. It zooms out so that the PDF is displayed page-width. There&#8217;s no preview pane. You can scroll down if there are multiple pages. There are zoom options if you want to zoom in. All the things we want when we embed a PDF.<\/p>\n<p>A little code, and all the sudden that PDF\u00a0becomes so much more user-friendly. <em>But don&#8217;t forget, in Drive if you&#8217;re embedding\u00a0a PDF you need to make the file public first, otherwise it won&#8217;t embed correctly.\u00a0<\/em><\/p>\n<p><small>Note: I didn&#8217;t put this code together myself. I found it on a Google forum post <a href=\"https:\/\/productforums.google.com\/forum\/#!topic\/docs\/pk1KvDTNgd4\">here<\/a>, from 2013, from user\u00a0Yajeng.<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Embedding PDFs in a blog can be a great way to share information, especially with parents and the community. These days Google Drive makes this\u00a0easy: when you&#8217;re viewing a PDF you can easily get the embed code and drop it &hellip; <a href=\"https:\/\/www.benschersten.com\/blog\/2014\/04\/embedding-a-pdf-from-drive-into-a-blog\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":[],"rop_publish_now_history":[],"rop_publish_now_status":"pending","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[14,6,8,15],"tags":[],"class_list":["post-627","post","type-post","status-publish","format-standard","hentry","category-bpschat","category-edchat","category-edtech","category-ettipad"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2B5HK-a7","_links":{"self":[{"href":"https:\/\/www.benschersten.com\/blog\/wp-json\/wp\/v2\/posts\/627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.benschersten.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.benschersten.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.benschersten.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.benschersten.com\/blog\/wp-json\/wp\/v2\/comments?post=627"}],"version-history":[{"count":13,"href":"https:\/\/www.benschersten.com\/blog\/wp-json\/wp\/v2\/posts\/627\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/www.benschersten.com\/blog\/wp-json\/wp\/v2\/posts\/627\/revisions\/655"}],"wp:attachment":[{"href":"https:\/\/www.benschersten.com\/blog\/wp-json\/wp\/v2\/media?parent=627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.benschersten.com\/blog\/wp-json\/wp\/v2\/categories?post=627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.benschersten.com\/blog\/wp-json\/wp\/v2\/tags?post=627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}