How to add Bigfoot.js to your Squarespace site

Bigfoot.js is the little Javascript nuggets that makes for fancy footnote popovers[1] that have popped up on several sites recently.

Bigfoot is pretty simple. It’s just a Javascript file and some CSS, called from head. It allows for all sorts of flexibility both functionally and cosmetically. It works great on devices of all sizes and makes reading a long article much easier, as you don’t get bumped to the bottom of the article and back up to the top just to read a witty comment.[2]

Getting it up and running on Squarespace isn’t as hard as you might think.

After downloading the files from the Bigfoot site, you can tinker with the CSS and Javascript. The CSS is pretty straight-forward, and the Bigfoot site has all of the various options you can set in Javascript outlined.

Note that the downloaded .zip will include bigfoot-default.css. I removed the -default from the filename before uploading to Squarespace. The site will look for bigfoot.js and bigfoot.css.

Once you’ve edited the files, you’ll need to upload them to your Squarespace site. The system doesn’t have a media manager like WordPress, but files can be uploaded easily enough.

Once both of your edited files have been uploaded, you’ll need to stick this code in the Code Injection field in Squarespace to make Bigfoot work:

Note that if you’re already calling jQuery already in your head, you can skip line 1 of that Gist.

If you hit Save on the Code Injection module and refresh your page, everything should be working smoothly. Remember that Squarespace doesn’t support Multimarkdown, so to add footnotes to your articles, you will need to use HTML.

Update: If you want to use numbers as the footnote indicators, check out Anthony Craig’s article. It basically changes the script in head to this, using this CSS file as the base.

  1. Like this one!  ↩

  2. Like this one!  ↩