Incorporer un « widget »

Un peu de vocabulaire

Un « widget » est un petit module qui permet à une page d'embarquer (encapsuler, intégrer… « embed » en anglais) et de re-publier dynamiquement des contenus et fonctions issus de services proposés par d'autres sites internet.

Quelques étapes très simples

1. Trouver le code « iframe » permettant l'intégration

Un site propose souvent d'afficher ses contenus ailleurs que « chez lui », en fournissant un morceau de code HTML (appelé iframe), qui se trouve dans les options « Partager », « Intégrer » ou encore « Iframe ».
Ca peut ressembler à un de ces trois pictogrammes :
Le code « iframe » que vous allez trouver ressemblera à ça :

Vous allez sélectionner et copier ce code pour pouvoir le coller dans votre wiki.

2. Coller ce code dans votre page wiki

Une fois le code collé dans la page il faut penser à ajouter avant et après deux guillemets.

3. Sauver et profiter !

Vous enregistrez ces modifications et vous pouvez profiter des fonctionnalités de cet autre site dans votre wiki : lire la vidéo, écrire dans le pad, lire un contenu…

Bricoler le code

Changer la taille de la fenêtre

Le code « iframe » fourni peut être personnalisé, notamment pour les dimensions de la fenêtre intégrée.
Dans le bout de code à copier-coller, les paramètres (on parle d'attributs) width (largeur) et height (hauteur) permettent de spécifier la taille de ce cadre et ils sont renseignés en pixels. Vous pouvez modifier ces chifres pour ajuster la taille de la fenêtre.

Largeur
L'attribut width= est indispensable. Il peut indiquer un nombre pixels ou un pourcentage de la taille de l'écran.
Pour que la fenêtre prenne toute la largeur et s'adapte à l'écran vous pouvez indiquer width=100%

Hauteur
L'insertion iframe peut configurer sa longueur automatiquement via la class class="auto-resize"

Ajouter ou enlever un cadre noir

La fenetre intégrée peut être encadrée ou non.
Dans le code de l'« iframe », vous pouvez préciser frameborder="1" (avec cadre noir) ou frameborder="0" (sans cadre noir)

---