Calaméo est un service français d’hébergement et de publication en ligne qui permet de stocker et de partager des documents de type brochures, magazines, présentations graphiques qui sont souvent des fichiers lourds et de ce fait, difficiles à partager sur un site internet.
Ce tutoriel vous explique comment intégrer une publication hébergée sur Calaméo sur votre site internet.
Avertissement
Cet article est un tutoriel destiné aux personnes qui souhaitent diffuser sur leur site internet des brochures ou des présentations PDF à la façon d’un livre à feuilleter.
Mirobolus n’a pas de lien avec le service Calaméo ni ne touche de commission de ce service.
Comment publier son premier document sur Calaméo ?
Étape 1 : Créer son compte sur Calaméo
- Rendez-vous sur le site de Calaméo puis cliquez sur le lien “inscrivez-vous” : https://fr.calameo.com/#register
- Vous pouvez opter au choix pour un compte gratuit ou payant selon vos besoins et le volume de documents à héberger (Voir les tarifs ici : https://fr.calameo.com/upgrade).
Étape 2 : Partager son premier PDF
- Cliquez sur le bouton « Publier » dans la barre de menu supérieure,
- Sélectionnez dans votre ordinateur le fichier PDF que vous souhaitez télécharger,
- Laisser les réglages par défaut,
- Cliquer sur le bouton « Publier ».
- Une fois le fichier téléchargé sur Calaméo, nommez-le de façon explicite car ce nom sera affiché sur votre site.
Pour notre exemple, nous choisissons : « Evenos Infos n° 60 – Juillet 2019 » - Enregistrer
Comment Intégrer la publication sur votre site ?
Étape 3 : Copier le code d’Integration
Il est temps de récupérer le code d’intégration fourni par Calaméo que vous devrez insérer dans la page ou l’article de votre site.
- Survoler la publication récente et cliquer sur le triangle pour dérouler les options disponibles
- Cliquer sur « Intégrer »
- Veiller à ce que l’option HTML (« Code à intégrer ») soit cochée puis cliquer sur « Personnaliser les options »
- Mode : MINI
- Voir : AUTO
- Taille : GRAND
- Page : 1
- Dans « Actions : Cocher “Ouvrir directement la liseuse”
- Dans Autre : Cocher “Afficher le titre de la publication”
- Coller le code généré dans votre site.
Si vous êtes sous WordPress, utilisez un bloc CODE.
Si vous utilisez le thème DIVI, ajoutez un module CODE
Exemple de code généré :
<div style="text-align:center;"><div style="margin:8px 0px 4px;"><a href="https://www.calameo.com/books/005255787a614cd041587" target="_blank">Evenos Infos n° 60 - Juillet 2019</a></div><iframe src="//v.calameo.com/?bkcode=005255787a614cd041587&mode=mini" width="480" height="300" frameborder="0" scrolling="no" allowtransparency allowfullscreen style="margin:0 auto;"></iframe><div style="margin:4px 0px 8px;"><a href="https://www.calameo.com/" target="_blank">Lire plus de publications sur Calaméo</a></div></div>Explications sur le code d’intégration : en rouge, il s’agit de l’identifiant unique de votre publication ; en bleu, le lien publicitaire de Calaméo que vous pouvez supprimer ; en vert, les dimensions de la fenêtre qui affichera votre contenu ; en violet, le titre que vous avez donné à votre publication.
Si vous utilisez le script TARTE AU CITRON pour gérer les cookies de votre site et afficher les bannières d’avertissement, le code doit être adapté afin que l’utilisateur puisse refuser les cookies spécifiques au service Calaméo :
<div class="calameo-canvas" data-id="005255787a614cd041587&mode=mini&clickto=embed" width="900" height="562"></div>
Le résultat pour notre exemple, la commune d’Evenos (var) :
Afficher la “Calaméothèque”
Pour aller plus loin, un code permet de présenter toute votre « Calaméothèque » sans avoir à intervenir à chaque sortie d’un nouveau numéro.
Exemple de code d’appel de la bibliothèque Calaméo d’Evenos :
<div class="calameo-canvas" data-id="5551574&rows=2&sortBy=latestIssue&theme=white&bgColor=f4f4f4&thumbSize=large&showTitle=true&showShadow=true&showGloss=false&showInfo=account&linkTo=view&linkTarget=_blank" width="100%" height="510"></div>
Explication : En rouge ci-dessus, l’identifiant de votre bibliothèque Calaméo.
Attention cependant, le code ci-dessus ne permet pas de contrôler les cookies de Calaméo par le script Tarte au citron (et à ma connaissance, Tarte au citron ne propose pas de code compatible pour l’intégration d’une calaméothèque).
