Embedding Exhibit/Timeline in Squarespace
Zaheer Ali
Squarespace Content Management System?
Their advanced package allows for inserting Javascript code in the
header, but I'm not sure how much to put in the header and what to put
in the body. (The header does not accept links so my json spreadsheet
feed code doesn't work there.) Also I'm not sure their software
recognizes the Div ex: lens coding either.
Here is the Exhibit/Timeline I'm trying to embed into my Squarespace
site: www.zaheerali.com/timeline
I suppose if there is no way to do it, I could always work on dressing
up that page, but any assistance anyone can offer would be much
appreciated. Thanks!
Zaheer Ali
Zaheer Ali
link to the googlespreadsheet JSON feed. Based on everything I read,
Exhibit seems to require that the link to the data be in the header,
however, when I put my link in the header I get this error:
Could not parse your site header code. Are you inserting invalid XML?
Error: Error on line 13 of document : The prefix "ex" for attribute
"ex:converter" associated with an element type "link" is not bound.
Nested exception: The prefix "ex" for attribute "ex:converter"
associated with an element type "link" is not bound.
This is the code format that I'm trying to insert (outer brackets
removed for posting purposes):
link rel="exhibit/data" type="application/jsonp" href="http://
spreadsheets.google.com/feeds/list/kdkdk/od6/public/basic?alt=json-in-
script" ex:converter="googleSpreadsheets"></link
The timeline seems to work when it's loading a plain JSON file, but
all my data is in a google spreadsheet, and when I've tried to export
it, the result doesn't seem to work.
Any suggestions as to a workaround?
David Karger
suggests that something in your pipeline is trying to recognize a
namespace---which would happen if the doc is being parsed as xml rather
than html.
Zaheer Ali
Timeline to function perfectly well as a stand alone webpage. I
recognize that it is a problem specific to Squarespace's architecture
which has some restrictions on the kind of scripting it allows, etc.
Specifically, placing that link command to retrieve the JSON data from
the converted Google spreadsheet is what is prompting the error in
their interface.
So with that being said, I am wondering if there is a work around.
That is:
1. Can the link command be placed somewhere other than the header?
2. Is there a way to convert the data on the Google spreadsheet into a
static JSON file that I can just upload? (I've tried a sample timeline
and it works with a static JSON file hosted on my own domain rather
than the external one from Google). Toward this end, I've tried
several conversion methods found online to convert the spreadsheet
into a JSON-formatted file and they are all coming out with syntax
errors as it seems the way my data was entered in the spreadsheet for
a JSON broadcast is somewhat different (in terms of use of braces and
quotes, etc.)
Thanks for your earlier response. Hopefully you can shed some
additional light on this.
David Karger
you're trying to jump deep into the exhibit processing pipeline.
1. to just preprocess the google spreadsheet into a normal json file
for exhibit, you can just make a static exhibit somewhere else that
loads the data from the spreadsheet, then use exhibit's data export
functionality (activated by clicking the orange scissors that appear
when you hover over the data in the page) to copy out the same data in
exhibit json format.
2. If you want to access the spreadsheet data "live", perhaps you
canput some javascript in your page that inserts the <link> tag exhibit
wants into the head _after_ you're CMS has finished parsing the head
(so it won't see and complain about the link) but _before_ executing
exhibit (which will happen if the script for your "link insertion"
javascript appears before the link to exhibit in the head of your page).
3. If for some reason your script link inserter has to run _after_ the
exhibit scripts are loaded, you can take advantage of exhibit's
autocreate option. There is an "autoCreate=false" option that tells
exhibit _not_ to run after its code has been loaded; if you set that
option in the exhibit script then you can take over the data-loading
step and then launch exhibit yourself. Take a look at, e.g.,
http://trunk.simile-widgets.org/exhibit/api/scripts/create.js This
is the code that is executed if autoCreate is not cleared. If you run
this code yourself after setting autoCreate=false, you'll get normal
exhibit behavior. So, set autocreate=false, then after exhibit loads
(using jQuery(document).ready as create.js does) run some javascript
that inserts the desired link tag in the header, then call the
autoCreate function yourself.
4. If you simply can't fiddle with the head that way, another way to
avoid placing the link command is to do your own loading of the data
manually, inserting your own code that replaces exhibit's loading
process. But you'll need to replace quite a few things. Again, you
can take over the pipeline using autoCreate=false. You can replace
the function window.database.loadDataLinks in create.js with your own
data loading code. Your loading code needs to fetch, parse, and insert
the data you want. For the case of a jsonp data feed like google
spreadsheets, this is normally done by e.g.
http://trunk.simile-widgets.org/exhibit/api/scripts/data/importers/jsonp-importer.js
, which uses the googleSpreadsheetsConverter in
http://trunk.simile-widgets.org/exhibit/api/scripts/data/database.js as
its translator, and then calls database.loadData to shove the parsed
data into exhibit. You can write a replacement for the jsonp-importer
code to fetch the google spreadsheet data, then call
googleSpreadSheetsConverter yourself to translate it into exhibit and
call database.loadData yourself to shove it into exhibit's database.
then you can replicate the code in create.js to actually show the
exhibit.
Zaheer Ali
try and report back. many thanks again!
On Sep 19, 9:42 am, David Karger <kar...@mit.edu> wrote:
> Here are four answers. I'm afraid the third is a little involved since
> you're trying to jump deep into the exhibit processing pipeline.
>
> 1. to just preprocess the google spreadsheet into a normal json file
> for exhibit, you can just make a static exhibit somewhere else that
> loads the data from the spreadsheet, then use exhibit's data export
> functionality (activated by clicking the orange scissors that appear
> when you hover over the data in the page) to copy out the same data in
> exhibit json format.
>
> 2. If you want to access the spreadsheet data "live", perhaps you
> canput some javascript in your page that inserts the <link> tag exhibit
> wants into the head _after_ you're CMS has finished parsing the head
> (so it won't see and complain about the link) but _before_ executing
> exhibit (which will happen if the script for your "link insertion"
> javascript appears before the link to exhibit in the head of your page).
>
> 3. If for some reason your script link inserter has to run _after_ the
> exhibit scripts are loaded, you can take advantage of exhibit's
> autocreate option. There is an "autoCreate=false" option that tells
> exhibit _not_ to run after its code has been loaded; if you set that
> option in the exhibit script then you can take over the data-loading
> this code yourself after setting autoCreate=false, you'll get normal
> exhibit behavior. So, set autocreate=false, then after exhibit loads
> (using jQuery(document).ready as create.js does) run some javascript
> that inserts the desired link tag in the header, then call the
> autoCreate function yourself.
>
> 4. If you simply can't fiddle with the head that way, another way to
> avoid placing the link command is to do your own loading of the data
> manually, inserting your own code that replaces exhibit's loading
> process. But you'll need to replace quite a few things. Again, you
> can take over the pipeline using autoCreate=false. You can replace
> the function window.database.loadDataLinks in create.js with your own
> data loading code. Your loading code needs to fetch, parse, and insert
> the data you want. For the case of a jsonp data feed like google