Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
embedding [2018/03/11 11:16]
javaskater [Plus d'infos et de parmètres sur [embed]]
embedding [2018/03/11 13:06] (Version actuelle)
javaskater [Cas particulier d'une Galerie de photos Google]
Ligne 6: Ligne 6:
     * On notera FaceBook depuis la version 4.7 du noyau     * On notera FaceBook depuis la version 4.7 du noyau
     * Ils ne parlent pas de Google Photos qui maintenant sont accceptées:​     * Ils ne parlent pas de Google Photos qui maintenant sont accceptées:​
-===== Cas d'​une ​ Galerie de photos Google =====+====== Cas particulier ​d'​une ​ Galerie de photos Google======
 * Tout est dans l'​extension [[https://​fr.wordpress.org/​plugins/​google-photos-embed/​|Google Photo Embed]] * Tout est dans l'​extension [[https://​fr.wordpress.org/​plugins/​google-photos-embed/​|Google Photo Embed]]
   * Si le lien de partage de la galerie de photos (personnes disposant du lien) est:   * Si le lien de partage de la galerie de photos (personnes disposant du lien) est:
Ligne 18: Ligne 18:
    * au tout début de [[http://​rsmontreuil.fr/​open-mondial-dijon/​|l'​article de Josiane sur l'Open Mondial de Roller Artistique à Dijon]]    * au tout début de [[http://​rsmontreuil.fr/​open-mondial-dijon/​|l'​article de Josiane sur l'Open Mondial de Roller Artistique à Dijon]]
 =====NB:​===== =====NB:​=====
-* Il y a bien d'​autres options que +* Il y a bien d'​autres options que **Caption** pour l'​inclusion (//​Embedding//​ en anglais) de notre contenu Google Photos dans notre article 
 +   * Elles sont toutes décrites sur [[https://​fr.wordpress.org/​plugins/​google-photos-embed/​|La page principale de l'​extension]]
  
-=====Pour les développeurs ​===== +====== ​Cas particulier d'un autre site WEB: ====== 
-====oembed==== +* [[https://wordpress.org/plugins/​iframe/|L'​extension IFRame pour Wordpress]]  
-  tout s'​appuie sur le module ​[[https://github.com/iamcal/oembed|oembed (PAge GitHub)]] +Nous permet simplement d'​inserer le contenu d'une page d'un autre site Web dans notre article / page en cours d'​édtions:​ 
-  on notera les fournisseurs actuels notamment ​[[https://fr.slideshare.net/|SlideShare]] +==== Exemple concret ==== 
-    * [[https://github.com/iamcal/oembed/blob/​master/​providers/​slideshare.yml|configuration oEmbed pour SlideShare]] +* L'​article ​[[http://rsmontreuil.fr/​quand-fanfan-fait-passer-la-roue-bleue-a-une-future-bef-derby/|Passage de la roue bleue à la RAndonnée Sportive]] 
-====dans Wordpress==== +  fait appel en fin d'​article à  ​[[http://randosportiversm.blogspot.fr/2018/02/doriant-1302-dernier-avant-les-vacances.html|la page correspondante du Blog Note de la Randonnée Sportive]] 
-  ​* /home/jpmena/CDRS/wordpress/​wp-includes/​embed.php ligne 120: +Au niveau du code de rédaction de l'​article (onglet ​//Visuel//) cela se traduit simplement par 
-<​code ​php+<​code>​ 
-/** +[iframe src="​http:​//​randosportiversm.blogspot.fr/2018/02/doriant-1302-dernier-avant-les-vacances.html"​]
- * Adds a URL format and oEmbed provider URL pair. +
- * +
- * @since 2.9.0 +
- * +
- * @see WP_oEmbed +
- * +
- * @param string ​ $format ​  The format of URL that this provider can handle. You can use asterisks +
- ​* ​                         as wildcards. +
- * @param string ​ $provider The URL to the oEmbed provider. +
- * @param boolean $regex ​   Optional. Whether the `$format` parameter is in a RegEx format. Default false. +
- */ +
-function wp_oembed_add_provider( $format, $provider, $regex = false ) { +
-   if ( did_action( '​plugins_loaded'​ ) ) { +
- $oembed = _wp_oembed_get_object();​ +
- $oembed->​providers[$format= array( $provider, $regex ); +
-   } else { +
- WP_oEmbed::​_add_provider_early( $format, $provider, $regex ); +
-   } +
-}+
 </​code>​ </​code>​
 +* Bien sûr le code **iframe** peut être enrichi de nombreuses options:
 +  * ici nous utilison juste l'​option (obligatoire) **src** qui sert à pointer vers la page Web que l'on veut insérer dans notre page/​article
 +  * toutes les options disponibles sont indiquées sur [[https://​wordpress.org/​plugins/​iframe/​|la page d'​accueil de l'​extension]]
  
-====== ​Via le le module iframely ​====== +======Cas particulier d'un ou d'une liste de Posts Facebook====== 
-  TODO à tester à quoi sert la clé API ? +Grâce ​à l'​extension ​[[https://fr.wordpress.org/​plugins/​custom-facebook-feed/|Custom FaceBook Feed]] 
-  * Tous ces modules sont référencés sous [[https://​wordpress.org/​plugins/​tags/oembed/|le Tag oEmbed ​de Wordpress]] +  * Nous pouvons insérer un post ou un Feed d'une page FaceBook dans notre article 
-  * Pour l'​URL ​précédente la page https://iframely.com/embed/https%3A%2F%2Fgoo.gl%2Fphotos%2F3UdK3QKvpjjYS2Zq7 génère ​ +===== Prérequis ===== 
-    * le code: +* Pour un Flux: la page FaceBook doit être publique 
-<code html> +* Pour un Post: le post en question doit être public !!! 
-<div style="​max-width:​ 720px;">​ + 
-    <div style="​left:​ 0; width: 100%; height: 0; position: relative; padding-bottom:​ 52.5%;">​ +===== Affichage d'un flux FaceBook ===== 
-         <​iframe src="//cdn.iframe.ly/C9Hpbmj"​ style="​border:​ 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"​ allowfullscreen>​ +* Un cas concret est donné par [[http://​rsmontreuil.fr/​marathon-roller-paris/|l'​article RSM sur le MArathon ​de PAris]] 
-         </iframe> +  * vers la fin duquel on affiche les derniers posts de [[https://​www.facebook.com/​parisrollersmarathon/​|la page FaceBook parisRoller MArathon]] 
-      </div+  * On note que l'​URL ​de cette page (**https://www.facebook.com/parisrollersmarathon/**) ce termine par **parisrollersmarathon** 
-</​div>​+c'est lui l'​identifiant FaceBook de notre page qui va nous servir dans le code à insérer dans l'​éditeur 
 +* Au niveau du code de rédaction de l'​article (onglet ​//Visuel//) cela se traduit simplement par 
 +<code
 +[custom-facebook-feed id=parisrollersmarathon num=3]
 </​code>​ </​code>​
-  ​iframely a donc créé un redirecteur avec image d'​accueil:​ +Ici on utilise les 2 options suivantes 
-    http://​cdn.iframe.ly/​C9Hpbmj +  ​* ​**id** pour spécifier via l'identifiant précédent ​à quel flux Facebook on se rattache 
-    ​Et le module capte l'URL initiale pour la remplacer par un appel à cet url!!! +  * **num** pour régler ​le nombre de posts (version résumée) que l'on veut voir afficher sur notre page 
-  * Sous Wordpress, Il génère en affichage ​le code: +* Ces informations (et d'​autres encore) sont sur [[https://fr.wordpress.org/plugins/custom-facebook-feed/​|la FAQ présente sur la page d'​accueil du module]]  
-<code html> + 
-<div class="​w">​  +===== Affichage d'un Post/Photo/Video FaceBook ​===== 
-  <a href="https://goo.gl/photos/3UdK3QKvpjjYS2Zq7"​ target="​_blank"​ class="​c"​ style="​background-image:​ url('//if-cdn.com/​pj?​url=https%3A%2F%2Flh3.googleusercontent.com%2Fsf66XxKWXB3lQksS9M_l_dxX-JGxViAJDn3qcIka8jKmWqEw5Fg0UW72cgetu5WqM7Z_fVhpQWqZFdLWNuejC_c5xGOkm8oMew9wgEWSJ8n_KhUMT_cuKVuqZxyzy2d2G2Ia3NIfois%3Dw600-h315-p-k&​amp;​width=1280&​amp;​key=12b5518211ab8243e0b88d5081aa64fcf95f468b&​amp;​cache=temp&​amp;​new=1');"> ​ +* Ici pas besoin d'extension particulière !!!! 
-  ​OPEN MONDIAL DIJON  JUILLET 2017  +* On copie l'URL (adresse Webdu Post/​Photo/​Vidéo en question ​ 
-  </a>   +  ​* aller  sur le Post/Photo/Vidéo en question trouvez ​ l'​option de partage par lien 
-  <div class="​m">​  +  * récupérer le lien public en question 
-    <a href="​https:​//​goo.gl/​photos/​3UdK3QKvpjjYS2Zq7"​ target="​_blank">​Google Photos +* On Ajoute **Media via URL** (Ajouts de médias au niveau de l'​éditeur) comme dans le cas d'une Vidéo YouTube ou Viméo 
-    </a>  + 
-  </​div>​  +
-</​div>​ +
-</​code>​ +
-  * IFramely utilise ​dans la librairie ''​wordpress/​wp-content/​plugins/​iframely/​js/​iframely.js'​+
-    * tirée du [[https://​github.com/​itteco/​iframely|projet IFramely sur GitHub]] ​+