Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'social-links'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers πŸ‡«πŸ‡·'s Topics
  • France Designers πŸ‡«πŸ‡·'s Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://www.hightidehr.je Hi everyone I'm wondering if someone can help me with a social link not lining up correctly on header. I've added the requested social link (linkedin) via the usual editing bar for the header, and the logo is appearing at the top left of the header. I'd like it to line up alongside the word 'contact' if possible please. See attached screen shot of where the logo sits when it's been added. I've had to take the social link off until I get some help with this, as the site is live. Thanks in advance Sam
  2. Site URL: https://shallot-mackerel-ban6.squarespace.com Not sure what happened between editing yesterday vs. this morning... I didn't change any coding, but the custom icon I uploaded for one of my social links is now behind my custom cart... I'm using the following plugins. When I adjust the social icon, it changes in the cart, too so I know they're connected somehow. //Cart// .header .header-actions-action--cart svg {stroke:transparent!important} .header-actions-action-cart .icon-cart-quantity {display:show} .header .header-actions-action--cart {background-image: url(https://static1.squarespace.com/static/62dc702102047a64da0e43c5/t/632b3fb0574dec2f6ecb0300/1663778736098/Cart+Nav+-+Web+%282600+%C3%97+2650+px%29.png); background-size: contain} //Pinterest Social Icon// @media only screen and (min-width:640px) { .icon--fill:nth-of-type(1) { svg { display:none; } background-image: url(https://static1.squarespace.com/static/62dc702102047a64da0e43c5/t/6307cb5fbf645a0f86857ccd/1661455199304/4.png); background-size: 100%; background-repeat: no-repeat; } } .header-menu-actions-action:nth-of-type(1) { svg { display:none; } background-image: url(https://static1.squarespace.com/static/62dc702102047a64da0e43c5/t/6307cb5fbf645a0f86857ccd/1661455199304/4.png); background-size: 100%; background-repeat: no-repeat; } .sqs-svg-icon--list a:nth-of-type(1) { svg { display:none; } background-image: url(https://static1.squarespace.com/static/62dc702102047a64da0e43c5/t/6307cb5fbf645a0f86857ccd/1661455199304/4.png); background-size: 100%; background-repeat: no-repeat; }
  3. Site URL: https://sawfish-denim-739l.squarespace.com/config/design/custom-css I have never imported a custom social media icon from Buy Me A Coffee. Here is the Image Code: <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="missionrea9" data-color="#FFDD00" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#000000" data-coffee-color="#ffffff" ></script> how do I add that custom code to the social icons. Icons will be required Header, in Sections, and Footer Thanks in advance website link password: Jdz391 at this point the website is not premium
  4. Hello all, After spending some time browsing around, I found a simple way to add WhatsApp integration to the entire SquareSpace site, that doesn't require any third party or a server dependency and it is free! However, it does require an upgrade to Business plan for SquareSquare. SquareSpace should allow code injection on lesser plans. Go to your site -> Settings -> Advanced -> Code Injection In the footer section paste this: <!-- Floating button style --> <style> .floating{ position:fixed; width:60px; height:60px; bottom:40px; right:20px; z-index:100; } .float-button{ margin-top:16px; } </style> <!-- Link to WhatsApp --> <a href="https://api.whatsapp.com/send?phone=%2B12125551212&text=Hello%2C%20from%20your%20site" class="floating" target="_blank"> <!-- WhatsApp image --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="58px" height="58px"><path fill="#fff" d="M4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98c-0.001,0,0,0,0,0h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303z"/><path fill="#fff" d="M4.868,43.803c-0.132,0-0.26-0.052-0.355-0.148c-0.125-0.127-0.174-0.312-0.127-0.483l2.639-9.636c-1.636-2.906-2.499-6.206-2.497-9.556C4.532,13.238,13.273,4.5,24.014,4.5c5.21,0.002,10.105,2.031,13.784,5.713c3.679,3.683,5.704,8.577,5.702,13.781c-0.004,10.741-8.746,19.48-19.486,19.48c-3.189-0.001-6.344-0.788-9.144-2.277l-9.875,2.589C4.953,43.798,4.911,43.803,4.868,43.803z"/><path fill="#cfd8dc" d="M24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,4C24.014,4,24.014,4,24.014,4C12.998,4,4.032,12.962,4.027,23.979c-0.001,3.367,0.849,6.685,2.461,9.622l-2.585,9.439c-0.094,0.345,0.002,0.713,0.254,0.967c0.19,0.192,0.447,0.297,0.711,0.297c0.085,0,0.17-0.011,0.254-0.033l9.687-2.54c2.828,1.468,5.998,2.243,9.197,2.244c11.024,0,19.99-8.963,19.995-19.98c0.002-5.339-2.075-10.359-5.848-14.135C34.378,6.083,29.357,4.002,24.014,4L24.014,4z"/><path fill="#40c351" d="M35.176,12.832c-2.98-2.982-6.941-4.625-11.157-4.626c-8.704,0-15.783,7.076-15.787,15.774c-0.001,2.981,0.833,5.883,2.413,8.396l0.376,0.597l-1.595,5.821l5.973-1.566l0.577,0.342c2.422,1.438,5.2,2.198,8.032,2.199h0.006c8.698,0,15.777-7.077,15.78-15.776C39.795,19.778,38.156,15.814,35.176,12.832z"/><path fill="#fff" fill-rule="evenodd" d="M19.268,16.045c-0.355-0.79-0.729-0.806-1.068-0.82c-0.277-0.012-0.593-0.011-0.909-0.011c-0.316,0-0.83,0.119-1.265,0.594c-0.435,0.475-1.661,1.622-1.661,3.956c0,2.334,1.7,4.59,1.937,4.906c0.237,0.316,3.282,5.259,8.104,7.161c4.007,1.58,4.823,1.266,5.693,1.187c0.87-0.079,2.807-1.147,3.202-2.255c0.395-1.108,0.395-2.057,0.277-2.255c-0.119-0.198-0.435-0.316-0.909-0.554s-2.807-1.385-3.242-1.543c-0.435-0.158-0.751-0.237-1.068,0.238c-0.316,0.474-1.225,1.543-1.502,1.859c-0.277,0.317-0.554,0.357-1.028,0.119c-0.474-0.238-2.002-0.738-3.815-2.354c-1.41-1.257-2.362-2.81-2.639-3.285c-0.277-0.474-0.03-0.731,0.208-0.968c0.213-0.213,0.474-0.554,0.712-0.831c0.237-0.277,0.316-0.475,0.474-0.791c0.158-0.317,0.079-0.594-0.04-0.831C20.612,19.329,19.69,16.983,19.268,16.045z" clip-rule="evenodd"/></svg> </a> Data set in the a tag parameters should be encoded. Simple encoder https://meyerweb.com/eric/tools/dencoder/ Set phone number in the phone parameter, and message in the text field. You can also use the a tag throughout your site as a link to open WhatsApp, just remove the class attribute. If you find this useful and add to your site, comment +1 in the thread. Thanks!
  5. Site URL: http://www.jywrrn.com My coding knowledge is extremely limited. I just added my client's TikTok account to his Squarespace's 'Social icon' Editor. When it populates, it just adds a link icon instead of auto-populating with the TikTok icon. Is there a way to replace it? I didn't see many options for customization in the editor.
  6. Site URL: https://www.lonelytogether.com.au/ Hello, my instagram icon has become invisible from view since I added two pages into the header navigation. How do I fix this? When I hover my mouse over the place where the icon would be, it's there, you just can't see it. But you can click on it and it takes you to the social media page. So strange. How can I fix it?
  7. Site URL: https://www.triquetraconstruction.co.uk/home Hi guys, I am trying to customise my header to look like the attached image, with the green backgrounds behind each navigation button and with the social icons & safecontractor logo in that position. Is there a code i can use to make the buttons have that background? And can an image block & social icon block be added to the header (without using the social icon element in header) Thanks!
  8. Just wandering if the TikTok logo will be added as social link that will have a logo attached to it and not a link symbol. Unless someone has code to get around this?
  9. Site URL: https://www.robertalongoni.com Hi. I would like to insert Telegram icon in the Social block. However I have 1 social block in the footer with green background and 1 social block in the contacts page with clear background. I tried various solutions found in the forum but I failed. How can I do? Thank you color code dark #414241 (colour style)
  10. Site URL: https://imnworld.squarespace.com/artists/kathy-mattea I signed up with FontAwesome because I needed to have social media links for different pages. Can anyone help with the following: when I have more than five social media links, the sixth one goes to a second line. I would like to have these in just one line as there is plenty of room. Following is the page link, password and the code I am using. Thanks in advance. https://imnworld.squarespace.com/artists/kathy-mattea PASSWORD IS: password <script src="https://kit.fontawesome.com/29b7f821e9.js" crossorigin="anonymous"></script> <!-- OPTION 1: Icons in a link --> <ul class="t-social"> <li> <!-- put a unique class like "icon-link" on any link you are using an icon --> <a class="icon-link" href="https://www.mattea.com" target="_blank"> <i class="fa-solid fa-tv" title=""></i> </a> </li> <li> <a class="icon-link" href=https://open.spotify.com/artist/7ndzHjxbErIwvwnEUewMWe?si=vvjVwuSjQC-9PHUkC73lmA" target="_blank"> <i class="fa-brands fa-spotify" title=""></i> </a> </li> <li> <a class="icon-link" href="https://www.facebook.com/KathyMatteaMusic" target="_blank"> <i class="fa-brands fa-facebook-f" title=""></i> </a> </li> <li> <a class="icon-link" href="https://www.instagram.com/kathymattea" target="_blank"> <i class="fa-brands fa-instagram" title=""></i> </a> </li> <li> <a class="icon-link" href="https://twitter.com/Kathymattea09" target="_blank"> <i class="fa-brands fa-twitter" title=""></i> </a> </li> </li> <a class="icon-link" href="http://www.youtube.com/user/kathymattea" target="_blank"> <i class="fa-brands fa-youtube title="”></i> </a> </li> <li> </ul> <style> /* social icons code */ .t-social { display: block; margin: 0 auto; padding-top: 5px; text-align: center; padding-left: 0; } .t-social li { display: inline-block; margin: 0; line-height: 100% !important; } .t-social .icon-link { font-size: 24px; /* change the font-size to change the icon size */ display: block; margin: 0 10px; /* increase/decrease the margin to adjust icon spacing */ color: #000000; } .t-social .icon-link:hover { color: #000000; } </style>
  11. Does anyone know a way to add social links blocks under an accordion? Or if it's easier a code to convert links to icons? Image kind of shows what I'm going for. Thanks!
  12. Site URL: https://tuna-saxophone-sbmp.squarespace.com Hi ! I custom the hader to have a secondary navigation, but the social icons are not align with the text. @tuanphan Can you please help me ? https://tuna-saxophone-sbmp.squarespace.com Pass : Camille
  13. Is this possible in 7.1? I’m reading that 7.1 got rid of secondary navigation. So I’m looking at css options, but I can’t seem to find any that move the social icons to go just underneath the main navigation links in the header instead of all being on one line. Anyone try this?
  14. Site URL: http://www.mazzarellamusic.com Does anyone know how I can add this bandcamp logo to the row of social links at the bottom of my pages, so that the link doesn't show the generic icon anymore? www.mazzarellamusic.com
  15. Site URL: https://heptagon-brass-6xej.squarespace.com/ Hi guys! I have not found an answer anywhere how to change the standard mail icon and also add my own icons instead of link icon. How do I change this? Does anyone have a code? https://heptagon-brass-6xej.squarespace.com/ pw - hello
  16. Site URL: https://numomo.com/ Hi, I am setting up new site. The mobile view shows a default hamburger (or +) icon for the collapsed menu on mobile. Since the entire page is only a single page without no additional pages, no mobile menu is needed. I want to a) get rid of the mobile menu logo (the hamburger or +), and replace it with two social media icons, i.e. the Twitter and Instagram icons (just like on the desktop view). How can I do that?
  17. Site URL: https://www.drewdepinto.com/about Hi all, Looking for help with custom CSS to reduce the padding on the top of the social links block on this page (so that the icons are closer to the bottom of the photo). Thank you!
  18. Site URL: https://www.alexiasbridal.com Hello, I have a social block on my website that has been pulling in my Instagram feed for years. We have started adding Reels to our Instagram account and now Squarespace is pulling them into our block as well. I only want to populate my website with our Instagram Feed posts, NOT Instagram Reels. Is there a way to custom code for Squarespace not to pull in Reels? Thanks for any assistance.
  19. Site URL: https://alexanderfantini.com/ Hello there! I'm currently trying to change the TikTok icon in the Social Links - would love to retain animation and hover state (mask). https://alexanderfantini.com/ I can't seem to be able to target the social-url with ref tiktok. Would love to include the snippet in the Advanced > Page Header Injection of the page! Many thanks in advance! P.s. in the rest of the website I'm running this code and would love to have the same icon and size. /* TikTok Logo Social */ .header-actions-action--social [href *='tiktok']:after, .sqs-svg-icon--list [href *='tiktok']:after { content: ''; display: inline-block; width: 100%; height: 100%; background-image: url('https://api.iconify.design/ic/outline-tiktok.svg?color=black'); background-repeat: no-repeat; background-position: center center; } .header-actions-action--social [href *='tiktok']:hover:after, .sqs-svg-icon--list [href *='tiktok']:hover:after { content: ''; display: inline-block; width: 100%; height: 100%; background-image: url('https://api.iconify.design/bxl/tiktok.svg?color=white'); background-repeate: no-repeat; background-position: center center; } .header-actions-action--social [href *='tiktok'], .sqs-svg-icon--list [href *='tiktok'] { position: relative; } .header-actions-action--social [href *='tiktok'] svg, .sqs-svg-icon--list [href *='tiktok'] svg { visibility: hidden; }
  20. Site URL: https://democrp.squarespace.com/ Hello, Can you stop social links opening on the new tab/windows. You can use this password to access our demo site : 123456
  21. Site URL: http://www.goldhawke.uk Hello, fairly new here so apologies if Im getting anything wrong. Im trying to add a social link email icon to my contact page but when I try to connect a new account, there is no email icon to choose. There are others like Facebook, Twitter, Pintrest etc but why no email? What am I doing wrong? Site details below Squarespace Version 7.0– York family (Lange Photo template) Thanks
  22. Site URL: https://celery-dodecahedron-pa4f.squarespace.com/ Hello. I have received a lot of great help on this forum and am hoping to find an answer to the following question. We are on Squarespace 7.0 and we have social link icons in our header. I am looking to customize the final social link icon in our header, which is currently linked to our Spanish version of the website and whose icon currently therefore shows a link. It would be fantastic to be able to customize just that one final social link icon to be a larger box of the opposite color and the text ESP within it. Or, be able to add an image to that final social link icon, where I could then upload a custom created image of "ESP" (while also making that final social link icon bigger than the other 3 icons). Is this possible with code? Any help would be really appreciated. Site: https://celery-dodecahedron-pa4f.squarespace.com/ Password: Xolbe
  23. Guest

    Custom Social Icon

    Site URL: https://democrp.squarespace.com/ How can I customize the 3rd Social Icon in the demo site. And How can I move the Social Icons next to the navigation menu. Use is Password to access this site : 123456
  24. Site URL: https://denizdemir.photos/instagram Hi, I would like to include just the instagram link at the top of my instagram page in a social media block however when I hide the other social links it also hides them in my footer. It seems the social link block is one thing and cannot be separately designed per block? How could I exclude the other social links on my instagram page while retaining all of the social links in my footer?
  25. Site URL: https://bensfriendsofthevine.squarespace.com/ I've used this code an several sites and it works brilliantly! For some reason on this particular site, the social icons disappeared today, they were working fine yesterday! SITE: https://bensfriendsofthevine.squarespace.com/ PW: Ben Here is the code: (Settings/Advanced/code Injestion - placed in footer) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src'); var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: 0.5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style> <style> THIS IS WHERE I FOUND THIS AWESOME CODE! Credit to: https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1
  • Create New...