• Hi,

    If I insert the instagram embed code (code that instagram provides or each image when u click on it) , it looks like this:

    http://snag.gy/6ggT9.jpg

    Basically the blockquote tag in the embed code turns into this.
    Here’s the original code:

    <div style=”padding:8px;”> <div style=” background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 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;”> My culinary experiments – baked potato wedges #appetiser #foodporn #ipadography</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;”>A photo posted by Twilight Fairy (@twilightfairy) on <time style=” font-family:Arial,sans-serif; font-size:14px; line-height:17px;” datetime=”2015-02-03T07:44:47+00:00″>Feb 2, 2015 at 11:44pm PST</time></p></div>

    <script async defer src=”//platform.instagram.com/en_US/embeds.js”></script>

    Pls fix

Viewing 15 replies - 1 through 15 (of 40 total)
  • Hi mate πŸ˜›
    this time I’m unable to reproduce your bug.
    What exactly is the code you have in your post? (I mean, include the whole post)..

    Thread Starter twilightfairy

    (@twilightfairy)

    I’ve removed this code from my blog post because it was showing up as just “code”.. instead of an embedded instagram image.
    But I’ve pasted the code above for u.. that snippet is supposed to embed an instagram image into a post.

    Perhaps you can copy/paste that code into a blogpost (text mode in wordpress) and see what happens? the desired result is an embedded image like the ones at http://blog.twilightfairy.in/2015/02/03/queens-luncheon/

    Hope this helps?

    Well, I did this:

    Perhaps you can copy/paste that code into a blogpost (text mode in wordpress) and see what happens? the desired result is an embedded image like the ones

    And wrapped the code in a blockquote, but I cannot reproduce your issue. That’s what I meant, and that’s why I asked you for the whole post πŸ™‚

    Thread Starter twilightfairy

    (@twilightfairy)

    ok, got it.. here’s the code again:

    http://pastebin.com/73rEJZ6D

    since the support page is also acting on that html code, it may not have shown correctly.. does this help? (don’t have the code in the post anymore so unable to share that )

    Was the post a standard post?
    I copied the code in the pastebin, that’s the result in my test blog:
    http://i58.tinypic.com/zo2tw.png
    I’m not able to reproduce it πŸ™

    Btw,
    consider that the blockquote wrapper is totally replaced by the instagram script, so don’t use it, it’s useless..

    Thread Starter twilightfairy

    (@twilightfairy)

    yes it was a standard post. i changed its type to image as well. and in both cases had same issue.

    I guess I’ll create a temporary post to recreate the issue and share that with u.

    Thread Starter twilightfairy

    (@twilightfairy)

    Here’s the test post

    http://blog.twilightfairy.in/2015/02/05/testpost/

    I’ve tried to embed the same instagram image. However the blog post just shows code instead.

    Thread Starter twilightfairy

    (@twilightfairy)

    use this link instead.

    http://blog.twilightfairy.in/?p=619&preview=true

    That blogpost was public and getting too many views.

    now i have made this unpublished but u can access it with above link

    Hi twilightfairy,
    as I told you I’m unable to reproduce that issue, that’s why I asked you to give me the whole post code. Just the blockquote part to me works fine.
    Also you I cannot see the preview, of course, that one is visible just for logged in users who have some capabilities (edit posts/pages).
    Another reason why I’m not able to reproduce that and you can could be that there’s some plug-in you use which creates that conflict..?!

    Thread Starter twilightfairy

    (@twilightfairy)

    Hi d4z . I’d shared a proper blogpost to begin with (see above) but when there was no response for a substantial time, I figured I’ll hide it temporarily and give alternate link if that works as well ..

    so now I’ve made that post public again.. you can see it here
    http://blog.twilightfairy.in/2015/02/05/testpost/

    Pls let me know when you are done with it so that I can hide it again

    Yes I know, and I understand that you had to hide it..
    Again I’m unable to reproduce it, to me it works and if you want I can send you another screen shot.
    But as I said before:

    Another reason why I’m not able to reproduce that and you can could be that there’s some plug-in you use which creates that conflict..?!

    And I think is that sharing plug-in you have above the post content, which is?

    Thread Starter twilightfairy

    (@twilightfairy)

    I’ve now disabled ALL the social sharing plugins and one more instagram plugin.. and still the issue persists πŸ™

    I think the problem is to do with the blockquote tag .. instagram is putting its embed code in the same tag for some reason. When the WP theme sees that tag, it overrules that and applies the blockquote “action” as per the theme, as can be seen in the post (orange bar next to quoted text).. what do u think?

    twilight, I can still see the twitter button.
    That one cause the issue… isn’t a plugin? what is?

    Thread Starter twilightfairy

    (@twilightfairy)

    disabled that too. still the same

    From your page:

    <section class="entry-content ">
                  <!-- Powered by Shantz WP Prefix Suffix. Tech Blog: http://tech.shantanugoel.com/ Secure Programming Blog: http://www.safercode.com/blog/ Blog: http://blog.shantanugoel.com/ --><div class="wpbuzzer_button" style="float: right"><a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-url="http://blog.twilightfairy.in/2015/02/05/testpost/" data-imageurl=""></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></div><p>test post.</p>
    <p> </p>
    <p>embedding instagram image</p>
    <blockquote class="instagram-media" style="background: #<a href="http://search.twitter.com/search?q=%23FFF" rel="nofollow" target="_blank" title="Search Twitter for "FFF"">FFF</a>; 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: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="4">
    <div style="padding: 8px;">
    <div style="background: #<a href="http://search.twitter.com/search?q=%23F8F8F8" rel="nofollow" target="_blank" title="Search Twitter for "F8F8F8"">F8F8F8</a>; line-height: 0; margin-top: 40px; padding: 50% 0; text-align: center; width: 100%;"></div>

    what’s that wpbuzzer? and you can all that mess with the “a href=”http::/search.twitter.com” etc etc placed everywhere?

Viewing 15 replies - 1 through 15 (of 40 total)
  • The topic ‘Instagram embed not working in blogposts’ is closed to new replies.