My Own Social Media Link List

Farlando Diengdoh 08 Feb 2025

Link list is a useful feature for social media. The most popular one is from linktr.ee. The problem with link-tree is that you have to use their domain like linktr.ee/yourname which is not a good thing. I have always wanted to share links on social media like Instagram, but it is a nuisance when you have to change links on bio every time. I came to know about link tree somewhere in 2018 and I tried but hate it, so I decided to put my html skill to use and did it myself. Here in this short write up, I'm sharing how simple and easy it is to do it. You can check my link-list web-app at fdh.pw. Here is what you need to get yourself a custom link list web-app of your choice.

Step 1: Create a simple one page website with links to your important social media, or recent work. You can either create everything from scratch (html, css and javascript) or you can use a library. Here I'll show you how to use a very popular html, css and js library - Bootstrap. In the get started page of Bootstrap you will find this starter code which is everything you'll need for this small project. The code goes like this.

 <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

I'm going to make some changes to this code by adding few things that I want to. Firstly, I need to also include Bootstrap icons for my links. So just after including bootstrap css, add the bootstrap icon link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

For links I'll just use the button style from Bootstrap which has this general format:

<a class="btn btn-primary" href="#" role="button">Link</a>

After this, to customise the look of the site, I'm going to add a few line of css to change default colour and background colour of bootstrap button

<style>
         body {
         background-color: #c2deff;
         }
         .btn{
         background-color: #1e4c7c;
         color: #fff;
         display:block;
         }
         .btn:hover {
         background-color:#326092;
         color:#fff;
         }
</style>

Then additional classes to enhance visibility as follows:

<a class="btn text-start my-4 p-3" target="_blank">Link</a>

This will make my link look like this:

Now, to add some common social links as icons, I use bootstrap icons which has the simple format that you can search from the list of icons at bootstrap website.

<div class="container">
   <div class="py-2">
        <svg class="mx-auto d-block" width="100" height="100"><use xlink:href="#fdphy"></use></svg>
        <div class="text-center social py-2">
             <a href="https://youtube.com/fdphy/?sub_confirmation=1" class="text-decoration-none text-dark h4"><i class="bi bi-youtube"></i></a> 
             <a href="https://facebook.com/fdphy" class="text-decoration-none text-dark h4"><i class="bi bi-facebook"></i></a> 
             <a href="https://twitter.com/fdphy" class="text-decoration-none text-dark h4"><i class="bi bi-twitter-x"></i></a> 
             <a href="https://instagram.com/fdphy" class="text-decoration-none text-dark h4"><i class="bi bi-instagram"></i></a> 
             <a href="https://fdiengdoh.com" class="text-decoration-none text-dark h4"><i class="bi bi-globe"></i></a> 
       </div>
       <div class="text-center">
           @fdphy
       </div>
   </div>
   <div class="col-lg-8 mx-auto">
       <!-- Links list here -->
       <a class="btn text-start my-4 p-3" target="_blank">Link</a>
   </div>
</div>

This part of the code will add these icons and linked to my social media when you tap the icons. The icons look as below:

Icons

You can then add your link to your work as many links as required. My full html file is available at Github. My final webapp look like the image at the top of this article.

Step 2: Get a suitable domain name: This is the most important part if you want custom branding. It just happened that I already own a very short domain name fdh.pw so get yourself a domain from a domain registrar of your choice, it is not that expensive.

Step 3: Web hosting: So you have a domain, you'll need a host to host your website. For a simple link list website it is fine to use a free service like Github Pages. Github pages is well documented on how to set up. You can create an account for free and create a repo on Github.

Post Label(s): Featured Web Design