Web Dev Notes

Blog about web development by Robert Dawson

How to automatically update the copyright year on Squarespace

Question

It's 2012 and your copyright year still reads 2011. You vaguely remember that computers allegedly save time. So, you wonder if there might be an easy way to automatically display the current year and save yourself a few clicks and minutes each year.

Answer

There is! And it's easy. JavaScript 101 easy. No, jQuery 101 easy!

Note: This assumes you have jQuery installed. If not, see this post. Also, this solution basically applies to any site with jQuery.

Step 1: Add container element

  1. Go to Website Management > Structure > Website Settings > Header & Footer Website Footer / Licensing Notice
  2. Paste this:
    Copyright &copy; <span class="current-year"></span>
    

Step 2: Add jQuery

  1. Go to Website Management > Structure > Website Settings > Code Injection
  2. Paste this:
    <script type="text/javascript">
    $(function(){
      $('.current-year').html((new Date).getFullYear());
    });
    </script>
    

Experience with Squarespace v5

Overall, I love my new Squarespace site. But here is the good with the bad.

The Good

  • Pretty!
  • Obviously took a lot of work to develop (and I can't wait for v6)
  • Very easy to maintain

The Bad and Ugly Underbelly

Only one problem: Painful customization

  • No server-side language support (or plans to provide it), which, to illustrate the problem with a personal example, prevented me from using PHP to parse an XML file from an API that doesn't support JSONP, meaning no cross-site allowance
  • No ability to insert JavaScript into the body (at least with my account), which means front-loading all JavaScript, causing needless delays until I have time to implement an asyncronous workaround like ControlJS
  • Drag-and-drop insanity, in that reordering a picture gallery via drag-and-drop is a great solution until you have over 100 images, at which point I started thinking about writing my own script to sort without so much scrolling
  • No FTP support, which is just silly from a developer's standpoint
  • Poor mobile support, since the iOS versions allow only basic blog editing, making WordPress a much better solution for those of us who want to add or edit content on the go

But, soapbox aside, despite there being more negatives than positives listed here (and that I bolded the negatives so that Squarespace staff will let me preview v6 already), I do really enjoy how I am able to create and centralize my own stuff here and plan to continue using it and finding ways to make my life easier (and pass it on, if I do)!

Easy way to include HTML in Squarespace pages

Question

How do you include snippets of HTML code into multiple pages on your Squarespace site?

Answer

There are several ways to do this, but one particularly straightforward solution was to add jQuery to the head of every page, create an HTML page to include, and then load part of that page into an empty DOM element. Here are instructions based on what I did. You can use whatever DOM element (e.g., <div> or <p>) and class or id you like.

First, insert jQuery into the <head> of every page.

  1. Click Website Management.
  2. Under Structure, click Website Settings.
  3. Click Code Injection.
  4. In the "Extra Header Code" text field, add:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
  $('#updates').load('/updates/ #content');
});
</script>

<script type="text/javascript">$(function(){$('#updates').load('/updates/ #content');});</script>

Second, create a new HTML page.

  1. Click Website Management.
  2. Under Structure, click Architecture.
  3. Add a new section. I called mine "Hidden from nav."
  4. In this section, click "add page" and make a new HTML page. I called mine "Updates."
  5. Go to that page and add the content you want to display elsewhere.

Third, add an empty DOM element to your target page(s).

  1. Go to a page where you want to display this new HTML page.
  2. Click "edit page" and, in HTML view, add an empty DOM element.
  3. Give that element a class or id, like this:
<div id="updates"></div>

And you're done! It's more than one step (and Squarespace should offer this functionality natively) but it's still easy and quick to implement.

The only small issue I found with this solution is that Squarespace adds another "edit page" link above the included code, which opens the edit window for the page you're on and not the included page. To edit that page, just go to it directly.