[TUTO] Un pied de page dynamique pour vos blogs

EDIT 08/05 : Je me permets un repost, le CNC a vaporisé cet article sur le fil d'actu et ça m'a pris un peu de temps quand même...

Peut être l'avez vous déjà remarqué, mais ce blog a été ouvert le mois dernier. Je suis encore en train de prendre mes marques avec ce que l'on peut faire ou non.
Par exemple, je veux que tous mes articles, mais aussi ma signature sur le forum, contiennent quatre images renvoyant vers des articles que j'aurai sélectionnés comme étant mes plus intéressants. Le problème, c'est que pour faire ça, il faut que je repasse en revue l'intégralité de mes posts pour mettre à jour ce pied de page. Pour l'instant ça va, j'ai peu d'articles, mais à chaque nouvel ajout, le temps de l'opération s'allonge.

J'ai donc cherché un moyen de mettre à jour l'intégralité des articles et de la signature du forum en une seule opération.

Je savais comment faire, mais j'ai voulu trouver une autre méthode, la plus accessible possible. J'ai trouvé et je vous la fais partager.

Le tuto en format vidéo

Le tuto en format texte

Avant de commencer, sachez qu'il y a un prérequis pour pouvoir reproduire ce tuto : Avoir un compte Google (Gmail). Si vous n'en avez pas, vous pouvez en créer un rapidement et gratuitement pour l'occasion.

Le principe

Avant de commencer, je vais vous expliquer ce qu'on va faire.Vous serez d'accord que pour avoir les mêmes images et les mêmes liens partout sur votre blog, vous allez pointer vers les mêmes URLs (adresses internet).
Le problème est que pour les mettre à jour, il faut allez modifier sur chaque article ces URLs.
C'est long et fastidieux et franchement pas motivant.
La solution, c'est de faire en sorte que ces URLs ne correspondent plus à un article précis, mais à une "passerelle" qui aura pour mission de toujours donner le contenu le plus récent.
Ainsi, il ne sera plus nécessaire de modifier les articles un à un, mais uniquement de donner à la passerelle le lien le plus récent.

A gauche la situation "actuelle" et à droite ce que l'on va tenter de faire

Etape 1 : Préparer ses images

La première chose à faire, c'est de donner un nom générique à vos images.
Actuellement ma première image est une formule 1. Mon image pourrait s'appeler "formule 1.png". Cependant, si demain je décide de remplacer cet article par un autre sur Portal et que j'appelle l'image qui lui correspond "potal2.png", notre passerelle qui se sert de noms constants va continuer à essayer d'afficher "formule1.png". Impossible, et votre pied de page sera corrompu. 

Personnellement j'ai choisi de les appeler 01.png, 02.png, 03.png et 04.png.

Etape 2 : Créer la passerelle

C'est sans conteste la partie la plus technique du tuto, puisque l'on va créer une page HTML de toutes pièce.
Je vous rassure, je vais vous simplifier la vie et vous allez vous contenter d'un vulgaire copier coller.

Pour ce faire, ouvrez le bloc note (pas word, pas open office, le bloc note de base) et copiez/collez y le code suivant :

Une fois copier/coller dans le bloc note, modifier les variables "adresse_blog" ainsi que les quatre variables suivantes par l'adresse de votre blog et par les liens vers les articles dans l'ordre de vos images.
Faites très attention à ce que vos adresses soient encadrées par deux apostrophes ainsi qu'un point virgule en bout de ligne.

Voici ce que cela donne dans mon cas :

 var adresse_blog = 'https://www.gameblog.fr/blogs/vroom/';
 var premier_lien = 'https://www.gameblog.fr/blogs/vroom/p1coupdegueulecontrelaf1daujourdhui';
 var second_lien = 'https://www.gameblog.fr/blogs/vroom/p1rushleduelhuntlaudasurgrandecran';
 var troisieme_lien = 'https://www.gameblog.fr/blogs/vroom/p1sebastienloebenrouteverslesnuages';
 var quatrieme_lien = 'https://www.gameblog.fr/blogs/vroom/p_86482_project-c-a-r-s';

J'ai du raccourcir les urls par soucis de mise en page

Une fois que c'est fait, il ne vous reste plus qu'à sauvegarder ce fichier. Attention, ne l'enregistrez pas comme un document texte, mais comme un document html. Vérifiez bien que l'extension de votre document soit .html comme ceci:

 
Etape 3 : Tout envoyer sur Google Drive

A partir de maintenant, plus rien de compliqué.
Rendez vous sur votre espace Google Drive (https://drive.google.com) et créez un nouveau dossier en cliquant sur le bouton "Create" et appelez le comme bon vous semble.

Une fois que c'est fait entrez dans le dossier et uploader les images et la page html que l'on vient de créer en cliquant sur la flèche montante.

Cliquez pour agrandir

Vous devriez vous retrouver avec quelque chose dans ce genre là :

Etape 4 : Rendre le dossier visible par tous

Actuellement le dossier que vous venez de créer n'est visible que par vous et vous seul. Il faut faire en sorte que l'on puisse accéder au contenu de ce dossier par une simple URL.
Pour cela, on va rendre le dossier public en faisant un clic droit dessus (sur la partie droite de google drive), en allant dans le sous-menu Share et en cliquant encore sur Share.

Dans la partie "Who has access", cliquez sur Change

Enfin, dans ce dernier popup, séléctionnez Public

Vous n'avez plus qu'à sauvegarder les modifications en cliquant sur Save puis Done

Etape finale : Reconstruire son pied de page

Dans cette derniere étape on va refaire notre pied de page en se servant de ce que l'on vient de mettre dans google drive.

La première chose dont vous allez avoir besoin, c'est de l'identifiant de votre dossier dans google drive. Il se trouve dans l'url de votre navigateur quand vous êtes dans votre dossier. C'est une clé qui se trouve après le dernier "/" de l'url.

Nous allons insérer la première image dans notre article.
Cliquez sur le bouton Insérer/Editer l'image et donnez comme url l'adresse suivante :

https://googledrive.com/host/CLE_DU_DOSSIER/01.png

Il vous faut bien entendu, remplacer CLE_DU_DOSSIER par la clé que l'on a récupérée juste avant dans l'url de Google Drive et modifier 01.png par le nom que vous avez donné à votre première image.

Voila ce que cela me donne :

On va maintenant créer le lien pour cette image vers l'article qui correspond.
Pour ça, c'est comme vous le faites d'habitude, vous cliquez sur l'image et ensuite cliquez sur Insérer/Editer le lien.

Et vous allez lui donner la même adresse que l'image, sauf que ce ne sera pas 01.png mais le nom de votre page html suivi du numéro de l'article à récupérer.
Voilà à quoi cela devrait ressembler :

https://googledrive.com/host/CLE_DU_DOSSIER/pages.html?lien=1

La partie "?lien=1" permet d'indiquer à la passerelle que l'on veut recupérer l'article que l'on a défini dans la variable "premier_article" à l'étape 2. Si j'avais voulu le second article, j'aurais écrit ?lien=2.

Essayez, ca marche :

Et voilà ! Vous n'aurez plus qu'à copier/coller ce pied de page dans vos articles une seule fois.
Pour mettre à jour l'intégralité de vos pieds de page, vous n'aurez plus qu'à modifier les images directement dans google drive en veillant à conserver LE MÊME nom et à modifier dans votre page html les variables qui emmènent vers vos articles.

Je suis à votre disposition si vous souhaitez avoir des détails supplémentaires ou si je n'ai pas été assez clair. Envoyez-moi un MP ou laissez un commentaire, je tâcherai d'y répondre le plus vite possible.