Intégrer un iframe Fiche 21 2 étapes : 1- Copier les codes iframe des applications

A-FACEBOOK B-TWITTER C-INSTAGRAM D-GOOGLESLIDE E-GENIAL.LY F-PIKTOCHART G-PADLET H-VIMEO

2- Coller les codes iframes des applications dans wordpress

1-Copier les codes iframe des applications

A- FACEBOOK

● Cliquer sur ce lien : https://developers.facebook.com/docs/plugins/page-plugin ● Copier l’adresse de votre facebook puis cliquer sur obtenir le code et le copier

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FCDIlyceesteMarieCholet%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&

Révisé par CCliquennois le 09 juillet 2018 page 1 / 9

hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

B- TWITTER:

● Cliquer sur : https://publish.twitter.com/?query=https%3A%2F%2Ftwitter.com%2Fcdi49300%3Flang%3Dfr&widget=Timeline

● Coller l’adresse de votre compte twitter et choisir si vous voulez intégrer une timeline ou un bouton

● Copier le code

Révisé par CCliquennois le 09 juillet 2018 page 2 / 9

C-INSTAGRAM

● Copier ce code en changeant l’adresse, le titre et le nom du propriétaire : <h3><strong><a href="https://www.instagram.com/docslyceestemarie/">L'instagram des docs</a> @docslyceestemarie :</strong></h3> <br /><br /><!-- SnapWidget --> <script type="text/javascript"></script> <iframe style="border: none; overflow: hidden; width: 100%;" scrolling="no" frameborder="0" allowtransparency="true" class="snapwidget-widget" src="https://snapwidget.com/embed/529060"></iframe>

D-GOOGLE SLIDE

● Dans le menu fichier, cliquer sur “publier sur le web”

● Cliquer sur “intégrer” et copier le code :

Révisé par CCliquennois le 09 juillet 2018 page 3 / 9

E-GENIAL.LY

● Se rendre sur le tableau de bord et cliquer sur l’icône “partager”

● Cliquer sur “insérer” et copier le code iframe

Révisé par CCliquennois le 09 juillet 2018 page 4 / 9

F-PIKTOCHART

● Dans le tableau de bord en mode connecté, cliquer sur les 3 points en haut à droite de votre document puis sur “share”

● Copier le code suivant :

D’autres applications peuvent être intégrées. En l’état actuel de nos tests, l’intégration de calaméo et de kizoa ne fonctionne pas.

Révisé par CCliquennois le 09 juillet 2018 page 5 / 9

G-PADLET

● Cliquer sur partager en haut à droite puis “partager/exporter/intégrer” ● Cliquer sur “Intégré sur votre blog ou votre site internet”

● Copier le code :

Révisé par CCliquennois le 09 juillet 2018 page 6 / 9

H-VIMEO

● Chez Viméo; sélectionner la vidéo à insérer. Cliquer

● Faire les réglages suivants :

Révisé par CCliquennois le 09 juillet 2018 page 7 / 9

 

Etape 2 : Coller le code de l’iframe dans WordPress 1

● Si vous n’avez qu’un iframe à intégrer dans la page, coller le code en

édition simple, onglet texte. Publier.

● Si vous avez plusieurs iframes à intégrer, créer une section et une ligne à l’aide du DIVI (Construire en FrontEnd).

● Insérer un module “Code”.

● Dans l’onglet Contenu / Texte, coller (Ctrl V) le code iframe.

● Valider le Bloc

● Enregistrer la page/article

1 Pour les iframes de Vimeo, il semble qu’il faut être en admin.rne “pour que cela fonctionne” (au 09 juillet 2019)

Révisé par CCliquennois le 09 juillet 2018 page 8 / 9

Révisé par CCliquennois le 09 juillet 2018 page 9 / 9