Facebooking the Squarespace Flatiron

Have you built a site on a Squarespace template such as Flatiron or Marquee supporting the concept of index pages or index collections? Do you post a page or a gallery link to Facebook only to be frustrated that Facebook ignores the metadata for the page you are posting and displays the index page's metadata instead? Keep reading! There's a perfectly logical explanation along with a dead-simple solution. 

An Example in Flatiron

Templates like Flatiron and Marquee are built around the concept of an index collection that is a grouping together of regular pages or galleries so as to make them appear as a single page in the viewer's browser. My personal website in the Marquee template builds the welcome page by concatenating the various pages in my index collection. Figure 1 shows an example site in the Flatiron template having a home page made up of one thumbnail taken from two galleries and one regular page making up the index collection. 

Figure 1. An example page built in the Flatiron template

Figure 2 shows Figure 1's implementation from Squarespace's configuration page. You see in the Main Navigation section an index collection entitled Work. Nested underneath are two galleries and a page that are named Bikes, Headshots, and Boring Blog Post respectively. 

Figure 2. The index collection underlying the page in Figure 1

Each of the items in Figure 2's index collection is at the same time two different things: 

  • Each item is a web page of its own, and 
  • Each item is a region in the site's home page

When a visitor load's the home page, all the items in the index collection are served to the user's browser as a single page. It's also possible to visit each page individually. Doing that is at the heart of what this blog post is about. 

The Problem Illustrated

The problem comes about when you view a collection item thinking that you're viewing the specific page for that item. Then you post the URL from your browser's address bar on Facebook only to see Facebook display the wrong metadata, or at least not the metadata that you desire to see. Figure 3 shows the Bikes gallery as you would see it after clicking the image of the blue bicycle shown at left in Figure 1. 

Figure 3. The Bikes gallery after clicking the image of the blue bike in Figure 1

The URL in the address bar is now the following:

http://www.learncss.co/#/bikes/

Pasting the URL into Facebook yields the result in Figure 4. The title and description are not from the Bikes gallery at all. They are from the site's home page, which is not the effect you're going to be after when pasting what appears to be a link to specific gallery.

Figure 4. Metadata from the Work page (the site's home page) being displayed for the Bikes gallery

The techniques I give in my article Facebook Preview and Squarespace for controlling the metadata provided to Facebook do not seem at first to work for templates like Flatiron and Marquee. The symptom will be as in Figure 4, that you post a link in Facebook only to see metadata from the index page, and not from the specific page that you're posting. 

The Behavior Explained

What's really happening? The behavior in Figure 4 makes sense once you realize that you're really still viewing your site's index page. Look at the gallery in Figure 3. Scroll to the bottom as in Figure 5. There is the rest of the index page! You've never left that page. The template has merely invoked a combination of JavaScript and CSS to load the gallery images and expand the top of the page so that you can view the images. 

Figure 5. The bottom of the gallery showing that the page is still the very same index page as in Figure 1

You'll see the same behavior from the Marquee template. Figure 6 shows what appears to be my Database and Tech blog page in that template. What you are really seeing though, is the result of my clicking the Database and Tech menu item in the parallax menu at the right side of my home page. Clicking that menu item causes the page to scroll to the region in Figure 6, and the link in the browser address bar will change, but you can easily scroll up and down and see that you are still on my home page.

Figure 6. My home page scrolled to show the region corresponding to my Database and Tech blog page

You can see how it's easy to think you're on a separate page when you're really not. You then end up with a link giving the wrong metadata when pasted into Facebook. Or rather, it gives the technically correct metadata that is not really what you're after.

The Solution

The solution is dead-simple, and it lies in the links that you copy from your browser address bar to paste into a Facebook status update. Following are the URLs corresponding to Figure 5 and Figure 6:

Figure 5: www.learncss.co/#/bikes
Figure 6: gennick.com/#database-articles

Focus on the number sign (#) symbol. That's the key. You want to remove that symbol, taking care not to leave any doubled-up forward-slash (/) characters in the URL. For example:

Figure 5: www.learncss.co/bikes
Figure 6: gennick.com/database-articles

The first set of URLs having the number signs will take you to locations on their respective index pages. That's not the behavior you want when pasting a link into Facebook. The second set of URLs omit the number signs and take you directly to the pages in question. For example, the URL www.learncss.co/bikes leads to the page shown in Figure 7, which you see scrolled all the way to the bottom.

Figure 7. The specific gallery page, not a portion of the index page, and suitable for posting to Facebook

Figure 7's page is scrolled all the way down. You can see that it's a distinct page all its own. Paste the page's URL into Facebook now, and you'll get the metadata specific to the Bikes gallery. You can see that in Figure 8. 

Figure 8. Metadata now being displayed for the Bikes gallery

Interestingly, the issue I've just described has ramifications when writing CSS to specify text colors and size and so forth for gallery and other pages that make up an index page. It is possible to inadvertently write CSS to affect the view of a gallery as it is displayed in the index page as in Figure 5, and yet not have that CSS affect the gallery when it is viewed independently as in Figure 7. That may not normally matter, as viewers don't normally navigate to the specific pages, but it does matter if you're posting links to those pages in Facebook.

Removing the number signs from the links. That's the solution to remember when pasting links to pages that are part of an index collection. Facebook will then draw on the metadata from the Basic settings tab for each specific page that you post, and the techniques from Facebook Preview and Squarespace can also help when you need to provide metadata to Facebook that differs from that provided to Squarespace.


* Thanks to Naseem Rafiei and her website 365 Days of Makeup for posing a question on what turned out to be a really interesting issue to explore.


Learn CSS for Squarespace 7
9.99

Learn CSS for Squarespace 7 is a seven-chapter introduction to working with CSS on the Squarespace platform. The book is delivered as a PDF file that is readable from any Windows or Mac – or even Linux! -- computer. A complimentary sample chapter is available. Try before you buy.

View the complete description for more details.

Add To Cart