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 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.
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.
The URL in the address bar is now the following:
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.
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
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.
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 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'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.
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 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.