Aller au contenu principal

Mettre le catalogue de votre bibliothèque sur votre site web

· 9 minutes de lecture
Séraphin Vandegar
Séraphin Vandegar
Fondateur de La Bibli

Votre collection est cataloguée. Vos membres, eux, appellent encore pour demander si vous avez tel titre. La page qui répond à cette question tient en une ligne de code à coller dans votre site, sans agence, sans développeur et sans compétence technique. Voici la ligne, et l'endroit exact où elle va selon la plateforme que vous utilisez.

Pourquoi la page doit vivre chez vous​

La solution facile, c'est de mettre un lien dans le menu. Elle a deux défauts, et ils coûtent cher.

Le premier : les gens partent. Une lectrice clique, arrive sur un autre site, regarde trois livres et ferme l'onglet. Elle n'a pas vu vos heures d'ouverture, votre calendrier d'activités, votre bouton de don, votre formulaire d'adhésion. Vous avez envoyé votre trafic ailleurs pour rendre un service que vous rendez vous-même.

Le second : la page n'existe pas pour les moteurs de recherche. Quand quelqu'un cherche « bibliothèque » avec le nom de votre ville ou de votre organisme, ce qui peut ressortir, c'est une page de votre site. Une page « Notre bibliothèque » avec un vrai texte et le catalogue en dessous est une porte d'entrée de plus. Un lien dans un menu n'est pas une page.

Il faut être honnête sur un point : le catalogue s'affiche dans un cadre servi par un autre domaine, et les moteurs rattachent le contenu de ce cadre à ce domaine, pas au vôtre. Ce qui vous appartient, c'est le texte que vous écrivez autour. D'où la règle de la dernière section de cet article : n'intégrez jamais un cadre tout seul sur une page vide.

Le bloc à copier​

Une ligne. Remplacez votre-collection par l'adresse de votre collection, celle que vous voyez déjà quand vous consultez votre catalogue en ligne.

<iframe src="https://app.labibli.com/collection/votre-collection" width="100%" height="900" style="border:0" loading="lazy" title="Notre collection"></iframe>

Ce que fait chaque morceau, pour que vous puissiez l'ajuster sans crainte :

  • src : l'adresse de votre collection. C'est le seul élément à modifier.
  • width="100%" : le cadre prend toute la largeur disponible. Ne mettez pas une largeur en pixels, c'est ce qui casse l'affichage sur téléphone.
  • height="900" : la hauteur, en pixels. À ajuster, voir plus bas.
  • style="border:0" : supprime le contour gris que certains navigateurs dessinent par défaut.
  • loading="lazy" : le catalogue ne se charge qu'au moment où le visiteur descend jusqu'à lui. Votre page s'affiche donc aussi vite qu'avant.
  • title : le nom du cadre, lu par les lecteurs d'écran. Gardez-le, et écrivez quelque chose de parlant.

Où le coller, selon votre plateforme​

Le principe est le même partout : il existe un élément destiné à recevoir du code, et il ne faut jamais coller ce bloc dans l'éditeur de texte ordinaire : l'éditeur de texte enrichi le réécrit ou l'efface.

WordPress​

Avec l'éditeur de blocs, ajoutez un bloc HTML personnalisé à l'endroit voulu, collez la ligne, enregistrez, puis regardez la page publiée : l'éditeur affiche le code, pas le résultat.

Avec l'éditeur classique, basculez sur l'onglet Texte (jamais Visuel) et collez à l'endroit voulu. Attention : si vous rebasculez sur Visuel ensuite, WordPress peut supprimer le bloc silencieusement. Enregistrez depuis l'onglet Texte.

Avec Elementor, utilisez le widget HTML. Avec Divi, le module Code.

Un détail qui fait perdre une soirée : sur les sites hébergés chez WordPress.com, les plans d'entrée de gamme filtrent le HTML inséré. Si le cadre ne s'affiche pas et que vous êtes sur ce type de plan, ce n'est pas votre code, c'est le filtre.

Wix​

Dans l'éditeur : Ajouter → Intégrer le code → Code personnalisé (ou Intégrer un site). Collez la ligne dans le champ prévu, puis redimensionnez le bloc à la souris pour lui donner sa place dans la page. Wix conditionne les intégrations à un plan payant avec domaine connecté : sur un site en version d'essai, le bloc existe mais reste vide.

Squarespace​

Ajoutez un bloc Code à l'endroit voulu, choisissez le type HTML, collez la ligne et décochez l'affichage du code source, sinon la page montre le texte du code au lieu du catalogue. Le bloc Code n'est pas disponible sur le plan personnel : il faut le plan supérieur.

Comme pour WordPress, l'éditeur ne rend pas toujours le cadre pendant l'édition. Publiez et regardez la vraie page.

Carrd​

Ajoutez un élément Embed, choisissez le type Code, collez la ligne. L'élément Embed demande la version Pro. Réglez la marge et la largeur de la section comme pour n'importe quel autre élément.

Régler la hauteur et vérifier sur téléphone​

La hauteur ne s'ajuste pas toute seule. Un cadre qui affiche un autre domaine ne peut pas dire au site qui l'accueille quelle taille il fait : c'est une règle de sécurité des navigateurs, pas une limite du catalogue. C'est donc vous qui fixez la valeur.

Trois repères :

  • 700 si la page contient déjà beaucoup de contenu et que le catalogue est un complément;
  • 900 pour une page dédiée à la bibliothèque. C'est la valeur du bloc ci-dessus, et le meilleur compromis;
  • 1200 si votre collection est grande et que vous voulez qu'on en voie beaucoup d'un coup.

Ensuite, testez sur un vrai téléphone, sur la page publiée et pas dans l'aperçu de l'éditeur. C'est le seul test qui vaut, et il prend trente secondes. Vérifiez trois choses : le cadre occupe toute la largeur, on peut faire défiler la page sans rester coincé à l'intérieur du cadre, et le texte des fiches est lisible sans zoomer.

Ce qu'il faut écrire autour du catalogue​

Un cadre seul sur une page blanche ne sert ni les moteurs de recherche, ni les gens. Ajoutez au minimum, au-dessus du catalogue :

  • une phrase qui dit ce que c'est : « Notre bibliothèque réunit des ouvrages sur la santé des femmes, la parentalité et le droit du travail, consultables sur place et empruntables par les membres. »;
  • qui peut emprunter, et comment on devient membre;
  • combien de livres à la fois, et pour combien de temps;
  • où et quand : l'adresse, l'étage, les heures pendant lesquelles quelqu'un est là;
  • à qui écrire pour réserver un titre ou proposer un don : un prénom et une adresse, pas une boîte anonyme.

Ces cinq points font trois paragraphes, répondent à toutes les questions que vos lecteurices vous posent au téléphone, et sont le contenu que les moteurs associeront à votre organisme. Le catalogue, lui, répond à la sixième question : l'avez-vous?

Donnez enfin à la page une adresse lisible (/bibliotheque plutôt que /page-4) et mettez-la dans votre menu principal, pas dans le pied de page.

Quand l'intégration ne fonctionne pas​

Dans l'ordre des causes réelles :

  1. L'aperçu de l'éditeur n'affiche pas les cadres. C'est le cas le plus fréquent, et ce n'est pas une panne. Publiez, ouvrez la vraie page.
  2. Le bloc a été collé dans un champ de texte enrichi. Le code apparaît alors en toutes lettres sur la page. Coupez-le, mettez un vrai bloc de code, recollez.
  3. Votre plan ne permet pas l'insertion de code. Voir plus haut selon la plateforme.
  4. Une extension de sécurité ou de cache filtre les cadres. Testez en désactivant temporairement, ou demandez à la personne qui gère le site.
  5. L'adresse de la collection est mal recopiée. Ouvrez src dans un onglet : si la page ne s'ouvre pas seule, elle ne s'affichera pas dans un cadre non plus.

Si rien n'y fait, la solution de repli est acceptable : une page « Notre bibliothèque » avec vos trois paragraphes et un gros bouton vers l'adresse publique de votre collection.

<a class="bouton" href="https://app.labibli.com/collection/votre-collection">Consulter notre catalogue</a>

C'est moins bien qu'un catalogue intégré, et infiniment mieux qu'une page qui ne dit pas que la bibliothèque existe.

La Bibli​

La Bibli est un logiciel de bibliothèque conçu au Nouveau-Brunswick, chez Aynils, pour les organismes à but non lucratif francophones. Chaque collection a son adresse publique, faite pour être intégrée au site de l'organisme avec le bloc ci-dessus : vos membres cherchent un titre, voient s'il est disponible ou emprunté, et restent chez vous.

Le reste suit : catalogage par ISBN, prêts avec alerte de retard, durée par défaut de 31 jours. 330 $ US par an ou 30 $ US par mois, le premier mois est gratuit, et la reprise de votre collection existante est comprise jusqu'à 3 000 titres : envoyez-nous votre export de tableur, nous le reprenons. Vos données sont hébergées à Toronto.

Pour la suite, deux lectures : cataloguer un livre par son ISBN et relancer un retard sans se fâcher.

Questions fréquentes

Faut-il savoir coder pour intégrer un catalogue à son site?

Non. Il s'agit de copier un bloc d'une ligne et de le coller dans un élément prévu pour ça, qui existe dans WordPress, Wix, Squarespace et Carrd. Le seul point de vigilance est de coller dans le bon endroit : un champ de code, jamais l'éditeur de texte enrichi.

Pourquoi ne pas simplement mettre un lien vers le catalogue?

Parce qu'un lien sortant fait quitter votre site. La personne part, regarde, et ne revient pas voir vos horaires, votre programmation ni votre bouton de don. Une page de catalogue chez vous garde la visite, et c'est une page de plus que les moteurs de recherche peuvent trouver sous le nom de votre organisme.

Le contenu du catalogue est-il indexé par Google?

La page de votre site qui contient le cadre est indexée normalement. Les livres affichés à l'intérieur du cadre, eux, sont servis par un autre domaine et sont rattachés à ce domaine. C'est pourquoi il faut écrire deux ou trois vrais paragraphes autour du cadre : ce texte-là vous appartient et c'est lui qui vous fait trouver.

Quelle hauteur donner au cadre?

900 pixels est un bon point de départ : on voit une bonne dizaine de livres sans que la page devienne interminable. Le cadre ne peut pas s'adapter tout seul à son contenu, parce qu'il vient d'un autre domaine; c'est vous qui fixez la hauteur.

Que faire si mon plan ne permet pas d'insérer du code?

Les plans d'entrée de gamme de Wix et de Squarespace, et Carrd en version de base, n'ont pas l'élément d'intégration. Deux options : passer au plan qui l'offre, ou créer une page qui décrit la bibliothèque avec un gros bouton vers l'adresse publique de votre collection. La deuxième solution ne coûte rien et vaut mieux que rien.

Le catalogue s'affiche-t-il correctement sur un téléphone?

Oui, à condition de laisser la largeur à 100 pour cent plutôt qu'une valeur en pixels. Vérifiez toujours sur un vrai téléphone, sur la page publiée : l'aperçu des éditeurs de site n'affiche souvent pas les cadres intégrés.