Add Google Sheets Content to Squarespace
If you follow this blog, you know that I am a huge fan of Google Sheets and other Google Drive apps; however, the challenges that I have faced are: 1) how can users find Google Drive content that I have publicly shared, and 2) how do I get credit for that content?
For Google Sheets that I publicly shared, I used to go through a convoluted exercise of submitting those sheets for Google Search indexing via http://www.google.com/addurl/?continue=/addurl. However, Google has decommissioned that tactic, which is probably for the best because that approach had several drawbacks anyway.
Now, I am adding Google Sheets content directly to my site so that when Google Search crawls my site, the "Sultan of Search" will index my Google Sheets content too.
If you are running a plain old webserver, uploading Google Sheets content is easy; however, if you are using a Content Management System like Squarespace, things get complicated. Here are the steps that I took to include Google Sheets content in my Squarespace pages:
Export HTML
From Google Sheets, select File > Download as > Web page (.html, zipped).
Modify Sheet.css
Open resources/sheet.css that you downloaded as part of the previous step, and remove all references to overflow:hidden & overflow-y:hidden. Save the file as sheet-no-overflow.css.
"Overflow hidden" prohibits the browser from scrolling. I am not sure which "overflow hidden" reference was prohibiting my page from scrolling, so I removed all references.
Upload CSS File
Part1
You have to use a roundabout way to upload your css file to Squarespace. Create some temporary dummy text, hyperlink it, and follow the next step.
Upload CSS File
Part 2
Click on Files > Add a file, and then select your sheet-no-overflow.css.
Upload CSS File
Part 3
This window is a bit confusing. Once you get here your file is already uploaded, so just click off the window, and remove your temporary dummy text.
CSS Path in HTML
Squarespace saves uploaded files in the "/s" dir, so in a text editor, open the exported HTML from the first step, and modify the css path to use an absolute path of "/s/{your-css-filename}.css".
Code Block
Add a code block. Then copy & paste the previous step's modified html into the code block.
User Experience
You're done! Well, almost. While this approach is functional, it's not exactly the best user experience, so I add a link to the original Google Sheet.
