If you’re trying to grab as much traffic to your website from social media as possible, this post is for your. LinkTree is a free landing page builder that displays your links in a mobile-friendly format that’s perfect for social media. You’ve definitely seen these in Instagram bios, TikTok profiles, and so on. However, did you know you can create your own LinkTree?
Having all of your links on one easy-to-see page is especially valuable on social media where real estate is hard to come by. By making this page on your own site, you have a lot of benefits:
- Greater control over the design
- You’re not directing traffic to a third-party website
- Easily swap out links
- Build brand awareness
Think of it this way: why give LinkTree so much traffic from your social media when you could have all of your social profiles driving traffic to your own site?
The good news is it’s super easy to create your own LinkTree on your blog or website, and you don’t need any fancy HTML or CSS skills. In this guide, I’ll share the codes I’ve written to create a mobile-friendly link page on your own website. You’ve got this ✨
Create Your Own LinkTree Video Walkthrough
Follow along for some extra help getting things set up with your custom link page.
What Makes a Good Link Page?
To get started, let’s talk about what you should have on a good link page. You can’t just slap together any old blog page and call it a link page. At least, you shouldn’t. You need the following:
- A simple URL
- Mobile-friendly links and text
- Bio image and text
- Simplified theme
Simple, right? I told you it wasn’t complicated. Let’s jump into the tutorial. To see an example, check out my own LinkTree page.
Create Your Own LinkTree Tutorial (8 Steps)
To start, log into your website. For this tutorial, I’ll be showing you how I added a LinkTree page to my WordPress site. If you use another platform, I’ll try to link to similar resources. The same code will apply no matter the platform you use!
Step 1: Add a new page.
This is straightforward. On WordPress, you do this by clicking Pages > Add New. On Squarespace and other platforms, I assume this is the same.
Step 2. Edit your page slug.
Your slug is not the same as the page name. Your slug is what appears after the www.website.com/your-slug-here. In this case, you want to keep it simple. I recommend using something like “links” or “instagram” so you’ll remember it quickly and easily.
In WordPress, you can edit your URL slug in the permalink section or through the Yoast SEO plugin. In Squarespace, you do this under the “Basics” tab.
Step 3. Add a title and image.
Next, you’ll want to add a title on your page. This is what your name is officially called (though it can be different from the slug URL). I like to be quirky and fun, so my page is titled “Hi Instagram!” Feel free to steal it or use a similar variation.
Below this, I decided to add a small bio image. You can totally skip this or put it below your links, the choice is up to you. I suggest using a circular image because it just looks a bit more polished, and it reminds me of social media. You can do that in Canva, or using this online tool. I added some hand drawn stars to mine in Photoshop because, like I said, I’m trying to be quirky and fun.
Step 4. Add some custom CSS.
Your DIY LinkTree wouldn’t be anything if it didn’t have any links! Alright, this is where the coding comes in. Yes, you can totally just add a list of links formatted in your usual link style, but these don’t really have that styled LinkTree look that looks so great on mobile.
Alright, save a draft of your page and go to your Appearance tab on WordPress. I always just open this in a new window/tab, but you can use the same window as long as you save.
We need to add custom CSS, so instead of opening our Theme Editor, we’ll use the customization shortcut. You can find this in Appearance > Customize > Custom CSS. Here’s where you find it on Squarespace.
Now’s the fun part. You’re going to have to add some custom CSS, which stands for Cascading Style Sheet. Essentially, this is what makes your HTML look styled and polished. For this tutorial, we’ll be adding some custom block links because they’re easy to customize and they look great on mobile. This is what LinkTree uses, and you can make them on your own.
Paste the following code into your custom CSS box:
5. Customize your CSS.
Now’s the fun part. You don’t need to read HTML/CSS to get the basics of how to customize the code above. What you have is the exact style I use, and you can adjust it for your own website design. Here are some easy tips:
- Font-size: This is the font size, obviously. Keep it over 15 px to make sure it’s easy to read on mobile.
- Border: Here you can change the border style, size, and color.
- Color: When choosing CSS colors, you can simply write a basic color like “red,” “black,” or whatever, or you can get super specific with a HEX code. The HEX code is a 6-digit code like #000000 (black) or #0800FF (blue).
- Background-color: Of course, this is the background color.
- Padding: This is how much inner space there is between the content (text) and the border.
- Margin: The amount of space between objects or links. AKA the outer space.
Next, let’s talk about which sections of the above code. The first one is .instagram which refers to the entire div element. You can picture this as a giant box surrounding the entire link structure, like below.
The second section is .instagram a: link. This is the link style that will override your current link style. If you delete this section, your links will appear the same as they do on your blog normally, which probably isn’t what you want.
The third section is .instagram a:visited. This is the style for a link that’s been visited already. You’ll probably want it to be the same as the above section, so I wouldn’t adjust much unless you decide you want these links to have a different background color or additional styles.
The fourth section is .instagram a:hover. These are the styles that will only appear when the mouse hovers over the link. It won’t make much of a difference on mobile since you can’t really hover on a smartphone or tablet, but they will show up on your desktop or laptop. For this, I’ve only changed the background color. You might increase the text size, change the font color, or add any special effects like bold text or a new border. To do this, you’ll need to add another attribute in this additional CSS section. I think simple is best, so I’m just leaving it with the changing background color.
You can change the text from Instagram to anything you want, but you’ll need to change all of the sections. You can’t just change one. In addition, make sure there isn’t already another div or class on your current stylesheet that has that name. For example, “nav” is commonly used for your navigation, so don’t use anything similar to that or “link.”
Step 6. Add your links.
The hard part is over! Save your custom CSS and head back to the page we created earlier. Add a new custom HTML section. You can do this by switching it from Rich Text to HTML in the old WordPress editor or by adding a custom HTML block in the Block editor. On Squarespace, use the Code Injection feature.
Make sure if you changed the class name from Instagram to something else that you swap that text in the code above with your own name. Now, customize the links and add any additional ones you might need.
Step 7. Add your bio.
Finally, add any finishing touches. I personally added a short bio to the end because I think this is a great place to add some personality. Instagram limits your bio, so this is another chance to introduce yourself to your followers.
Step 8. Save and publish.
That’s it! Now that you’ve got everything on your page, it’s time to save and publish. You’ll probably need to go back and edit your custom CSS to finalize your color choices and styles, but that’s all there is to it.
If possible, you might want to disable your header and sidebar to limit what appears on the page. I decided to keep both of mine because I have a small header image and I think my sidebar is a good addition. This forum page explains how to do this.
Make the Most of Your Social Media Traffic
Woohoo! Now you know how to create your own LinkTree, no coding skills required.
I know it might seem like a bit of a hassle, but it’s worth it for those sweet, sweet page views you’ll get from Instagram and beyond. If you run into any problems, feel free to let me know in the comments and I’ll try to help you out. Or, for faster results, DM me on Instagram.
That’s how to create your own LinkTree to increase traffic on your website. You’ve totally got this!
⚡️ Still need a website? Learn how to set up a self-hosted blog in minutes.
Like this post? Save it on Pinterest 👇🏻
