Instagram embeds breaking posts

Support
#1

Hi. I’ve had all sorts of problems with instagram embeds within blog posts. I have flagged this previously on the forum before, see here: https://theme.co/apex/forum/t/instagram-embeds-not-working-properly/13167

I’ve kept the site on v 1.1.1 and since October everything has been working fine, until today. The client has added two blog posts, using the same post template and embed method as previously, but they are not displaying properly. I’ve added a secure note with links that demonstrate the issue.

#2

Hello There,

Thanks for posting in! Regretfully we cannot check the post because it does not exist. Perhaps it is set as private. Please provide us access so that we can take a closer look.

Regards.

#3

Sorry, when I added the topic, the posts were live, I’ve unpublished them at the client’s request.
Login details added to the secure note now.

#4

Hello There,

Thanks for providing the information. I have logged in and check the page. Since you added an html code,

<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/BVwwR9pHrCY/" data-instgrm-version="8" 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,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div><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;"><a href="https://www.instagram.com/p/BVwwR9pHrCY/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A post shared by Clos Maggiore (@clos_maggiore)</a> on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-06-25T12:00:57+00:00">Jun 25, 2017 at 5:00am PDT</time></p></div></blockquote> <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

Please remove the text element and replace it with content area or raw content element. The text element does not render html codes properly because it is only intended to display text though a few html tags is permitted.

Please edit the page and insert an instagram link. Do not use the embed code.

Please let us know how it goes.

#5

Hi, I have taken a version of the site onto my staging server for testing (URL & login on secure note). This version of the site is now updated to 1.2.7 and the problems I initially had with instagram posts appears to be resolved; however it hasn’t fixed the issues with these newer posts.

I’ve edited one of the posts using the method suggested above: adding the instagram embed to a content (rather than text) element, and the same thing is happening. When I add an instagram link to a content area, it only displays the link text, not the image.

What I don’t understand is why older posts are working and displaying everything fine, but these newer posts are experiencing problems. They are all using the same blog template

#6

Hi there,

I’m not sure if this is element specific, but the one causing this issue is the absolute styling applied to your iframe.

Please check this video https://www.dropbox.com/s/wo63orrpk6ialoh/bandicam%202018-02-13%2000-58-26-413.mp4?dl=0

But I’m sure that our builders don’t add that position: absolute;, please check the embed code. It could be generated on-fly so you may contact the author of the code. And I don’t see that absolute positioning on the working URL.

Thanks!

#7

In both instances, I am using the standard instagram embed code. I don’t understand why it is adding iframe styling on the embeds further down the page. This has only started happening on recent posts, all older ones are fine.

#8

Hi there,

In that case, I’ll continue checking but please add this CSS to your global custom CSS as a temporary fix.

    .instagram-media {
     position: static !important;   
    }

Thanks!

#9

That’s worked. Thank you.

#10

Glad to hear it!

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.