Add Bigfoot to Squarespace sites


Bigfoot is a jQuery plugin which changes your footnotes into little buttons embedded in the content which put up a popover when you click on them.

Go ahead, try this one.1

A lot of people have been considering adding it after it got a little praise from Marco Arment. Getting it working on Squarespace might seem a little bit daunting, at first blush. But it’s actually quite a straightforward process. Here’s how to do it:

1. Upload the files you need somewhere you can get to them

There are a panoply of ways to get files on the internet. Squarespace makes it hard, sadly, but there are a few ways round that. Of course if you have your own webspace elsewhere from your Squarespace site you can just upload the files there. Otherwise, you can use this method to upload your files within a post, then copy their URLs from that post once you’ve published it.2.

Download the files you need from the download link on this page. At bare minimum you want to upload bigfoot.js and bigfoot-default.css.

2. Reference the files in your site code

You want to copy and paste the below code into your Code Injection:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="http://sidoneill.com/51d/public_html/js/bigfoot/bigfoot.js"></script>

<link rel="stylesheet" type="text/css" href="http://sidoneill.com/51d/public_html/js/bigfoot/bigfoot-default.css">

<script type="text/javascript">

$.bigfoot();

</script>

Here it is in case you’re having trouble copying the above. Note that the URLs in this code point to my versions of these files. You’re welcome to use them, but bear in mind that if I’m taken by aliens the links might become invalid eventually.

3. Troubleshooting

If you’re lucky that will all have worked perfectly. Crack open your favorite beverage. Relax. Enjoy your new cool-ified footnotes.

If not, there are a couple of things you can check.

  • Do your URLs all work? Try opening them in a browser to make sure.

  • Are your footnotes formatted correctly? If you made them in markdown they almost certainly are. However, you might be a special flower like me. My footnotes are dynamically changed to be completely unique based on the article ID, and they have IDs that looks like this: article-52615c3de4b0e17cf260af60fn:1. If this is the case, find line 128 in bigfoot.js and add in something that’s unique to your footnotes after note, like I’ve done here:

As you can see I’ve added |article, so now the script can find my footnotes.

  • Have you referenced jQuery more than once in your header? Don’t.

  • Is some other script stopping this from working? Remove everything else from your code injection and try just the Bigfoot code to see if that fixes it. If so, add things back in one by one till you see what’s blocking it.

  • If all else fails, feel free to get in touch and I’ll take a look when I get a chance.


  1. OK, I don’t actually use Bigfoot any more. But if I did… 

  2. Publish it privately, unless you want to really confuse your readers…