$type=slider$count=4$ico=1$cate=0$rm=0$sn=0$cm=0$show=home$meta=hide

My Own Social Media Link List

Custom Link List for social media page

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:

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.

COMMENTS

3/random/post-list
Name

blog,16,chemistry,8,css,1,feature,15,html,6,java-script,2,php-mysql,3,solved-qp,4,spectroscopy,3,technology,5,videos,3,web-design,13,
ltr
item
F Diengdoh.com: My Own Social Media Link List
My Own Social Media Link List
Custom Link List for social media page
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi698eDtT9yKpNfkZEMLB_DugypHilf0HI4JBLj14TuwYaqTbRul8zaQuftXIKbNqnTmQkym67uB8CdCyjIcXUxrpGvhIqz1mLHFLJgtxskTpQIybxmHaOVaoJb6gxlTrsX4wuh_ZKIb3K3rBvhWgvYN81dcP0HLvApWhS22uml40SgUs_7Rpk3_BOTGbQ/s16000/webapp.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi698eDtT9yKpNfkZEMLB_DugypHilf0HI4JBLj14TuwYaqTbRul8zaQuftXIKbNqnTmQkym67uB8CdCyjIcXUxrpGvhIqz1mLHFLJgtxskTpQIybxmHaOVaoJb6gxlTrsX4wuh_ZKIb3K3rBvhWgvYN81dcP0HLvApWhS22uml40SgUs_7Rpk3_BOTGbQ/s72-c/webapp.png
F Diengdoh.com
https://www.fdiengdoh.com/2025/02/link-list-for-my-social-media.html
https://www.fdiengdoh.com/
https://www.fdiengdoh.com/
https://www.fdiengdoh.com/2025/02/link-list-for-my-social-media.html
true
6372396504026100368
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content