DIY Branded Social Media Landing Page

If you’re familiar with Linktree, then you probably know that not too long ago there was a fairly big issue with Instagram temporarily blocking all Linktree links. That can be a total deal breaker for trying to help people find your content - and it left a lot of ‘grammers (understandably) unhappy and skeptical of continuing to use a third party service for their social media navigation page or landing page.

So what is a business owner, blogger, or influencer like you to do?!

I stumbled upon the idea of creating a Linktree style social media landing page on your own Squarespace site while I was looking through Pinterest one night, and it didn’t take long to realize that this is absolutely the way to go. Not only is it super simple to create and avoids conflict between Instagram and third party services, but it’s totally branded the way you want it and it drives more traffic to your own website which is always a win!

 
Social Media Linktree Instagram Hack | kiara jennifer and co social media marketing and public relations
 

(Want to see my example live? Click here!)

Here’s the step-by-step that I took in creating my own Linktree hack using Squarespace:

  1. Create a New Cover Page

    To make it clean and easy to read, choose the “Card” layout. Any layout would work, but since this is intended to be viewed on a mobile device, the cleaner the better.

  2. Branding and Text

    If you have a logo, you can upload it here. It’ll upload pretty small, but we will adjust that in a later step! If you want to include any text or titles in addition to your navigation, you can enter that here as well. But remember - this is meant to be a landing page that will primarily be viewed from a mobile device so if you decide to add text, keep it short and to the point so that it doesn’t make things messy.

  3. Media

    This is where you add the background image for your page (if you want one!). You can also opt for a plain background color in a later step. This image won’t be very visible on a mobile device but it does help keep things on-brand. If you don’t have one of your own to use, you can find free stock images from websites like Pexels or Unsplash, or you can buy cute patterns or images from websites like Creative Market.

  4. Action

    This is where things get magical! Squarespace only lets you add two of their default buttons which so frustrating when you have more than two places you want to link to! Instead, we’re going to use the “Navigation” option which allows you to use up to five links - don’t worry, I’ll give you a super simple code to use to turn your links into buttons in a later step.

  5. Social Icons

    This is just a radio option that you can turn on or off depending if you want the icons on the button of the page to link back to your different social media channels. I have mine on, but you can turn them off if you prefer.

  6. Style

    One important thing to know about Squarespace cover pages is that they have their own style settings separate from the rest of your website! Any font changes or codes you add to your cover page won’t apply to the rest of your website and vice versa which allows you to get as creative as you want. These are the settings that I changed:

    Branding: I made my logo as big as the settings would allow. You can adjust it according to the size and shape of your logo so that it looks good to you!
    Background: I added a border, but this is again entirely personal preference. I chose a medium size border and made it one of the shades of pink that I use across most of my website.
    Navigation: I changed the font so that it matched the rest of my website. Remember, it doesn’t need to match but for branding purposes it creates a feeling of cohesion when it does! The navigation color is the color of the font inside of your soon-to-be buttons - not the outline of your button (the button outline color will be part of the code I will be giving you!).
    Social Icons: I just made a few minor adjustments so that my icons were visible against my background image - you can play with the settings so that they look good with whatever background you choose.

  7. Turning Your Links Into Buttons

    This is where we are going to turn your links into buttons! You’ll want to go into your cover page settings by clicking the little gear off to the right of the page name. From there, click on the “Advanced” tab.

    Next, copy and paste this code into “Page Header Code Injection” box (you can change the color by changing the “#555555” to your particular color choice - if you aren’t familiar with hex codes or don’t have a color palette nailed down, Canva has some really good combinations with codes to choose from!):

<style>
a {border: #f0d2d5 solid 2px;}
</style>

That’s it! Now you have a beautifully branded and mobile responsive social media landing page! I’d love to see yours once you get it all put together - share it to your Instagram in a post or story and tag me - @_kiarajennifer!

Until next time!

xx kiara


now that you’ve got a killer new landing page - are you ready to take your instagram game up a notch? take my (free!) 5-day Instagram Mini Course!


 

Pin Me for Later!

linktree instagram landing page social media hack diy | kiara jennifer and co social media marketing and public relations