When Instagram came on the scene, everyone thought it was awesome. Fast forward a ways and it became apparent very quickly that one of the short falls of the platform was that while you could include a link in your post, you *couldn’t* make it clickable. Further, within the app, you can’t highlight text to copy, cut, and paste.

I’m sure in Instagram’s wisdom, they thought (and are standing by the decision) that no links and no copy, cut, and paste would cut down on the spam we might see in our feeds. But with their introduction of ads, and the inability to filter them out, we still get spammed with ads.

And people love Instagram. It’s one of the best social networks to help you gain traffic and build an audience. But let’s be honest, it CAN be difficult to convert traffic into users, clients, and customers. And so in order to keep up from fleeing to another app, they gave us the single link in our bio section. And we have to make it count.

But what this means is that every time you want to link to something different you have to change the link in your bio manually. It can get to be kind of a pain.

Enter Linktree

Then a company called Linktree had the great idea to allow you to build a landing page of links, and then you use THAT page as your link in your bio. Instantly, you go from a single link to multiples. And if you’re willing to pay the monthly fee – unlimited links. It’s admittedly clever, but it has some drawbacks.

  1. You miss out on the ability to link to your website if you have one. This means you miss out on the backlinking that helps you build your brand.
  2. Your style and design options are limited.
  3. You can’t track clicks, add analytics, or pixels, etc.
  4. To get “advanced” features like linking to video or link scheduling, you have to pay a monthly fee.

But it’s pretty simple to build your own page if you have your own website and are using the Gutenberg Blocks.

How to Build Your Own Linktr.ee Using Gutenberg Blocks

 

  1. Create a new page and give it a title that makes sense, like “instagram” or even “ig”.
    • Under Page Attributes, makes sure your template is “blank Page” so you don’t end up with weird header and footer issues.
    • Publish your page or save it as a draft.
  2. Ensure that the gear/cog is selected at the top right hand side.
  3. Click the + sign at the top to add a ‘Columns’ block.
    • Select a 3 column structure.
    • Select the middle column and set the width to 680px.
  4. Click the + sign in the middle column, and select ‘Image’. This will be your profile image.
    • On the Block tab (in the right hand menu):
      1. Upload or select add the image.
      2. Set the Style to Rounded.
      3. Set the Image size to “thumbnail”
      4. Set the Image dimensions to 150 x 150 (or 100 x 100 If you really want to mimic Linktree.)
      5. Click on the block back in the main working area, and select Alignment and set to Align Center.
  5. In the same middle column, click the gray + sign to create another block. Add the ‘Paragraph’ module. This will hold Instagram handle.
    • Add your handle. For example, @PhoenixWebworks
    • Click the button to Align Center.
  6. In the same middle column, click the gray + sign to create another block. Add the ‘Buttons’ block. This will be the start of your links.
    • Add the text for your link. Example: ‘New Pattern’, or ‘Download my Widget’ or ‘Get the Ebook’
    • Click the link button and add the url you want people to go to.
    • Click on the block in the main working area, and select Alignment and set to Align Center.
    • In the right hand menu:
      1. Change the color settings (text and background) to match your site.
      2. Set the Border radius to 0 if you do not want buttons with rounded edges.
      3. Under Link Settings click Open in new tab (you want this ‘on’)
      4. Under Advanced. Scroll down to Additional CSS Class(es) and add: ‘btn_100’

        Note: You can make the button/link creation easier by just duplicating the button you created and then changing the text and link.

        ALSO!!! I found it difficult to add the buttons after the Paragraph Block. It was easier to create the buttons between the Profile Image and the Instagram handle, and then use the up/down arrows to place the button where I wanted it.

  7. Finally, once you are done with your page and have Saved and published it. Go to Appearance-> Customize. Under Additional CSS, add the following code:
    .btn_100, .btn_100 a {	width: 100%!important;	max-width: 680px;}

    This will make your buttons all expand to the width of the container and be uniform across all of them – just like you see on Linktree.  

I hope this has been helpful for you. Post your results below and let me see what you’ve done!!