Friday, October 14, 2016

EMBED FROM DRIVE TO BLOG

Embedding a file should be an easy thing to do...right?

It is but there is some voodoo you need to do when trying to embed into a blog (like this one!).

First, makes sure the file you want to embed is "embeddable" (a new word I just created!) If you're not sure, ask yourself if you can:

  1. open the file in Google Docs, Sheets, or Slides?
  2. from the File menu, select "Publish to the Web"?
  3. see a tab called "Embed" when you publish to the web?
  4. and finally, SELECT and COPY the embed code?
    The embed code will look something like this:
    <iframe src="LotsOfLettersAndNumbers"></iframe>

If you can do all that, you can embed a file from Google Drive to Blogger!

Do all the steps above (I'm not repeating them) then open your Blog to the post you want the embed to appear OR create a new post.
  1. Type some text on the first few lines (you'll want some space).
  2. Select the HTML button next to COMPOSE from your formatting toolbar.
  3. PASTE the embed code then select the COMPOSE button.
Voila! The document is embedded!
And it probably extends off the blog, right?
YIKES! That's not good!
So what do you do? You're going to have to tweak the code! This is an important part of the voodoo you need to do.

There is a document below that is embedded. At first it extended beyond the blogpost area - it was too wide. The embed code needed a width constraint added:<iframe src="lotsOfLettersAndNumbers" width="800"></iframe>

That width constraint fences a document into a corral that is 800 pixels wide - an old standard web page size. Percentages can be used as well (width ="50%") but that can get messy. You will have to play with the number or percentage to get the file to appear on the blog correctly.

The embed below finally fit at width="600"

A height constraint was also used just to see if it would work - it did.

The embed code for the document below looks like this:
<iframe height="500" src="https://docs.google.com/document/d/1XnjhWGnX5pNBTRllk9TyKO2zHBFJHWpicGTpBWPpQiQ/pub?embedded=true" width="600"></iframe>



Points to Ponder:

  • If the file extends past the blog border, tighten the fence (width and height contraints).
  • Manual contraints can be used in a Doc to make text "fit." The third line of the embedded file above has a soft carriage return to force the text to fit within the 600 width.
  • The height (aka length) will have a scroll bar if you have set a height shorter than the actual file length.

Easy!