How to Direct a Squarespace 6 Social Link to your Facebook Fan Page

Squarespace 6 no Link to fan page meme

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.

 How to Direct a Squarespace 6 Social Link to your Facebook Fan Page photo

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.

 How to Direct a Squarespace 6 Social Link to your Facebook Fan Page photo

Copy the Social Link HTML

 How to Direct a Squarespace 6 Social Link to your Facebook Fan Page photo

Select the Editor Icon

 How to Direct a Squarespace 6 Social Link to your Facebook Fan Page photo

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.

 How to Direct a Squarespace 6 Social Link to your Facebook Fan Page photo

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.

 How to Direct a Squarespace 6 Social Link to your Facebook Fan Page photo

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/

 How to Direct a Squarespace 6 Social Link to your Facebook Fan Page photo

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!

#sqs-sidebar-social {display: none;} #sideBarBlock #sqs-sidebar-social {display:block!important;}

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/

ss5 ad How to Direct a Squarespace 6 Social Link to your Facebook Fan Page photo

ss6 ad 2 How to Direct a Squarespace 6 Social Link to your Facebook Fan Page photo



If you would like to receive other tips and tutorials,  follow Squarespace Plugins via RSS or sign-up for the SSP Monthly Newsletter which will include all the tutorials for the month as well as the latest Squarespace happenings around the net. (Your info will not be shared or sold to anyone)

Squarespace user since 2009. Traveling throughout North America with my first husband and three kids. You can follow our journey at FoggyPhils. (http://www.foggyphils.com)

47 Comments on "How to Direct a Squarespace 6 Social Link to your Facebook Fan Page"

  1. Elizabeth says:

    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.

    • Holly says:

      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.

  2. Sue Mosher says:

    Worked great, Holly! Thanks!

    • Holly says:

      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! )

      • Nikki says:

        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

        • Holly says:

          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.)

          • Holly says:

            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.

  3. Wilfredo says:

    I’m using AVENUE template and I can’t it to work. :(

    • Holly says:

      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 :)

      • Wilfredo says:

        thank you Holly! I anxiously await your advice….and yep, I’m pretty ok with CSS and what not. :)

        • Holly says:

          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.

        • Holly says:

          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!

  4. Holly says:

    I’ve updated the post to include help for those with duplicate sets of icons

    • Shannon says:

      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

  5. Maziar says:

    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

    • Holly says:

      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)

  6. Maziar says:

    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.

  7. whitney says:

    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!

  8. 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

    • Holly says:

      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.

    • Holly says:

      nevermind…fyi- from your homepage, they aren’t viewable but now I see them on your about page…give me a few minutes

    • Holly says:

      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

  9. whitney says:

    Thank you Holly! I’ve emailed you.

  10. whitney says:

    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

  11. Regina says:

    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!

    • Holly says:

      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).

      • Bill Johnson says:

        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

        • Holly says:

          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.

  12. 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!

  13. Ivy says:

    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?…

    • Holly says:

      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!

  14. Becks Davis says:

    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

  15. Bernard says:

    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

  16. Ivy says:

    Holly, thank you so much! The instructions were crystal clear and the process was smooth. My site looks great—thank you!!

  17. Adam says:

    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?

    • Holly says:

      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.

  18. EE says:

    need help getting that code for the qubert template.

    • Holly says:

      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.

Trackbacks for this post

  1. Ishimoto Template: Full width Footer with Custom Social Media Icon Links - Squarespace Plugins

Got something to say? Go for it!

 
Loading...
Join over 100 folks and get our free monthly SSP Newsletter.
No-Spam Guarantee. Ever.