Insérer un diaporama ou une vidéo d’un site dans un autre #hellotipi #flickr

Ceci est un petit tuto pour des camarades de la communauté Hellotipi, mais dans l’idée ça vaut pour bien des outils de publication sur Internet.

Dans le cas présent nous allons inclure un diaporama Flickr dans un article de notre site Hellotipi.

Une page web c’est un peu comme un patchwork, ça consiste à accoler des blocs dans un espace borné. Que ce soit du texte (donc des caractères), une image, une vidéo, considérons qu’il s’agit de blocs qu’on colle les uns à côté des autres pour faire joli, on fait du design! 🙂

Certains sites proposent d’exporter un bout de leur contenu, un de leurs blocs, pour pouvoir le coller dans une page d’un autre site. Dans notre exemple, la page d’Hellotipi va afficher pour l’essentiel (en vert) du contenu venant des ordinateurs d’Hellotipi (textes, commentaires, cadre principale, …), à l’intérieur duquel on va coller une sorte de fenêtre magique fournie par Flickr (en rose) qui va afficher du contenu à lui, en l’occurrence mon diaporama, dont les données sont stockées sur ces ordinateurs à lui. On appelle ces ordinateurs des serveurs car ils nous fournissent les données.

Le truc c’est que pour permettre cette magie, il faut les formules magiques qui utilisent leur langage. Ce langage c’est le HTML, pas besoin de le comprendre, mais les sites qui sont un peu idiots ne comprennent que ça. La manip va donc consister à ce que le site A, flickr dans notre cas, te donne la formule magique HTML afin que tu la copies et la colles dans le site B, Hellotipi pour nous, sans te poser de question 🙂

On résume et on fait la manip ensemble. Pour pouvoir incruster un contenu d’un site A dans un site B, il faut:

1. que le site A propose un outil pour exporter une fenêtre vers ce contenu. Généralement il faut chercher un bouton « Partager », ou « Exporter » (ou embed en anglais)
2. que le site B accepte ce genre de manipulation. Pour cela il faut chercher si l’éditeur qu’on utilise dans le site B propose un bouton HTML, c’est à dire un accès au langage magique où il faudra coller la formule du site A.

Allons-y, tu vas voir, c’est facile si on va doucement 😉

J’ai préalablement chargé mes photos sur mon compte flickr, Hellotipi ne les connait donc pas.

(cliquer sur les photos pour les agrandir)

Dans Flickr, je vais dans mon album et je crée mon diaporama avec les outils que Flickr me fournit.

Dans ce diaporama je repère le bouton « partager » et je clique dessus pour voir si il me propose le code HTML.

J’aurais pu cliquer directement sur « Copier dans le presse papier » (1) pour copier le code HTML mais ici je peux en plus personnaliser un peu la fenêtre que je vais coller dans le site B: je clique sur « Personnaliser le code HTML » (2) car je voudrais qu’il soit un peu plus grand que la taille proposée par défaut.

Une fois cette formule magique dans mon presse papier, je me rends sur le site B, Hellotipi dans notre cas, et j’édite mon billet.

Je positionne le curseur à l’endroit ou je veux insérer mon diaporama et je clique sur le bouton HTML.

S’affiche alors le « vrai contenu »de ce billet, peu importe si on n’y comprend rien, ON NE TOUCHE A RIEN 😉 , on copie juste le code et on sort en mettant à jour, bouton « Update » dans le cas présent.

Une fois de retour dans l’éditeur du billet, ne pas s’inquiéter, c’est un rectangle jaune qui représente l’espace réservé pour le diaporama qui sera visible lors de la publication.

Reste à publier et voilà 🙂

C’est valable pour des vidéos, des gadgets divers.

Pour ceux qui connaissent un peu plus, attention à ce qu’accepte la plateforme d’arrivée, par exemple Hellotipi n’accepte pas les iFrames, donc par exemple pour insérer une vidéo YouTube qui laisse le choix, choisir le « vieux code » avec un « object ».

Des questions? Ne pas hésiter, c’est fait pour.

Tiens et d’ailleurs j’en profite pour le coller ici aussi ce joli diaporama 😉