Social Links and Facebook Fan Pages
UPDATE: 11/2012
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/
UPDATE 8/6/12:
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!
Linky- http://cl.ly/text/3U3F1S1Q2i0r
UPDATE 9/20/12:
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.
UPDATE 10/4/12:
Specific Tutorial for Ishimoto Template using a fullwidth footer and custom social media links:
http://www.squarespaceplugins.com/full-width-ishimoto-template-footer/
Great tutorial. I really wish Squarespace would get the ball rolling with fixing this. I am currently using my own social icons because Squarespace does’t give me all of the options I need.
Your welcome Elizabeth
I imagine part of the delay (especially in offering lots of options for each component) is due to the cascading effects (oh I think I just made a pun!) and unintended consequences of even the smallest tweaks and hacks so be sure to double check how your site looks on mobile or other devices if that’s important to you 
Not to mention, there are probably as many icon preferences as there are people using the platform. Hopefully we will see an option similar to the favicon customization where you just upload the icon images and squarespace takes care of the rest. So far, I think the Amelie template has the most customization as far as icons go. Thanks for the feedback..it truly helps me understand what kind of topics are helping people.
Worked great, Holly! Thanks!
You were definitely the catalyst for the post Sue
Many of the tutorials come from questions in the comments. (HINT HINT to the rest of you! )
Hi Holly,
I’m using the Boutique template that has the icons in the header. I went to header code injection and followed your instructions. It worked great, except that I now have 2 sets of icons and the new one is all the way to the left. (www.nikki-zawol.squarespace.com). Any suggestions on how to resolve this?
Thanks!
Nikki
Fortunately, I think it’s an easy fix. There’s a toggle in the Style Editor within Options. (Let me know if that hides both instead.)
The option toggle “fix” probably won’t work. (I really shouldn’t reply to stuff this late as it’s never the right answer! Lol.) I”ll give it a go tomorrow.
I’m using AVENUE template and I can’t it to work.
Wilifredo- For now, here’s a link to the css used for the social links. http://cl.ly/text/3Y1Q0Z2c0a3Q Depending on coding skills, it may or may not be of use to you. I’ll try and come up with a fix when I get a chance tomorrow
thank you Holly! I anxiously await your advice….and yep, I’m pretty ok with CSS and what not.
I haven’t forgot Wilfredo!!! I have aggravated an inflammatory/nerve issue that pops up every once in a while that keeps me off the computer for hours, days at a time.
take care of yourself!
Ok, so here’s the code I used for my testing site- http://squareplugin.squarespace.com
#sqs-sidebar-social {display: none;}#sideBarBlock #sqs-sidebar-social {display:block!important;}
Here’s a link in case the code doesn’t print to this comment – http://cl.ly/text/3U3F1S1Q2i0r.
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!
thank you Holly..I’m gonna give this a go..
so I’m not quite sure if these instructions are for changing the URL link of my facebook icon to point to my page, instead of my personal.
I’ve updated the post to include help for those with duplicate sets of icons
HI Holly,
Thank you for your tutorial. I have used it once before, but for some reason, just noticed that my changes that you once helped me with are no longer working and the link on my page doesn’t go anywhere. So, I wanted to reset it and have followed all your steps up to having double links. Now I am stuck. I’m not a coder so not sure what to do wtith the code you are providing or where I am supposed to put it? Right now, when I copy and paste it in, then the words themselves show up as text underneath the icons. What do I do?
Thanks!
Shannon
Holly,
I posted on SS6 forum that your code worked very well and I have the social icons directed at the right pages. Thank you for that.
Now I was wondering how I could modify your latest code to stop the display of the original icons on the bottom left of my page (right now the default social accounts are off so you don’t see them).
I tried inspecting the elements and grabbing the id or div but I don’t think I was targeting the right id or div.
Thanks for any help figuring this one out.
MB
Maziar, I’m assuming you’re referring to the site linked in your profile? It looks like you figured it out? If not, let me know. (Nice site by the way)
Thank you Holly. Yep, I was referring to the site linked on the profile.
As long as I keep the default SS6 social links turned off, everything works. But if I turn them on in order to get a tab on facebook that refers back to my site, then I get duplicate social links.
So I wanted to go back and turn on the default social links again, and then possibly inject the last code you show, to stop the links from displaying, so they don’t show twice…..But didn’t know how to modify your code to refer to the bottom footer area. (not the footer where links are displayed now, but the default page footer that SS6 puts the links).
Right now the default social links are turned off.
Thank you for your help.
Hi – I am having trouble finding where to right click to find the html code….can you help? I’m using Peak template.
Thanks so much!
Whitney- Here’s a code example. http://cl.ly/text/3h271B1P2b0B I went ahead and created a temp site so you can see a working example – http://holl-ezell.squarespace.com/blog/. (For future reference, it helps to leave a link to the site your needing help. Otherwise I’m just guessing
And I’m not a very good guesser!)
Thanks Holly! Sorry – new to this. I can’t access the temp site. I can see the code example – thank you. May I email you the site’s link?
holly at foggyphils.com or the contact form on the site
Thanks for your help on direct link but now can’t get the CSS code to work for my site. Could you take a look to help me… Thanks
jim-hamlin.squarespace.com
Louis
Louis- Can you enable the social links (I’m not seeing them) so I can see where they are located. Each template has a different location/options so it makes it easier to know where I should be looking.
nevermind…fyi- from your homepage, they aren’t viewable but now I see them on your about page…give me a few minutes
Before getting into a bunch of css editing, would disabling the “icon viewable in footer/sidebar” option work for you? I think they have just released this functionality. This worked in the Peak example above without editing any custom css (stil requires adding an html code block). See this screenshot for clarification-
http://cl.ly/image/1E3Z170H3l0I
Thank you Holly! I’ve emailed you.
Holly – thank you so much for your help! I have both Twitter and Facebook installed on my home page! THANK you so much!!
Best,
Whitney
Thanks so much for this tutorial– I am having trouble with the Frontrow template, though… doesn’t seem to be working. Either nothing happens, or an extra set of icons appear in the middle of the page, which I can’t seem to hide, even with your suggested CSS code. Any ideas? THANK YOU!
Regina, Do you still need help with this? Where exactly do you want the icons to appear (only in one place? two separate places as you have it now?) If you can do a screenshot and annotate what you want/dont want to show, it would give me a better idea of how to help
Right now I see one set on the homepage (bottom right) and 2 sets on inside pages (top right and mid-bottom).
Hi Holly I’m having similar issues to Regina with the Frontrow template. In the main site Code Injection section I’m adding:
#sqs-header-social {display: none;}
#sidebarBlocks #sqs-header-social {display:block!important;}
So I get two sets of Facebook icons. One in the header with my personal facebook link. The second about half way down the page — and on the site main page these icons do nothing on subsequent pages they are correct (but still in the wrong place).
1. Do I need to rename my div sqs-header-social to something unique so the turn off/on works?
2. I think it’s because I haven’t found the name of the div block (instead of #sidebarBlocks) that the location of my icons is incorrect?
3. Why don’t my links work on the home page?
If you have the time to look at my page please let me know (being in development it has a password on it).
Thank you so much — Bill
Bill, as you mentioned it’s password protected but if you’ll send me a password via email, I’ll take a look.
I doubt this will fix all your issues, but have you tried hiding the default icons from Settings -> Social Accounts (screenshot: http://cl.ly/image/1E3Z170H3l0I) Some templates are specific enough with their “hide social icon” feature, that it doesn’t affect the hand coded versions and so you wouldn’t need to use custom css to hide then display.
Hi Holly,
I am not a computer person AT ALL, but I followed your instructions and was able to add a coded facebook icon on my page that is viewable ONLY when I am in preview mode– and actually right now they are not even showing the icon, but some text inside a small box. I can’t seem to find it when I am in editing mode to move it over to the side where the other one is. How do I do this so it doesn’t just float randomly there? Then I need to turn the other one off I guess? I don’t now code, so am having trouble understanding your previous instructions. Please help!
Thanks!
Hey Shannon! Please see this interactive screenshot so I can help you better https://www.notableapp.com/posts/6fa02e563879de8b6923b10aad9cefcab7c53260 – I see 2 fb icons in different places. Do you just want the one in the sidebar to be correct? If so, you need to hover over the sidebar to see the +square option to add a block. You will then copy the default code as explained in the tutorial, then add a small bit of css. http://cl.ly/text/3U3F1S1Q2i0r
Nevermind! Thanks for your help! I figured it out.
Hi Holly,
Thanks for this (hilarious opening art, btw). I found the code I need, but I haven’t been able to crack the Ishimoto template. Where do I inject it if I want to keep the position of the social icons where they are? Or am I asking for too much?…
Your Welcome (and thanks- you’ve now seen the full extent of my “graphic art” skills
) Here’s your code and instructions – http://cl.ly/text/2B3z2q1c1R2z
and here’s the example site where you can see it in action – http://h-hitt.squarespace.com. (you’ll have to type in the “visitor view” code)
I’m also trying to get the icons in the nav menu for someone else so just disregard that part. Your relevant info is in the footer area. Let me know if you need any additional help. Just know I’m a bit behind with over a dozen other “Social Icon” help requests right now. It may take me a bit of time to answer back
ETA: I didn’t get a chance to test the changes on multiple browsers or mobile devices so be sure to double check. Get back to me if there is problem!
Hi Holly,
Has anyone tried this with the new Five template? I have the social icons showing in both the footer and the header and am wondering if that would cause difficulty. The site isn’t live yet as I’m still using v.5 while I slowly migrate over but you should be able to see it here:
https://becks-davis.squarespace.com/
Thanks,
Becks
Hi Holly
Thanks for this but I’m still a bit stuck.
I’m using Frontrow template so my social buttons are in my navigation bar.
I’ve tried adding it on the page, code injection in footer etc, but it always appears on the right hand side of my pages.
I can’t add my own blocks to my navigation bar
Any ideas?
Thanks
Holly, thank you so much! The instructions were crystal clear and the process was smooth. My site looks great—thank you!!
Hi guys!
I need help with the Facebook button on my Native Theme. I tried to do the edits using the CSS Style Editor. This is the code I have:
When I try to put it into the CSS Style Editor to do the change is says Syntax Error on line 1. And whatever I do it won’t let me save.
Any advice?
I think your code may of been stripped out of your comment? For most themes you no longer have to use custom css (instead, go to social accounts -> turn off showing default icon) . The html code should be pasted in a code block (from the edit option on the front end of your site) or through code injection (settings -> advanced).
Be sure to include the div id=”sqs-social” tag. Code example- http://cl.ly/text/2O2w2j0j3q1T
Let me know if you need more specific steps. My internet connection is severely lacking the past couple of weeks so I’m not able to test it more thoroughly.
Btw- Small world, although we are back on the road, my kiddies earned their orange belt this month at the Orlando TA (John Edmonds). We plan to pick up again at TA in Tyler over the holidays.
need help getting that code for the qubert template.
Are you trying to get it in the side bar. If so, you should be able to paste the code (similar to the one in the original post) from the front end of your site while in edit mode (pencil icon). Add a code block and paste the edited social code. For more specific help, you need to include your site url. If you don’t want it public, feel free to use the contact form.