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 [2017/11/30 08:13]
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]]
   * 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:
     * https://​goo.gl/​photos/​3UdK3QKvpjjYS2Zq7     * https://​goo.gl/​photos/​3UdK3QKvpjjYS2Zq7
     * Alors le code à taper dans l'​éditeur est:     * Alors le code à taper dans l'​éditeur est:
 <​code>​ <​code>​
-[embed]https://​goo.gl/​photos/​3UdK3QKvpjjYS2Zq7[/​embed]+[embed ​caption="​le titre que je veux donner à mon Album"]https://​goo.gl/​photos/​3UdK3QKvpjjYS2Zq7[/​embed]
 </​code> ​ </​code> ​
-  ​ne fonctionne pas sans changer les domaines autorisés. IFramely prend une autre solution +Un exemple ​d'utilisation se trouve sur la galerie ​de Photos ​ 
-===== Plus d'infos et de parmètres sur [embed] ===== +   ​au tout début de [[http://rollersports93.fr/marathon-roller-paris/|L'​article CDRS sur le MArathon de Paris]] 
-  https://​codex.wordpress.org/​Embed_Shortcode explique  +   ​au tout début ​de [[http://rsmontreuil.fr/open-mondial-dijon/|l'​article de Josiane sur l'Open Mondial ​de Roller Artistique à Dijon]] 
-    * les options width et height +=====NB:===== 
-    * où trouver le code source +Il y a bien d'autres options que **Caption** pour l'​inclusion (//​Embedding//​ en anglais) de notre contenu Google Photos dans notre article 
-  * Dans le [[https://premium.wpmudev.org/​blog/embedding-wordpress-oembed/|Blog précédent]] ils expliquent comment étendre la liste des url autorisées +   * Elles sont toutes décrites ​sur [[https://fr.wordpress.org/plugins/​google-photos-embed/|La page principale de l'​extension]]
-    ce serait le moyen de faire accepter des photos google e des posts Google+ +
-    * est ce que propose l'​extension ​[[https://wordpress.org/plugins/​iframely/|iframely ​de Wordpress]] ? +
-==== eEmbed ​==== +
-  tout s'appuie ​sur le module ​[[https://github.com/iamcal/oembed|oembed (PAge GitHub)]]+
  
-====== ​Via le le module iframely ​====== +====== ​Cas particulier d'un autre site WEB: ====== 
-  TODO à tester à quoi sert la clé API ? +* [[https://​wordpress.org/​plugins/​iframe/|L'​extension IFRame pour Wordpress]]  
-  * Tous ces modules sont référencés sous [[https://​wordpress.org/​plugins/​tags/oembed/|le Tag oEmbed ​de Wordpress]] +* Nous permet simplement d'​inserer ​le contenu d'une page d'un autre site Web dans notre article / page en cours d'​édtions:​ 
-  * Pour l'URL précédente la page https://iframely.com/embed/https%3A%2F%2Fgoo.gl%2Fphotos%2F3UdK3QKvpjjYS2Zq7 génère ​ +==== Exemple concret ==== 
-    le code: +* 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]] 
-<​code ​html+  * 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]] 
-<div style="​max-width:​ 720px;">​ +Au niveau du code de rédaction de l'​article (onglet //Visuel//) cela se traduit simplement par 
-    <div style="​left:​ 0; width: 100%; height: 0; position: relative; padding-bottom:​ 52.5%;">​ +<​code>​ 
-         <iframe src="//​cdn.iframe.ly/C9Hpbmj"​ style="​border:​ 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"​ allowfullscreen>​ +[iframe src="http://randosportiversm.blogspot.fr/2018/02/doriant-1302-dernier-avant-les-vacances.html"​]
-         </iframe>​ +
-      </div> +
-</​div>​+
 </​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]]
  
-  * iframely a donc créé ​un redirecteur avec image d'accueil: +======Cas particulier d'un ou d'une liste de Posts Facebook====== 
-    http://cdn.iframe.ly/C9Hpbmj +Grâce à l'​extension [[https://fr.wordpress.org/plugins/​custom-facebook-feed/​|Custom FaceBook Feed]] 
-    Et le module capte l'URL initiale pour la remplacer par un appel à cet url!!! +  Nous pouvons insérer un post ou un Feed d'une page FaceBook dans notre article 
-  * Sous Wordpress, Il génère en affichage le code: +===== Prérequis ===== 
-<code html> +* Pour un Flux: la page FaceBook doit être publique 
-<div class="​w">​  +* Pour un Post: le post en question doit être public ​!!! 
-  <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');"> ​ + 
-  ​OPEN MONDIAL DIJON  JUILLET 2017  +===== Affichage d'un flux FaceBook ===== 
-  </a>  ​ +* Un cas concret est donné par [[http://rsmontreuil.fr/marathon-roller-paris/|l'article RSM sur le MArathon de PAris]] 
-  ​<div class="​m">​  +  ​* vers la fin duquel on affiche les derniers posts de [[https://​www.facebook.com/​parisrollersmarathon/​|la page FaceBook parisRoller MArathon]] 
-    <a href="https://goo.gl/photos/3UdK3QKvpjjYS2Zq7"​ target="​_blank">​Google Photos +  ​* On note que l'URL de cette page (**https://www.facebook.com/parisrollersmarathon/**) ce termine par **parisrollersmarathon** 
-    </​a> ​ +* c'est lui l'​identifiant FaceBook de notre page qui va nous servir dans le code à insérer dans l'​éditeur 
-  </div> ​ +* Au niveau du code de rédaction de l'​article (onglet ​//Visuel//) cela se traduit simplement par 
-</div>+<code> 
 +[custom-facebook-feed id=parisrollersmarathon num=3]
 </​code>​ </​code>​
 +* Ici on utilise les 2 options suivantes
 +  * **id** pour spécifier via l'​identifiant précédent à quel flux Facebook on se rattache
 +  * **num** pour régler le nombre de posts (version résumée) que l'on veut voir afficher sur notre page
 +* 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]] ​
 +
 +===== Affichage d'un Post/​Photo/​Video FaceBook =====
 +* Ici pas besoin d'​extension particulière !!!!
 +* On copie l'URL (adresse Web) du Post/​Photo/​Vidéo en question ​
 +  * aller  sur le Post/​Photo/​Vidéo en question trouvez ​ l'​option de partage par lien
 +  * récupérer le lien public en question
 +* 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
 +