Embedding Google Sheets in Ghost

This post is part of a larger collection, found here: Widgets for Ghost

Continuing with the stocks theme , the folks over at ATG Digital embed spreadsheets into their Ghost page. I did some custom work for them to allow those HTML embeds to be full-width on the page.

You don't need custom work for a basic Sheets embed. The big trick is to publish it, under File > Share > Publish to web. Then you grab the embed code and drop it in an HTML card. Here's an example:

That uses the basic embed code provided, shown below:

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRhALWVDhpOHB2nqkszvlfVtk9KPEKGoaAxEhWYoPwZg5QMQpzU-ZajaU6FIKt4jGtKZa58i0BQr1wo/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false&amp;chrome=false"></iframe>

As you'll see in the demo embed above, the height isn't really quite right. So we can edit that. The documentation is helpful. I also set the height, because I didn't want it to scroll.

But what if the content is wide?

Well, that's ugly. But no problem, we can fix it! (At least, for users with wider screens - phone users are going to scroll regardless of what we do.)
Note that the solution below assumes a gridded theme with wide-start and wide-end defined. Custom themes may need a different solution.

<div class="iframe-wide">
  <iframe height="300" 
  src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRhALWVDhpOHB2nqkszvlfVtk9KPEKGoaAxEhWYoPwZg5QMQpzU-ZajaU6FIKt4jGtKZa58i0BQr1wo/pubhtml?gid=2035803981&amp;single=true&amp;widget=false&amp;headers=false&amp;chrome=false">
  </iframe>
  </div>

<style>
/* this could go into your theme's css styles instead of here if you're going 
to use it regularly!*/

  .iframe-wide {
    display: flex;
    grid-column: wide-start/wide-end;
    justify-content: center;
    
  }
</style>

If you want your wide-but-not-too-wide sheet to be centered, you can try this additional style:

.iframe-wide iframe {
    max-width: 100%;
    width: 1035px; /*This value will be determined by the width of the sheet - it's fussy*/ 
    display: unset;
}

I really want the fit-content CSS setting to work on iframes, but it just doesn't.

Hey, before you go... If your finances allow you to keep this tea-drinking ghost and the freelancer behind her supplied with our hot beverage of choice, we'd both appreciate it!

Buy me a tea ☕️