How to Make a Custom Link In Bio for Instagram on your Squarespace Website
Last Updated June 2024
You’ve worked hard on your Instagram feed, made the reels (or not) and engaged with your followers, now they’re ready to take the next step in your relationship.
But, then they click on the link in your bio and are less than impressed. We all know that first impressions count, so we’re going to level up a bit and create a custom Link in Bio for your Instagram page using Squarespace!
You may have seen, or are familiar with, Milkshake, Linkin.Bio, Linktree, Canva etc. They’re all great and mostly free. However, for a more professional on-brand experience that helps direct your visitors where you want to go, a custom page can be created right on your Squarespace website!
This is also fantastic for SEO. It provides another opportunity to bring traffic to your website (bonus!), you can see via your Squarespace analytics where people are going after they click on your Instagram Link, and it keeps them on your website!
Let’s get started!
Step 1: Start a Blank Page in Your Not Linked Section
In your dashboard under ‘Pages’, go to the 'Not Linked’ section and start a new Blank page.
Next, you’re going to name your Page Title (this will show as your page name in the tabs), and your Navigation Title (will show in your dashboard on the left) and then adjust your URL slug (will show in the search bar). I normally name the page ‘Links’, but you could also do ‘start here, ‘hello’ , ‘welcome’ or similar.
Example: My Instagram landing page is www.birchandbuddesign.com/links
Step 2: Hide Your Page From Search Results
Next, in the same page settings, head to the SEO panel toggle on ‘Hide Page from Search Results’.
We only want Google to crawl and index pages which are relevant to our content and SEO, and useful to the user. This page is not, so it’s better to hide pages with less than 500 words and which are ‘extras’.
Step 3: Start Adding Your Content
You’ll open ‘Edit Mode’ on your new page and start adding your content. You can add a photo of you or something relevant to your brand, some welcome text below it introducing how you can help, and then add your buttons. You may choose to just link text, but if you use buttons, you can choose which size you want depending on how you have them styled.
Note: If you make any changes within the Design panel with colour or size on this page, it will change site-wide. This is why we use CSS to adjust the size later.
What should you include in your links?
It’s up to you and dependent on your website goals, but I would recommend no more than six links so as not to overwhelm your visitors.
Don’t forget, that these are easily updated depending on what is going on in your business and what you reference in your posts.
Some ideas:
Schedule a call or Contact Page
Book a Class or Attend an Event
Your Services page
Current Promotion / Shop
Latest blog post you’ve referenced
Facebook group
Your latest freebie or Newsletter Sign Up
Course you just launched
Your Homepage
You may also want to add your Social Block (below) to share your other social platforms.
Tip: I would also keep everything centre-aligned and you can use spacer blocks in 7.0 if you like. To see what it would look like on mobile, click on the mobile view icon across the top.
In 7.1, change your Content Width to S (small) and view it on mobile.
So, now you could save and be done with it. You have your personalized page ready to go. However, we’re going to take it a few steps further. We now have the opportunity to customize it further with a bit of custom code.
Next I’ll cover how to:
Turn your photo into a circle with CSS (update: you can now use the native shape block for this)
Make all your buttons the same size for consistency, regardless of the size of the text (update: this is now available in Fluid Engine 7.1 using ‘Fill’)
Hide your header and footer so it looks clean and isn’t distracting (update: now available on 7.1 without code!)
Step 4: Download the Squarespace Block Identifier
If you have not already downloaded this useful Chrome extension tool, go do that asap. This is gold for helping to identify the names Squarespace gives its blocks. You can do so here. See it in action on my previous blog post, 6 Must-Have Codes for your Squarespace Website.
Step 5: Paste Your Custom Code
Update: Most of this is now natively in Squarespace without code on 7.1! Skip to Option 3 to hide your header and footer.
This is where the fun happens. You can decide to add any of the following. The most important is the button size as that keeps the look clean and organized.
Head over to your CSS panel. You can find this under Design > Custom CSS or hit /css on your keyboard.
Click on the Block Identifier extension you just downloaded to your toolbar. This will display #block id’s throughout the page for each block on the page (photos, spacer bars, buttons, etc). We are going to use these #blockid’s in the custom CSS. Check out the photo below for a visual.
You may want to COPY AND PASTE the code below in your CSS box first. Then, you’re going to copy the long #blockid for the image and paste it in place of ‘#blockid’ placeholder I have.
Remember, where you see #blockid, you are going to copy and paste the full Block ID shown for your block (in this case, the photo).
Option 1: Crop your photo into a circle
Update: This is now available through Design > Shapes section of the style editor in Squarespace 7.1
//crop photo to circle//
#blockid img {
border-radius: 50%;
}
//end photo crop//Want to make an arched photo instead? Paste this code (or now you can adjust in the Image style under Shape!):
//crop photo into arch//
#blockid img {
border-top-left-radius: 50% 40% !important;
border-top-right-radius: 50% 40% !important;
}
//end photo crop//
Option 2: Make buttons all the same size
Update: this is now available in Squarespace 7.1 Fluid Engine editor. Use the ‘Fill’ option for buttons and re-size so they are all the same length and width.
Next, we’re going to ensure that all buttons are the same size. If you are using small buttons, you’ll type small for small, medium for medium, and large for large. I have ‘medium’ shown in the code below.
To do this, we are going to grab the Collection Id. This is the ID for the entire page and you’ll find this at the very top of the screen (mine is yellow in the photo above).
Copy & Paste the code below in your CSS panel
Then, copy and paste the entire Collection ID block and replace it with my placeholder #collectionid text
Note: The 75% is relative to the size of the screen. You may adjust as you like depending on how wide you want your button to show up in relation to the screen size.
//all buttons same size//
#collectionid {
.sqs-block-button .sqs-block-button-element--medium {
width: 75%;
}
}
//end buttons same size//BONUS TIP //
Option 3: Remove the header & footer on this page only
Updated June 2024: In Squarespace 7.1 you can now Hide the Header and Footer without code in the individual page settings. Click on Navigation and then toggle it on or off. I’m not sure if this is available for 7.0, so I have left the code below.
I like this because it helps direct your visitors only to the pages you want to funnel them to rather than getting distracted by your footer and navigation options. This is also great for sales pages.
FOR EACH PAGE YOU CAN CLICK ON THE GEAR FOR THE PAGE SETTINGS, OPEN NAVIGATION, AND THEN TOGGLE ON/OFF YOUR HEADER AND FOOTER.
Note: you will need the Squarespace Business plan or higher to use code injection to hide your header and footer.
To do this, ensure you have saved the Custom CSS you just pasted.
Now go back to edit mode for the page, click on the gear icon, and then open Settings of that page. Click on ‘Advanced’ and paste the below code into the code injection box and save.
If you’re on version 7.0, paste:
/* Remove Header Footer */
<style>.Header, .Footer, .Mobile-bar{display:none !important; }</style>If you’re on version 7.1, paste:
<style>.header, #footer-sections {display:none!important;}</style>
Step 6: Add Your Link to Instagram!
That’s it! Now you have a customized link in bio for Instagram or your Facebook business page. To use it, go to your live website (not your Squarespace domain) and add the URL slug you created.
Eg. www.birchandbuddesign.com/links Copy your URL and head to Instagram and paste your link!
HOW DID YOU DO? IF YOU HAVE ANY QUESTIONS, FEEL FREE TO COMMENT BELOW!
