Creating a "Linktree-style" Page for Your Instagram Bio on Your Squarespace Website
It's Time to Ditch Your LinkTree Subscription & Make Your Instagram "Link In Bio" Work For You.
If you're a business owner, influencer, or even a casual Instagram user, you're probably no stranger to writing the phrase "Click link in bio" in a caption on Instagram when you want to drive followers to a particular piece of content. Back in the "olden days" of Instagram, since it only lets us have one link in your bio, a user had to constantly update the link as you had new content.
Then came along services like Linktree and Milkshake, allowing users to create their own easy-to-change mini-mobile-friendly websites with multiple links to your newest content. Since the real estate in your Instagram bio is so limited, this seems like a great idea, right?
It totally is. But as I was updating my own Linktree, I had a thought.
"HOLD UP. Why am I paying an extra fee every month to send all of this traffic to Linktree when I should be sending it to my own website?!"
So in this post, I'm going to show you how to recreate a Linktree style page on your Squarespace website, so you can keep all of that lovely web traffic all to yourself and have a mobile-friendly page that is entirely on-brand.
This is super simple, and you can have it finished in just a few minutes.
STEP ONE: Add a New Page
Create a New Page in the 'Not Linked Section' of Your Squarespace site.
Pro-tip: Whenever I add a new page, I always update the Page Title, Navigation title, and URL Slug first thing. In this case, you'll want to make the URL Slug something short and simple like /insta.
STEP TWO: Add Your Content
Add the content you want to appear on the page. (If you are using a Squarespace 7.1 template, you will have to add a blank section to the page first, and you will want to set the section height to large.)
When it comes to content, I would suggest an image block with a logo and some buttons. We want it to look like Linktree, after all. You can also add newsletter signups, summary blocks, whatever you like.
However, for the purposes of this tutorial, I'm only going to be adding my logo and button blocks like would appear on a basic Linktree page.
STEP THREE: Add a Little CSS
Ok, you've added the content you want to add, but when you preview what the page will look like on mobile, it looks nothing like how you want it to look. So we are going to add a little CSS to style it up.
The first thing we are going to tackle with CSS is removing the header and the footer. Now we don't want to remove the header and footer on your entire site, so we are going to add the following code to the Code Injection section of your new Instagram Links Page.
Click Setting Gear Icon > Click Advanced Under page settings > Copy and Paste the appropriate code into the page header code injection.
Squarespace 7.0 (Brine) - In the header code injection for the specific page paste this code:
<style>.Header, .Footer, .Mobile-bar{display:none !important; }</style>
Squarespace 7.1- In the header code injection for the specific page past this code.
<style>
header, footer {display:none;}
</style>
And Voila! The Header and Footer on that page have disappeared.
NEXT UP: Let's resize that logo.
The logo as is doesn't look terrible, but it is taking up a lot of valuable real estate on the page. Let's fix that will a little CSS.
First, I'll use the Squarespace Block Identifier Chrome Extension to determine the block identifier for that particular image block.
Then I will copy and paste the following code into the Custom CSS section of my website.
//reduce image size insta links page
#block-ID{max-width:100px; margin: auto; margin-top:-35px; }
Pro-tip: Adjust the max-width and margin-top values to suit your design.
You can totally stop here and have a decent enough and completely functional "Link in Bio" page. But I want to take it one step further.
NEXT UP: Let's Make the Buttons a uniform width.
The buttons are currently conforming to the width of the text inside them, so let's use a little CSS to give them an equal length.
First, you want to use your block identifier to "Collection ID" for your Instagram links page.
Then copy and paste that into the Custom CSS section of your site with the following code.
Pro-Tip: You can play margin-top and width values to find what works for your design. And be sure to choose the appropriate code based on what button blocks (small, medium, large) you used.
If you are using small buttons:
//Small Buttons insta page
#collection-ID-for-that-page{.sqs-block-button-element--small { width: 80% !important; margin-top:-25px; }}
If you are using medium buttons:
//Medium Buttons insta page
#collection-ID-for-that-page{.sqs-block-button-element--medium { width: 80% !important; margin-top:-25px; }}
If you are using large buttons:
//Large Buttons insta page
#collection-ID-for-that-page{.sqs-block-button-element--large { width: 80% !important; margin-top:-25px; }}
And that's it. Easy Peasy. Now you can cancel your Linktree account and drive all that traffic to your own website.
If you have any questions, don’t hesitate to drop me a note!
Need a new website, schedule a Free, No-obligation call with me. Let’s chat.
