Faire sa propre page Linktree en quelques minutes

On va mettre les mains dans le code

Si vous avez un compte Instagram ou un compte Twitter, vous avez certainement mis votre site internet dans votre profil. Mais ce qui est assez frustrant c’est qu’on ne peut mettre qu’un seul lien dans la description, vous ne pourrez donc pas ajouter votre site et votre profil twitter par exemple, il faudra choisir !

Entête de mon compte Instagram

Mais comme la nature à horreur du vide, des petits malins ont créé linktr.ee, un service qui vous propose de présenter de manière simple et élégante les différents liens que vous souhaitez mettre en avant. Dans la bio d’instagram vous ne mettrez donc plus le lien vers votre site, mais le lien vers votre compte linktr.ee qui lui se chargera de partager un nombre illimité de liens.

C’est ce que j’ai fait ce week-end, j’ai créé mon compte linktr.ee et configuré ma page, le service est gratuit, mais propose une version payante qui permet de personnaliser bien mieux sa page. J’ai tout de même réussi à faire une page pas trop moche.

Mais au moment de changer le lien dans ma bio instagram, j’ai eu comme un doute. Tout d’abord, ça me gêne de renvoyer mon compte Instagram vers un service plutôt que vers un nom de domaine que j’ai choisi. Second problème, la version gratuite de linktr.ee ne me permet pas de le mettre à la charte graphique de mon site interne et je ne souhaite pas passer à la version payante.

Alors, je me suis dit que ça ne devrait quand même pas être très compliqué de reproduire ce type de page en statique. J’ai un peu cherché sur internet et je suis tombé sur quelques tuto bien faits (voir la vidéo en fin d’article) qui proposent de vous aider à créer votre propre page. Voici le résultat que je trouve vraiment pas mal.

Les indispensables

  1. Un hébergeur internet
  2. Un éditeur de texte
  3. Un peu de temps : environ 1 heure si vous voulez un résultat propre

Et c’est tout, le plus compliqué est bien entendu l’hébergement internet, mais je pense que si vous lisez cet article, c’est que vous avez déjà votre hébergeur internet et votre nom de domaine.

La page index.html pour le contenu de la page

Rien de très compliqué, le fichier index va être le contenu de votre page, le styles.css que l’on va voir dans un second temps sera lui en charge dans la mise en forme de la page.

L’entête (Head) sera des plus classiques, attention juste au chemin où vous mettrez votre fichier styles.css, pour ma part j’ai choisi de le mettre dans un répertoire “content” dans lequel je stocke également la photo de profile.

Ensuite on ajoute juste une photo et un nom de profil et puis vient le moment d’ajouter les liens les uns après les autres avec une syntaxe très classique “<a href=”url” class=”links” target=”_blank”>Nom du lien</a>

Voici le code de la page HTML avec en vert les lignes principales que j’ai modifiée.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="content/styles.css">
	<title>jeromep links</title>
</head>
<body>

<!-- Profile picture-->
<img src="content/logo_rond.png" alt="profile picture" class="profile-picture">

<!-- Profile name-->
<div class="profile-name"><b>@jeromep</b></div>

<!-- Links-->
<a href="https://blog.jeromep.net/" class="links" target="_blank">Blog</a>
<a href="https://photos.petitpasjero.me/" class="links" target="_blank">Portfolio</a>
<a href="https://www.instagram.com/jeromep/" class="links"target="_blank" >Instagram</a>
<a href="https://www.flickr.com/photos/jerome_petitpas/" class="links" target="_blank">Flickr</a>
<a href="https://twitter.com/jerome_petitpas" class="links" target="_blank">Twitter</a>

<!-- Logo -->
<div class="bottom-text">jeromep < blogger / photograph > </div>


</body>
</html>

La page styles.css pour donner de l’allure à votre page

C’est avec ce fichier que tout se joue, c’est grâce à lui qu’on va gérer la mise en forme de la page. Cependant rien de très compliqué, juste quelques blocs, body, profile-picture, profile-name, links, et le bottom-text.


Pour l’image c’est le “boder-radius: 50%” qui vous permet de faire la photo d’entête en rond, vous pouvez supprimer la ligne si vous souhaitez conserver la photo d’origine.


Le plus gros se fait dans la partie links. J’ai changé la taille du bloc pour les mettre à 250px, ce qui est largement suffisant pour ce que j’ai à y mettre. J’ai changé également la couleur du texte et de la bordure ainsi que la couleur du lien survolé (a:hover) en reprenant le vert que vous pouvez voir sur ce blog. J’ai aussi accéléré la transition entre le lien survolé et non qui était trop lente à mon gout, ça se passe dans la ligne “transition: color 0.5s

Ci-dessous le code de la feuille de style avec en vert les éléments que j’ai personnalisé.

body {
background: white;
color: #696969;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
letter-spacing: 2px;
}
img {
border-radius: 50%;
}
.profile-picture {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
height: auto;
max-width: 100px;
}
.profile-name {
text-align: center;
padding: 30px;
}
.links {
text-align: center;
margin-top: 20px;
padding: 20px;
border: 1px solid;
border-color: #9dbf7a;
border-width: 2px;
width: 250px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
a {
text-decoration: none;
color: #696969;
transition: color 0.5s;
}
.bottom-text {
text-align: center;
margin-top: 40px;
font-size: 12px;
}
a:hover {
color: #fff;
background: #9dbf7a;
}

La vidéo Youtube que j’ai suivi pour créer ma page

Alors vous en pensez quoi de l’idée et du résultat ? Vous pouvez consulter la page en fonctionnement ici : links.jeromep.net

Je vous laisse partager vos propres pages linktr.ee dans les commentaires, je serai ravi d’aller y jeter un coup d’oeil.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.