Insérer une image Instagram

[kiarie]

Bonjour,

Voilà sur Instagram il existe un code d'intégration pour permettre aux gens de poster les photos sur d'autres sites. Sur Forumactif ce code s’insère bien et prend la présentation donner par Instagram mais n'affiche pas la photo. Comment régler ce souci? Merci d'avance


Exemple du code:

Code:

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BDbrJ9SkkgW/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">#chat #cat #suricate</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Une photo publiée par Kiarie (@kiarie99) le <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-03-26T22:07:01+00:00">26 Mars 2016 à 15h07 PDT</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

[Invité]

bonsoir ,
je ne connait pas instagram , mais il doit vous manqué quelques choses
bon par contre ce n'est pas très bien traduis >>

Le code d'intégration contient un code HTML de prévisualisation et une référence à l'Instagram de la bibliothèque JavaScript. Lorsque la bibliothèque est chargée, il scanne la page pour le code HTML et génère le poste rendu complet.

en gros il doit avoir un lien script a placé dans votre head (overall_header)

voir ici > https://www.instagram.com/developer/embedding/#oembed

[kiarie]

Bonsoir!

Humhum ... Et vu que je suis une grosse bille en anglais, il n'est pas dit ou trouver ce fameux script? A moins que ce soit la dernière ligne du code cité plus haut?

[Invité]

non apparemment , je cherche

[kiarie]

D'accord, merci en tout cas x)

[Invité]

Bonjour,

Salutations R-max
Je penche plus pour une sécurité du côté de FA(étant donné que toute balise script est remplacée après l'envoi d'un messsage et qu'ailleurs cela fonctionne du style les widgets etc.) ou bien d'un problème avec sceditor m'enfin je me trompe peut-être...
En mettant dans la gestion des codes javascript coché sur les sujets seulement ce code:

Code:

$(document).ready(function() {
$('.post blockquote.instagram-media a[href^="https://www.instagram.com/p/"]').each(function() {
var u = $(this).attr('href').split('https://www.instagram.com/p/')[1];
$(this).parent().parent().parent().parent().replaceWith('<embed class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/'+ u +'embed/captioned/?v=6" allowtransparency="true" frameborder="0" height="800" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="border: 0px; margin: 1px; max-width: 658px; width: calc(100% - 2px); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 1px 0px, rgba(0, 0, 0, 0.14902) 0px 1px 10px 0px; display: block; padding: 0px; background: rgb(255, 255, 255);"></embed>');
});
});

Cela réglera le problème(en principe).
Bon courage à plus.

[kiarie]

Bonjour,

je viens de tenté en plaçant le code dans mes javascript et en cochant bien toutes les pages mais ça ne marche pas.

[Invité]

Il doit y avoir un conflit avec d'autres scripts... Chez moi cela fonctionne sans soucis:
- http://mestests.forumactif.org/t6-nnnnnnnnnnnnnnnnnnnnnnn

On peut avoir une page où vous testez le code svp? merci d'avance

@+

[kiarie]

Ah non c'est bon! Je suis du coup aller testé sur un forum teste et ça a marché du coup j'ai retenté sur mon forum ou je n'avais fais le teste qu'en prévisualisation ou ça ne marchait pas mais en postant réellement l'image ça marche bien!

Merci beaucoup!

[Invité]

Pas de soucis je comprends mieux (je supprime les modules)

Bonne soirée ^^