How to build a Linktree Clone using Python + Streamlit

Key Takeaways

linktree provides a great way to share all of your social media links all on a single page and in this video i'm going to show you how you could build one for free using the streamlet python library and so without further ado we're starting right now so a few weeks ago i've shared a tweet about creating a link tree like page using the streamlet python library and many of you have asked whether i'm going to create a video about this and so this video is for you guys and let's jump right in so the links page that is shown here is deployed on the streamlight cloud for free and i'm going to show you this later in the video and as you can see here this is a links page showing a profile picture my name a short description of what i do and a series of buttons that will link to various social media platforms such as youtube my blog on medium twitter linkedin my newsletter and also a buy me a coffee link and i've also included the flat icons for each of these as well so this is created using the streamlet python library and let's take a look so to create your very own links page go to this link github.com slash data professor slash links and what you need to do is click on the use this template let's do that and then you want to give this repository a name and make sure that it is not your username on github for example the username on github for me is data professor so don't do this okay you could do this you could add something else to it because if you add your data professor or your username of github to this repository name it will get confused with the typical you know like dataprofessor.github.io link okay so anything else except your username that'll do make it public and then you want to click on create repository from template and now this is inside your own github profile in the repo called data professor slash links i mean dash links and then the next thing is you could head over to the streamlight cloud streamlet.io cloud and you could sign up for it for free and i already have an account so i'll click on sign in a pointy note here is that you could use your gmail to sign in so you wanna click on new app and then select the newly created repo which is the data professor dash links the branch is defaulted to master so let me go back here to check all right and it's master and it's called streamlet underscore app.py and then i'll click on deploy and wait for a short moment and then you'll get your own links page let's click here to have a look at what is going on behind the scene and you're going to see all of this happening here return to the log and you can expand this if you like and it's a great way to diagnose or troubleshoot your streamline app particularly when it encounters some errors or problems give it some time and it's ready and there you go if i click here then it will go to my youtube channel click on the second youtube channel codingprofessor click on my medium blog to my twitter page my linkedin and also my newsletter so you could sign up here or you could go ahead and buy me some coffee and that is the streamlit links page that i've created and shared to you as a template on github and as you can see you could easily deploy your own links page in three easy steps as i'm showing also here in written form let's take a look at the url you're going to notice that the url here is quite long and i'm currently beta testing the new feature that allows me to create custom domain name so let me show you here if you click on this demo link you go to channen.streamlitapp.com and it links to my links page and it's a very short url that you could share on various social platforms maybe ask your folder in your email or also as a link in your twitter account like the one that i've done here let me show you so on my twitter page here i've shared the shannon.streamledapp.com link very short and easily shareable so if you're wondering how you could create your own custom subdomain here stay tuned and i'll create a future video about this in the meantime let's head over back to take a look at the code so you can see here that we have style.css file and this will contain some of the css tabs that i've implemented in this particular app you'll notice that i had to eliminate the white space at the top of a typical streamlit app and i've deleted the streamlet icon at the bottom i think because i'm signed in you will see this and i've adjusted some of the font sizes of various elements here and icons as well so some of the configurations are provided here like the font size made it 19 pixels centered the images here the footer the header are hidden the main menu is also hidden set the padding of the top to be zero pixel so that it will have no empty space at top centered and bow the text here text here adjusted the maximum width and the minimum width to 180 pixels and 40 percent so you'll notice that if we let me take this if i open this page on a mobile phone or a tablet device i set that the minimum width will be 180 pixels but you could change that if you like to more or less and when it is expanded to the full screen to the full width of the screen it will not expand any further so you're going to see white spaces to the left and to the right okay and so if you're wondering how i did this let me show you i would go to view to developer to inspect elements and then i'll hover through the various elements and you'll see at the top left hand corner in the pop-up here you're going to see the name of the css elements of the buttons of the display box of the profile name of the image you know any elements that you're highlighting you're going to see like here let me show you the name here it is css dash 10 trb lm dot e16 nr 0p30 and it's this one so i've made the font to be bold and also adjusted the alignment to be centered so this one i think it's this element here 12oz5 g7 no okay it's one of the elements i think it's this is it well we could go through each of the elements here and figure out which one it is or you could play around with this and figure out yourself so you could customize you know any elements that you see on the application here by adding some css hacks here let's head over back to the main page of the repo and the main streamlet app is right here so lines number one through three we're going to import the streamlet library as st we're going to import some of the functions that i've created and these custom functions are saved in the st underscore functions dot py let me show you right here st underscore functions dot py let's have a look so in this particular file i've imported streamlid sst and i've created some custom functions so the first custom function is called load css and it allows me to load the bootstrap css file and i've used the stdot markdown to include this into the streamlit app and so instead of having these lines of code in your typical streamlight app we're going to put it into the st functions.py and then we're going to call the load css function by importing in the function in our main app streamlet underscore app.py and then we've created a custom function called st underscore button which accept four input arguments the icon for example the youtube icon the twitter icon and therefore we have a series of if and lf statements so if we put in youtube as the argument here we're going to display the youtube icon as a svg image if we put in twitter then we're going to default to this block and then we're going to use the twitter icon and then we have linkedin icon medium icon newsletter icon the cup icon for the buy me a coffee link and if none is specified then we don't display any icons at all and so this is returned as st.markdown and we're going to call this function n in the mean app let's head over back you're going to notice the dp.png here is the profile image which is shown here and you could replace this with your very own profile image this png is the screenshot that i've used on the github page here and dot streamlit folder here will contain configurations for the streamlit app and so here we're setting the background color to be white the primary color to be this color and so if you don't like these colors then you could customize it to your own preference so you can make your link page to have black background if you like the text to be white if you like or blue or yellow or pink or whatever color that you prefer and you could customize it to your heart's content let's head over back here all right and now let's take a look at the streamlit app.py file so as mentioned already we're importing streamlet that's st on line one line two we're importing the custom functions line three we're importing the image function from the pil python library and so on line number five we're going to import the custom css functions that we've talked about earlier on line number seven we're going to create three columns and we're going to use column two so that it will be centered with column one and column three as the buffer and as you can see here we've used column two for the image which is done using the image functions that we've imported and then the dp.png image on line number 10 we've used the st header and then i've placed my name here you could replace this with your own name which is shown here the name and online number 12 we're using st.info to put in the information about myself which is right here what i do what interests me on line number 14 we're going to specify the value of 20 for the icon size that we're going to use and the icon size is for here which we'll be using on lines number 16 until 22. so you're gonna notice the icon here the youtube icon play button so this is set to be 20. so you could adjust size here and on line 16 through 22 we're using the custom st button which is imported here from st functions and it accepts four input arguments the youtube icon or the medium or twitter or linkedin or newsletter or you could also add in your own by specifying the additional if or lf statement and here we're going to put in the links to the particular social platform like for example on the first button here i specify that i want to use the youtube icon and then it will link to this youtube.com data professor right here you'll notice at the bottom left you're gonna see the link and if i click on it then i'll go to my youtube page and the third import argument is the name that the button will have so here i specified it to be data professor youtube channel which is right here data professor youtube channel and then the fourth input argument will be the icon size which we specified here to be 20. let's head over back and if you would like to take a look at the written form on how you could create and deploy this app feel free to take a look at this written documentation and so congratulations in this video you have built your very own links page using the streamlet template and all of this is done in python and deployed on the streamlight cloud thank you for watching until the end of the video if you reach this far please drop a balloon emoji so that i know that you're the real one and while you're at it please like subscribe and also hit on notification bell and you'll be notified of the next video and as always the best way to learn data science is to do data science and please enjoy the journey