Social Links and Facebook Fan Pages
Squarespace has finally fixed this issue!! You can check out the official Squarespace Help Documentation on it here.
Currently, Squarespace6 is directing Facebook social icon links to everyone’s personal Facebook page without the option to choose a fan page instead. This tutorial will give many of you a workaround until Squarespace fixes this issue. Some templates will work better (or at least easier to carry out) than others.
Find the HTML for the Social Links
You can use any web inspector tool, I just happen to be using Chrome at the time. Either right-click or use a keyboard shortcut (if you have that kind of memory) within the social links area and select Inspect Element.
Follow the Squared Brick Road
If you didn’t hit the element just perfect, you should at least be close. Find the div that encapsulates all the social links.
Copy the Social Link HTML
Select the Editor Icon
Add a Code Block
Obviously, my social links are located in the sidebar. Your’s could be positioned in the footer, header, or somewhere else. If you can’t add the code by adding a block, you might try one of the code injection options.
Paste the HTML code
Once you’ve pasted the HTML in the code block, you will need to edit the Facebook link from your personal page to your fan page.
Presto! You now have a Facebook Fan Page Social Link
I’ll leave the two different versions on my Squarespace 6 site up for a bit if you would like to check out them out at http://squareplugin.squarespace.com/
Here’s a code snippet for templates that are showing both versions of the icons. Like I stated in the comments, the idea is to hide the block and then selectively display it by specifying a unique id and using !important to ensure it gets displayed. Unfortunately, it’s probably not a one size fits all solution. You will have to use your browser’s inspector tool to find the id. But if you are able to complete the tutorial, you are using the same concept of finding the correct div. This is just one way and certainly not an example of “semantic” code. But it works. And it’s the simplest solution to explain. Let me know if you need help!
I think I’ve replied to everyone needing help to date. IF not, please leave a comment again or use the contact form. Please make sure your site is linked to your name or within the comment. Including your template as well as a link to a screenshot will go a long way in speeding up the process. You may also want to check the links in the comments as additional code has been mentioned there too.
Specific Tutorial for Ishimoto Template using a fullwidth footer and custom social media links: