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 link pages you find in the bio of an Instagramer. I'm using the via calligraphy site as an example. You can see you Linktree has this type of service. Unfortunately, you get their logo and you aren't able to change very much in the page. So I'm going to show you how you can make your own, and it will look similar to what I have on my profile. I'm just going to bring up the Sarah Types' Instagram profile and click on the link and my bio. It's also good because you have the branded link. So mine says sarahtypes.shop. When it loads, I have my logo up there. I also have my links and I have link trackers on all of the buttons. This will give me some insight into which links are performing better. You don't need to be an expert at coding, basic background is helpful, but not necessary. I'm going to 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 companies. I am using DreamHost at the moment, so I'm at dreamhost.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 sarahtypes.shop just to put 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. If you don't know how to setup 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 showed you how to actually set up the hosting and domain for your account on GoDaddy. The next thing you'll need is some FTP client. I use FileZilla, it's free and it's pretty easy to use. So if you just go to FileZilla dash project dot org, you can download their free software and then you can hook it up to your FTP by grabbing your username 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 to that site there. You will also be needing a free account from linktrack.info. This will allow you to track all of the links that you'll put for your buttons on your landing page, and this will give you some analytics and insight into how all the buttons are 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 text editor so you can view the file I'm going to give you to download and edit the HTML so you can create your own links. A free example that you probably already have is TextEdit 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 and Save 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 going to 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: So like I said, you can open this in text edit. But since I have Dream weaver, I'm going to use Dream weaver if you have a Creative Cloud license, you can also download Dream weaver using that license. It's just going to 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 scales your Browser down so that 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 tags. 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 googlefonts.com, I usually just Google fonts to get to the web page, but it's fonts.google.com. You can search through their fonts. They have a lot of different examples. I'm just going to quickly filter through to a Sans Serif 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 little pop up at the bottom. If you just open that, you'll find the embed code as well as the font weights. So you click on "Customize" you can select whatever font weight you want to use, and you'll see that it changes your load time. So adding more fonts will create a heavier load on the site. So I'm just going to take off the light and the regular and then I'm going to copy the embed code. The first one, and this is the one that is going to replace the code I just showed you on the Dream weaver page. So I'm just going to click under it to show you that it's the same thing. I'm going to paste it in there, and you can see now I have two different fonts there, so I'm just going to get rid of one. So that's all I have to do to change the font, except that you will have to add it in the CSS and I'll show you that as well. So this stuff that I'm scrolling by now is your CSS code. Normally this is in a separate file, but because this is such a small site, I'm just keeping it all on one page for you. So the first chunk is your background image. So I'm just going to show you what it looks like currently. So I'm opening this up in Safari and just resizing it down so it looks more like a phone. You can see I have a ocean wave background here, so that's in the HTML CSS. You can see I've 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.JPEG and replace 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 it fits the whole page. Next you have the CSS for the button. This has the radius of the edges, so it's not totally sharper on the edges, it changes the font style to uppercase, and what I highlighted just there is the CSS for the Google fonts. So if I go back to Google fonts, you'll see there's another piece of code underneath the first piece of code. You're going to 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'll want to change are the button colors, you'll want them to fit with your branding mine are currently in opry pink 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 opry outlook, I suggest going with site called 0to255.com. Here you can enter in a hex color or pick a random color and then you're going to get a whole bunch of those shades that are 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. You'll notice on my site that the buttons are somehow transparent, and that's because they have a background image. So I wanted it to show through. So I'm going to use an RGBA color-code instead of a hex code so that it has some transparency. So I'm just pasting in the hex code I got from that opry shade generator. Then I'm taking the slider and moving it for what percentage I want the opacity to be. I'm going to put it at 50 percent and then click on the "hex to RGBA" button, and then it should put out the numbers that we need. So you can see the bottom number, RGBA for CSS is what we need. So copy that code, go back to Dream weaver and then paste it in between the colon, and the semicolon. You'll want to do this for all of the seven buttons, depending on what colors you want and if you want it 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've put it 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 was. So six F's 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 IMG, 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 width 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 width at 200 pixels. 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: The next step is actually putting in links for those buttons to work. I suggest a super easy tool called Linktrack. There are many ways to track your links, including free tools like Google Analytics. Those are a little bit complicated and would require a whole Skillshare 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 going to 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 future, so this keeps things organized. I've already created a group called Skillshare, but you want to create your own. You just click "Add Group" and put the name and description in, and click "Add". 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. You can add notes if you want to, and then you want to select the group that you're going to 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 going to click on the Skillshare group, and you'll see I have two links in here being the one I just made. On the side of it, you can see little icons. The pencil icon allows you to edit it, and the info icon, which is the little i with a circle, will allow you to see what the addresses and any other information. You can see the tracking link is right there. You're going to want to right-click that and copy-link address. You're going to use this link in Dreamweaver with your link tag. We've popped back into your text editor or Dreamweaver, whichever one you're using, and you're going to want to go to the tag that has the A space H ref, and just highlight the link I have in there and paste in the one you just copied. Now your links are ready to go. You'll 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 link in Instagram and your post that is different for that day, and you say link in bio. For this one, it's going to be whatever the featured link is. I'm going to go back into that link in link tracker, click on the edit button, and then I'm going to change the title to featured posts, so then I know that this is the one I want to change. When I want to change it, I'm just going to 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 Linktrack and replaced the old link with the new link because the Linktrack link will stay the same, and that link will still be in the code. It's just going to redirect to a different address depending on my newest Instagram post. Now, I'm going to 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. If I go into groups and go into my Instagram links, these are the ones that are actually live on my site right now. You can see the total number on the far right, those are 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 a little bit of a further breakdown for how the post were on a specific day. That gives you some insight into if you held a specific posts that talked about a product. You can see if it actually worked and if people are clicking on it.
5. Making Your Link Page Live: Once you have your changes made, you're going to want to open it in your browser from your desktop and just make sure that it works properly. Then you're going to want to open your FTP client. I'm going to open FileZilla. But if you don't want to use FTP client, you can possibly login to your hosting account. I've been able to do this in GoDaddy as well as DreamHost. So I'm just going to log in to my DreamHost 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 backed FileZilla, you just connect to your FTP and you'll see your website's listed. So I'm going to click into sarahtypes.shop and you'll have your files there. 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 the folder on the right. I've already dragged mine over. You can see I have two files an index.html and my-links.html. If you save the file as index.html, when you go to the address, which would be www.mysite.com or in this case, sarahtypes.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.com, if it's my-links.com or links.com, that is going to be after a back slash. So it will have to be sarahtypes.shop/my-links.html. You'll also notice if you look at my FTP, that I have the bg.jpg file and the logo file on the same level as the index file as under my-links.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 going to want to log into your Instagram account on your mobile device or iPad because I think those are the only two places you can change this, and then you're going to go to My Profile and you're going to click on Edit Profile and then you're going to enter in the web address for this link site, mine is sarahtypes.shop, and then once you click on that, you should bring yourself to 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 you're linked pages look like so make sure to leave those in the community area, and thanks for watching this course.
Sarah Trafford, Designer
