Use Squarespace to Create Instagram Links Page

Ever wondered how to create a branded links section on your Instagram page? There are services like Linktree, which are really helpful, and I have used in the past, however to achieve a cohesive branded look you have to upgrade to a paid version. Well, I thought I would try and save some money by using a resource I already have - my website!

So here’s a quick little tutorial to create your very own on your website.

Let’s go!


Creating an Instagram links page

VIDEO TUTORIAL HERE

1. Add new page called ‘instagram’

2. Next to ‘New Page’ click the gear icon and rename the page to Instagram.

instagram links 1.jpg


3. Select the page, hover over the black page and click ‘Edit’ in the black bar along the top.

4. Move your curser over the blank page until you see a thick black line, click the circle at the left hand side to bring up the Blocks menu. Select Button from the top section.


5. Insert the button you want on the text.  Select the style of button - small, medium or large - and change the alignment to centre.

6. Finally you want to link up the correct page. Click the gear, then select page from the menu.  Either scroll or search to find the correct page. Click save. Then click apply.

7. Repeat this process with all of the links you want to use.  About 5 is a good limit. When you’re happy you’ve added all the links, click save.

8. Check your work by selecting mobile view from the top of your page builder section.  This looks good, and it will work, but we can make it better if we get all of these buttons the same width.

10. Maximise the webpage in Squarespace by clicking the arrow in the top left corner, then type Ctrl+U.  That will bring up the page code - don’t freak out! Type Ctrl+F and then search ‘body’.

11. That will bring you to a section that reads ‘ <body id=”collection-5d611d5477d4ff0001f98ab7” you want to copy the part inside the quotation marks.

instagram links 10.jpg

12. Finally you will return to the page editor and select Design from the side menu.  Select Custom CSS at the bottom and paste in the code below, using the collection id you just saved in the section shown.  The code below is for the small button. If you used a medium or large, simple replace the word small with medium or large - using all small case.  Click save, and you’re good to go!


//**BUTTONS INSTAGRAM**//
#insert your collection id here {
  .sqs-block-button .sqs-block-button-element--small { 
  min-width: 85%;
}
}

13. You can check your work again by selecting mobile view….perfect!

Watch the video tutorial

//**BUTTONS INSTAGRAM**//
#insert your collection id here {
  .sqs-block-button .sqs-block-button-element--small { 
  min-width: 85%;
}
}

Let me know how you got on in the comments below, or even drop me a link to your Instagram page so I can check out your links section!