How to Get More Instagram Traffic By Creating Your Own Linktree

Phone with Instagram icon

Get more traffic from Instagram by creating your own linktree that automatically updates with new posts

There’s only one place to add a link on your Instagram profile, so you better make it count.

Unless of course you’re part of the 10k club with that fancy swipe up link for Instagram stories.

It’s not very easy to link to content on Instagram. There’s no way to add links to instagram posts. They only way to add a link to a post is to run and ad campaign, and that’s not feasible for this boat. If you’re in the same boat as me, I mean. And so you have to write that overused sentence: Link in bio.

But that’s not exactly ideal when you can only have one link in your profile. People don’t necessarily see your posts in chronological order thanks to the algorithm (or stalking, I suppose). Telling people to search for the title of the post on your blog is a solution of sorts, but it does add a lot of friction. Many of your readers might feel like it’s not worth the trouble (especially if your search function is not easily discovered or user-friendly on mobile devices).

So what I can do about this?

There’s a couple of services (which I have no affiliation with) that has come up with solutions to this, and I want to present them before I present my own (free) solution.

This is to help you make an informed decision about what will work best for you!

Linkin.bio

Linkin.bio screenshot
© Later / Linkin.bio

Created by Later, Linkin.Bio is a service that creates a webpage with all your instagram posts, and let’s you add a specific link for each of them.

You get a personalized url linkin.bio/yourusername, and then you add a specific link to a product or blog post on a post by post basis. When people click on the link in your bio, they see a copy of your instagram feed, and thus if they’ve been looking at one of your older posts, they can still find the exact link you were talking about back when you uploaded the post to Instagram.

This is a paid service, starting at $16/month for 2 Instagram accounts.

LinkTree

Linktr.ee takes a slightly different approach. Instead of tying links to specific posts, it let’s you add a couple of links to a profile page, so the links are easy to access.

This is how they themselves describe it on their homepage:

Linktree is a free tool for optimising your Instagram traffic, whether you’re a blogger, an artist or run a content platform.
You’ll get one bio link to house all the content you’re driving followers to.
Let your content live longer than the feed.

Linktree

Here’s an example of how it looks on LinkTree’s own Instagram.

Linktree instagram profile
Instagram link tree in action

There is a free version with Linktree, and it’s quite limited in functionality. There’s a handful of drawbacks to using it, and you can overcome those by creating your own version.

Linktree Pro costs 6$ a month. See a breakdown of free vs pro features.

I was actually about to sign up for linktree myself, when I realized: I can make this even better on my own! (I was only further convinced this was a good idea, when a few days later linktree went down (temporarily), and lots of bloggers were freaking out).

The Benefits of creating your own link tree

  • Your own site, rather than the service, gets all the landing page traffic.
  • You can make the linktree automatically update with your latest posts, saving you a lot of time in the long run (I’ll show you how). You can just set it and forget it!
  • The link in your bio features your own domain, not theirs. You’ll only be advertising yourself.
  • You’re able to fully customize the page how you want.
  • You won’t be affected by service outages (aside from if your own host is down. Which Linktr.ee actually was for a while when I was writing this)
  • Because it’s on your own site, it’s easy to make the look and feel of the page match your brand.
  • It’s completely free.

How to create your own link tree for driving Instagram traffic

Now, I’m a long time WordPress user, so the tutorial will focus on how to create an automatic link tree in WordPress. The overall concept and idea can easily be transferred to other blogging platforms.

The automatic part, however, might not be transferable. You’ll have to investigate that on your own (though my guess is, that it’s not possible on platforms like SquareSpace and Blogger, while there’s a workaround for WordPress.com).

To get a sneak peek of what we’ll create in this tutorial, here’s the live version of my link tree. Remember, Instagram is a mobile app, so the linktree is designed to be viewed on a mobile devices.

Step 1

Create a new page

New page in WordPress using the block editor, Gutenberg

In this tutorial I’m using WordPress’ new block editor, also known by its codename: Gutenberg. It’s possible to get the same result in the classic editor, but it might require some extra coding know-how.

If you’re not using Gutenberg already, you can install it as a plugin right now – otherwise, you’ll get it when you update WordPress to 5.0 later this month

Add a title and create a simple permalink

Changing the permalink of a gutenberg post.

You can go with something like:

  • yourdomain.com/instagram
  • yourdomain.com/hi
  • yourdomain.com/click
  • yourdomain.com/welcome
  • yourdomain.com/start

I went with annesmiles.com/blog.

Step 2

Add multiple button blocks

This is when using the block editor becomes convenient. You’ll want to add a handful of button blocks to your page.

For now, we’re just focusing on the visual design of the page.

I’ve added the title and link to 3 of my latest posts manually. Later in this tutorial we’ll add functionality that will make the buttons automatically link to your new posts when they are published.

If you want your link tree to link to other pages, like your about page or something else your Instagram followers might find helpful, you can also add them now.

Inserting buttons and changing their style in Gutenberg

Style the buttons until they look how you want them to. You can use the build-in block styles to choose between rounded or square corners, between solid background color or just a colored outline.

If you have a specific brand color palette, use it to color your buttons.

Remember, Instagram user will be viewing your page on a smartphone the majority of the time, so you want to make sure it looks good on mobile.

Mobile preview of my Instagram linktree

TIP: To see how your page will look on mobile, follow these steps.
In the editor, press the Preview button. On the preview page, right click > Inspect (ctrl + shift + i is the Windows keyboard shortcut). In the console that pops up, click on Toggle Device Toolbar (ctrl + shift + m). Now you can see how your page will look on an iPhone, Pixel 2 and other mobile devices.

Step 3

(Optional) Add additional styling

Now, how these buttons looks on your site very much depends on your theme.

I want to fine tune the styling of my buttons using CSS. If you’re happy with the way your buttons look after step 2, just skip to next step.

Alternatively, if you’re not comfortable with CSS but good with Photoshop or Canva, you can instead design your buttons as images and upload those to your site, making the image link to the blog post.

The easiest way to add custom styling in WordPress, is to use the Customizer. It’s excellent because it lets you preview changes as you make them, and warns you if you make any breaking changes.

To open the customizer, click the Customize button with the brush icon in the top admin toolbar while previewing your page.

How to customize a wordpress page

From the left sidebar menu, select Additional CSS.

Note: The customizer also has an option to let your preview your page on Desktop, Tablet and Mobile.

Now, here’s the changes I want to make to my buttons:

  1. Each button should take up the full width of the page (this can look weird on desktop, but great on mobile)
  2. The font should be Montserrat, which I use for all headings on my site.
  3. The text should be all uppercase, which is also how I style headings on my site.
  4. With the new font, the text looks a bit big, so I slightly reduce the font size
  5. The line height also needs to be lowered slightly.

The changes I make are specific to my site, to make the look match my branding.

To achieve this, I paste the following into the Additional CSS text area.

.wp-block-button .wp-block-button__link {
	width: 100%;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8em;
	line-height: 1.3em;
}

Each line inside the curly bracket matches with the corresponding number in the list above..

Adding additional CSS via mobile preview WordPress Customizer

You can learn more about CSS and custom styling from W3Schools.

Step 4

Create shortcodes for your latest posts

Now we’re getting to the cool part – the part where we configure some code so that the buttons on your page will automatically change to the title and link of your latest post.

If you don’t want to do this, it’s okay to get off the train now. You can decide you only want the links on your page to be updated when you update them. Then you can just publish the page now, and add the permalink to your Instagram profile.


Still here?

Okay, let’s get to it.

If you’ve never added code to your WordPress Installation, and the name functions.php means nothing to you, you’ll want to start with installing the Code Snippets plugin. It’s a plugin that provides a user friendly interface for adding code to your WordPress installation. I use it anyway, as it makes it easy to organize and troubleshoot custom code.

Reminder: It’s always a good idea to make a backup of your site before making any changes. Actually, it’s a good idea to back up your site, period.

If you accidentally add invalid code to the code snippets plugin, follow these steps to deactivate the villainous snippet.

Step 4.1

Create a new snippet

From the code snippet admin menu (look for the scissor in the admin menu on the left), add a new snippet. Give the snippet a name.

I call mine “Latest Posts Shortcodes”.

Adding a new code snippet

Paste the following code into your snippet. You can save it, but don’t activate it just yet.

function my_latestpost_1 (){
  	$getpost = get_posts( array('number' => 1) );
	$getpost = $getpost[0];
	$title = $getpost->post_title ;
	$link = get_permalink($getpost->ID);
}
add_shortcode('latest1', 'my_latestpost_1');

Step 4.2

Add button HTML

Go back to the page with the buttons you created earlier. Select your first button block, and open the “More options”-menu (vertical ellipsis). Select edit as html.

This is how my html looks.

<div class="wp-block-button aligncenter is-style-squared"><a class="wp-block-button__link has-background has-red-background-color" href="http://annesmiles.com/12-sec-gratitude-5/">12 Seconds of Gratitude (No. 5)</a></div>

Your code will not be identical as you’ve styled it your own way, but there should be some similarities.

We’ll use this to create the shortcode. A shortcode is a form of code shortcut. It’s a way to insert specific code to a blog post that can do more than basic html.

Follow the next steps carefully. It’s important all double and single quotation marks are placed correctly, as even tiny errors can make the code invalid. But don’t worry, I’ll walk you through it.

  1. Add a single quotation mark  at the beginning and end of your html.
  2. Remove the link from your code (http://annesmiles.com/12-sec-gratitude-5/ in mine). Keep the double quotes and add 2 single quotes between them.
  3. Between the single quotes you just added, write: . $link .
  4. Remove the post title from your code (12 second of gratitude (No. 5) in mine). Add to single quotes in its place.
  5. Between the single quotes you just added, write: . $title .
  6. Add the very beginning of your code, write: return 
  7. Add the very end of you code, add a semicolon.

This how my transformed code looks now:

return '<div class="wp-block-button aligncenter is-style-squared"><a class="wp-block-button__link has-background has-red-background-color" href="' . $link . '">' . $title . '</a></div>';

Step 4.3

Add your button code to the shortcode

Copy your edited code into the snippet on a new line after $link = get_permalink($getpost->ID); and before the closing curly bracket.

Result:

function my_latestpost_1 (){
  	$getpost = get_posts( array('number' => 1) );
	$getpost = $getpost[0];
	$title = $getpost->post_title ;
	$link = get_permalink($getpost->ID);
	return '<div class="wp-block-button aligncenter is-style-squared"><a class="wp-block-button__link has-background has-red-background-color" href="' . $link . '">' . $title . '</a></div>';
}
add_shortcode('latest1', 'my_latestpost_1');

Save and activate the snippet.

Q: Why Can’t I just copy your code from above?

A: You can, but the buttons will not end up looking like you want them to! Depending on your theme, the way the buttons will look on your site will vary. That’s why you had to customize the buttons to your liking in the beginning of this tutorial. This way you can make sure the buttons you create will look good on your site.

Step 4.4

Check your shortcode

Now, let’s replace your first button with the fancy shortcode you just created!

Go back to the page with your buttons. Below your first button, add a shortcode block and write latest1 in square brackets, like this:

adding a shortcode in the shortcode block in Gutenberg

Preview the page. The two first buttons look identical!

The only difference is, the one created by the shortcode will automatically update so it always shows the title of and link to your latest post.

How cool is that?!

You can now delete the first non-shortcode button.

Step 4.5

Create additional shortcodes

Repeat step 4.1 to 4.4 for each additional post-button you want in your linktree.

You’ll just have to make a small adjustment:

  1. For the second latest post, substitute the four 1’s with 2’s and the 0 with a 1 in the code snippet. In the shortcode block, you’ll also change the 1 to a 2
  2. For the third latest post, substitute the four 1’s with 3’s and 0 with a 2. In the shortcode block, change the 1 to a 3

Follow the same pattern to create additional shortcodes.

Step 5

Finish up and publish your page

Congratulations, your page is ready to publish!

So hit that pretty button and share your new page with the world.

Good Witch Grace GIF by Hallmark Channel - Find & Share on GIPHY

Step 6

Add the permalink to your instagram bio

Don’t forget to update the description of your Instagram profile with a new link to your link tree.

Here’s a GIF of my Instagram linktree in use:

GIF showing my Instagram linktree for driving traffic
Instagram linktree for driving traffic to my blog

You can see the live version of it here and on my Instagram profile.


If you run into any problems, or have a question, you can leave a comment below and I’ll be ready to help you.

If you found this tutorial helpful, I’d appreciate if you would share it!

Gif that says lots of love, Anne xx

Since you made it to the end, you may as well follow me on Instagram – but their algorithm is a bit of a mystery, so you can sign up to the newsletter to not miss out on the best posts! ✨

optimized pinterest image
optimized pinterest image
/
Get more traffic from Instagram by creating a linktree that optimizes your Instagram traffic and automatically updates with the latest posts from your blog. #instagram #blogging #blogtips

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 Comments

  • Anne, this is amazing!!! Thank you so much for such detailed guide. I’ll make sure to create such page for myself as well. I’ve been using linktree for a while now and sometimes I would forget to include the newest link, so the automated solution sounds perfect. Definitely sharing this post with everyone! Thanks again. x

    – Leta | http://www.thenerdyme.com

    • Oh thank you Leta!! I tried linktree and get frustrated by having to update it every time (because I kept forgetting about it, or not getting around to it before days after publish) – thought there must be a better solution, and I think I found it. Let me know if you run to any issues with the tutorial – I hope I’ve included enough detail to make it easy to follow, but I could have guessed wrong x