How To Create a Custom, Trackable Instagram (Link in Bio) Link Landing Page | Sarah Trafford | Skillshare

How To Create a Custom, Trackable Instagram (Link in Bio) Link Landing Page

Sarah Trafford, Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (18m)
    • 1. How To Create An Instagram Link Page Intro

      1:02
    • 2. What You'll Need to Create An Instagram Link Page

      3:00
    • 3. Setting Up Your HTML File & Design

      7:31
    • 4. Tracking Your Link Clicks

      3:51
    • 5. Making Your Link Page Live

      3:05

About This Class

You know that link in your instagram bio that you need to link to ALL your posts but it's only ONE link? There are solutions like link tree, but why use their branding. You should have your own branded page and be able to see how those links perform! This requires limited knowledge about code, it's pretty basic and if you have any questions please ask!

Links from the video:

Link Tracker - https://linktrack.info/
FTP - https://filezilla-project.org/

View a live version on my Instagram http://instagram.com/sarahtypes

Transcripts

1. How To Create An Instagram Link Page Intro: in this course, I'm going to teach you how to create one of those linked pages you find in the bio oven. Instagram er I'm using the vehicle. Graffiti cite as an example, you can see Link Tree has this type of service. Unfortunately, get their logo and you aren't able to change very much in the page. So I'm gonna show you how you can make your own And it will look similar to what I have on my profile. Just gonna bring up the stereotypes Instagram profile and click on the link in my bio. It's also good because you have the branded link. So minds, a serotype stopped shop and when it loads, I have my logo up there. I also have my links, and I have link trackers on all of the buttons and this will give me some insight into which links are performing better. Don't need to be an expert at quoting Ah, basic background is helpful but not necessary. I'm gonna show you every step of the way on how you can create this yourself and upload it to your instagram profile. 2. What You'll Need to Create An Instagram Link Page: Okay, so first things first, you will need a domain. You can go to many different domain cos I am using dream host at the moment. So I'm at dream host dot com. You can use their search bar on the main page to find a domain that works with your profile if it's taken. There are other options that they suggest with different endings. Instead of dot com. I actually grabbed Sarah type stocked shop just to put it in my bio on Instagram, so it's shorter than the full link. You'll also need hosting. As you can see, I'm going through their hosting and it's about $10 a month. There are tons of different ways you can get hosting from different sites. Um, if you don't know how to set up hosting or a domain, I suggest you check out my other skill share video on how to create a wedding website. In the beginning stages of that course, I show you how to actually set up the hosting and domain for your account on Go Daddy. The next thing you'll need is some sort of FTP client. I use file Zillah. It's free, and it's pretty easy to use. So if you just goto file zilla dash project dot org's, you can download their free software, and then you can hook it up to your FTP by grabbing your user name and password from the hosting you just purchased. Sometimes there's also file managers on your hosting account. So if this is too overwhelming, you can also just log into your hosting and then find the file manager. And you could always upload the file that you will be making in this course Teoh that site there you will also be needing ah, free account from link track dot invoke. This will allow you to track all the links that you'll put for your buttons on your landing page, And this will give you some analytics and insight into how the buttons air performing and which ones are doing better. And in case you don't have one already, you'll also need instagram account so you can stick this link in the bio and have a landing page with just your most important links. The last thing you'll need is some sort of text editor, so you can view the file I'm going to give you to download and edit the HD emails, you can create your own links. A free example that you probably already have is tech said it on your apple. If you open that and go to preferences and you are on the new document tab, I would just check off wrap text and then you want to go to the open in safe tab and make sure you have the display HTML files checked. This way you get the code and not what it would look like on a Web browser. And don't worry, I know this looks overwhelming, but I'm gonna go through it with you, line by line, step by step so that you understand what everything means and you get a working site. 3. Setting Up Your HTML File & Design: Okay. So, like I said, you can open this in text at it. But since I have Dreamweaver, I'm going to use Dreamweaver. If you have a creative cloud license, you can also download Dreamweaver using that license. It's just gonna be a little bit easier for me to show you the code because it has different colors for different classes, etcetera instead of text edit, which is just black and white. Do you want to make sure that you don't touch the stuff I'm highlighting right now? This is necessary. This one line pretty much skills your browser down so that it is viewable on mobile, and it doesn't just zoom out to a big page, But you can change the stuff I have here in between the title takes. This is where you want to put the title of your page so you can change that to your own name. Underneath it, I have a link for Google fonts. If you don't like the font that I have with this example, it's easy to create whatever one you want. If you go to google fonts dot com, I usually just google Google fonts to get to the webpage But it's Fahnestock google dot com . You can search through their funds. They have a lot of different examples. I'm just gonna quickly filter through to a sand Sarah font, and I'm going to just choose roboto condensed. If you just click the plus arrow, it will add it to your library, which will allow you to use it in your code. So once you click that, you'll see the will pop up at the bottom. If you just open that, you'll find the embed code as well as the font. Wait. So if you click on customized, you can select whatever font wait you want to use and you'll see that it changes your load time. So adding more funds will create. Have your load on the site. So I'm just gonna take off the light and the regular, and then I'm going to copy the embed code, the 1st 1 and this is the one that is going to replace the coat I just showed you on the Dreamweaver page. So I'm just gonna click under it to show you that it's the same thing. Gonna pay. Sit in there and you can see now I have two different bonds there, so I'm just gonna get rid of one. So it's only had to do to change the find, except that you will have to add it in the CSS, and I will show you that as well. So this stuff that I'm scrolling by now is your CSS code. Normally, this isn't a separate file, but because this is such a small site, I'm just keeping it all on one page for you. So, um, the first chunk is your background image. So I'm just gonna show you what it looks like currently some opening this up in safari and just re sizing it down. So it looks more like a phone and you can see I have a kind of wave ocean wave background here, so that's in the HTML CSS. You can see I have background and then the name of the image file so you can replace this background with your own. If you just make sure that you place the file in the same spot that I have the file in, you can even throw in a file with the same name BG dot jp G and replaced the old one and then you don't have to change the code at all. The code underneath it basically just says that stretch this image. So if it's the whole page next you have the CSS for the button. This has the radius of the edges, so it's not totally sharp around the edges. It changes the font style to upper case, and what I highlighted just there is the CSS for the Google fonts. So if I go back to Google finds you'll see there's another piece of code underneath the first piece of code, you're gonna want to copy that and then put that in the button. CSS. So just highlight what I had and replace it with the new one. You can play around with this and change stuff like the font size, the padding, all that stuff. Don't be scared if you mess it up. Just download the new files again from skill share and start all over. One thing you want to change are the button colors you'll want them to fit with your branding Minor, currently an ombre pink a motif. So if you want to do that, I'll show you how to do that or you can just pick one color and apply that to all the buttons. So if you want to go with Ombre, look, I suggest going to a site called 0 to 2 55 dot com. Here you can enter in a hex color or pick a random color, and then you're gonna get a whole bunch of those shades that have that related to that color. So just pick where you want it to start or where you want it to end as far as the darkness and lightness and go with that color. Well, you'll notice on my site that the buttons are somewhat transparent, and that's because I have a background image, so I kind of wanted it to show through. So I'm going to use an RGB a color code instead of a hex code so that it has some transparency. I'm just pasting in the hex code I got from that hombre shade generator, and then I'm taking the slider and moving it for how, what percentage I want the opacity to be. I'm gonna put it at 50% and then click on the hex to RGB a button, and then it should put out the numbers that we need so you can see the bottom number. RGB A for CSS is what we need. So copy that code. Go back to Dreamweaver and then paste it in between, um, the colon and the semi colon. You want to do this for all of the seven buttons? Um, depending on what colors you want And if you want to be the same, you can just put in the same code for each button. If you happen to change the background color to something that doesn't work with the color of the font that I have there now, you can always change that. I'm just changing the font size now to show you I put up to 50 pixels and then the font color is under color. So I'm just trying out some things it doesn't hurt to try. You can always Apple Z or control Z to get back to what it waas So six efs is white, so I'm just going to put that in and see what it looks like. One thing you'll want to pay attention to is when I scroll down through the CSS, you'll see an image tag. So I am G and then in brackets, you have the width and the alignment, as well as how much space is on the top or bottom. So the max width is important because your image size might be different than mine. In your download example, I'm using the skill share logo, so I put the max with at 400 pixels because it's a wide image that isn't very tall. But if you have a taller image, you might want to put the max with at 200 pixels, and I'm also adding more spacing to the top and bottom of the logo by changing the margin bottom and top. This just gives it a little breathing room before the buttons. 4. Tracking Your Link Clicks: Okay, so the next step is actually putting in length of those buttons to work. I suggest a super easy tool called Link Track. There are many ways to track your links, including free tools like Google Analytics. Those are a little bit complicated and would require whole skill share course of their own . So I'm just going to use something that's free and very, very easy to use. You can create your own free counseling track. I'm gonna show you in my account how to create a link. But first, I'm actually going to create a link group because you may want to track other links in the futures list. Keeps things organized. I've already created a group called Skill Share, but you want to create your own. You just click Add Group and put the name of description in and click add. So now, if you click on the links on the drop down and then click, make a new link. This is where you put the address of where you want that button to take the user to, and then the title. This is so you can see what it's called, and you can add notes if you want Teoh, and then you want to select the group that you're gonna put it in and then just click save link. Now, if you go into the groups on the left hand side, you'll see the two groups I'm gonna click on the skill share grew and you'll see I have two links in here, I think the one I just made on the outside of it you can see little icons. The pencil icon allows you to edit it. And the info I karam, which is the little I with a circle, will allow you to see what the addresses and any other information So you can see the tracking link is right there. You're gonna want to, right Click that and copy link address. You're going to use this link in Dreamweaver with your think tag. So we've popped back into your text editor or Dreamweaver, whichever one you're using and you're gonna want to go to the tag that has the A space a treff, and just highlight the link I have in there and paste in the one you just copied. Now your links ready to go. You want to take change the text though, so that it reads on the button. Whatever that link is, you want them to go to one tip that is super helpful. I'm going to show you right now. I'm actually going to change that button name from something so specific to featured Link because you always have a Lincoln Instagram in your post that is different for that day and you say Lincoln Bio. So for this one, it's going to be whatever the featured link is, I'm gonna go back into that Linkin Link tracker, click on the edit button and then I'm gonna change the title Two featured post. So then I know that this is the one I want to change. And when I want to change it, I'm just gonna go into the link to input and put in the address for the new link. That way I don't have to touch the code. I just have to go into a link track and replace the old link with the new link because the link track link will stay the same and that link will still be in the code. It's just gonna redirect to a different address, depending on my newest instagram post. So now I'm gonna quickly show you what it will look like once you have some data. I just installed these links into my instagram posts just a few days ago. So if I go into groups and go into my instagram links, these are the ones that are actually live on my site right now, so you can see the total number on the far right those air. How many people have clicked and I can clearly see which two links are doing best. This is really great information. If you click on the little graphs icon, you can see Ah, little bit of a further breakdown for how the post were on a specific day. So that kind of gives you some insight into If you held a specific post that talked about a product, you can see if it actually worked and if people were clicking on it 5. Making Your Link Page Live: So once you have your changes made, you're gonna want open it in your browser from your desktop and just make sure that it works properly. And then you're gonna want open your FTP client, so I'm gonna open files illa. But if you don't want to use FTP client, you can possibly log into your hosting account. I have been able to do this and go Daddy as well as dream host. So I'm just gonna log into my dream host account and go to their FTP that is actually built in your Web browser. So from here, you can just click into your folder and upload the file or back to file zilla. You just connect to your FTP and you'll see your websites listed. So I'm going to click into serotype start shop and you'll have your files. They're all your local files are located on the left hand side so you can navigate through those folders to find the correct ones. And then you just drag that into the while on the right, the folder on the right. So I've already dragged mine over. But you can see I have two files and index dot html and on my dash links dot html. If you save the file as index dot html when you go to the address, which would be w w dot my site dot com or, in this case, serotype stop shop that is the file it's going to serve up, however, if you put it as any other name. If it's not index dot com. If it's my dash links dot com or links dot com, that is going to be after a backslash, so it will have to be sarah types dot shop slash my dash links dot html. You'll also notice if you will get my FTP that I have the beauty dot jp G file and the logo file on the same level as index file as and the Meiling stopped html file. You need to make sure that these are all in the same spot in order for it to know where to grab those files, because the path that we have in the code grabs those files from the root folder. So once that's working on your Web browser, you're gonna want to log into your instagram account on your mobile device, because or iPad because I think those the only two places you can change this and then you're gonna go to my profile and you're gonna click on edit profile, and then you're gonna enter in the web address for this link site minus serotype stop shop . And then once you click on that, you should bring yourself Teoh this page, which is the one we just created. Make sure you test out all the links and make sure everything is working before you upload it so that you don't have any frustrated users. And if you have any comments, please let me know, and I will do my best to help you. I'd love to see examples of what your link pages look like. Um, so make sure to leave those in the community area, and thanks for watching this course.