Embed media issue

murko · Tue May 31, 2016 11:37 am

Dunno if I'm just doing it wrong or if this is not working properly.
Used Nibbleblog for a long time and there it works fine to embed directly from for exeample instagram and spotify.
Spotify uses a simple iFrame so that also works on Bludit, but I can't get the embeded media from Instagram to show properly. The image/vide is a no show and alll I get is the text/tags

Just made two test posts to show: http://easycaptures.com/fs/uploaded/952/5443569503.jpg

The embeded code from instagram that don't work on Bludit is:

Code: Select all

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" 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=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BGBr1fkyAxi/" 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">Fintishan på vid trombocytlämning!  #geblod #trombocyter #bliblodgivare #hattrick #engodgärning</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;">Ett foto publicerat av micke olsson (@murko69) <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-05-30T09:26:54+00:00">Maj 30, 2016 kl. 2:26 PDT</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

,,same embeded code works fine on my Nibbleblog installation.

Tue May 31, 2016 2:45 pm

Yes, the embedding does not work. This seems to be a problem with the decoding of the image:

Code: Select all

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC)

Wed Jun 01, 2016 1:15 am

Hi, what editor are you using ? because Nibbleblog has Tinymce as default and Bludit has SimpleMDE (you can change to the plugin Tinymce).

Wed Jun 01, 2016 1:54 am

I tried with TinyMCE, but this also does not work. In this case the part with the coded image information gets lost.

murko · Wed Jun 01, 2016 2:29 am

Yes I tried with default editor and the ones I found in the plugin list. All of them gave the same result really.
And there's no difference if I chose another image. I tried 4 different images on Instagram on random (if I misunderstood that the specific image had an error?)

Wed Jun 01, 2016 2:30 am

The problem is in the embed code. It's missing the protocol <script async defer src="https://platform.instagram.com/en_US/em ... "></script>

Try this:

Code: Select all

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" 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=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BGBr1fkyAxi/" 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">Fintishan på vid trombocytlämning!  #geblod #trombocyter #bliblodgivare #hattrick #engodgärning</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;">Ett foto publicerat av micke olsson (@murko69) <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-05-30T09:26:54+00:00">Maj 30, 2016 kl. 2:26 PDT</time></p></div></blockquote>
<script async defer src="https://platform.instagram.com/en_US/embeds.js"></script>

murko · Wed Jun 01, 2016 2:33 am

diego wrote:The problem is in the embed code. It's missing the protocol <script async defer src="https://platform.instagram.com/en_US/em ... "></script>

Try this:

Code: Select all

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" 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=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BGBr1fkyAxi/" 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">Fintishan på vid trombocytlämning!  #geblod #trombocyter #bliblodgivare #hattrick #engodgärning</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;">Ett foto publicerat av micke olsson (@murko69) <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-05-30T09:26:54+00:00">Maj 30, 2016 kl. 2:26 PDT</time></p></div></blockquote>
<script async defer src="https://platform.instagram.com/en_US/embeds.js"></script>

Thanks for answering but if you read my initial post and not just the one from the other user you'll see in my code that part is included

Wed Jun 01, 2016 2:34 am

I dont see the HTTPS://

did you try my code?

murko · Wed Jun 01, 2016 2:39 am

Funny thing though. 3 out of 4 of the failed embedded instagram pics are now showing up (eventhough I didn't edit the posts)
One of them is still not shown

I'll have to scratch my head and check back again tomorrow. It's 2,30 AM and I need some sleep

Thanks for the input/help though. I'll check in tomorrow and see if I get the hang of it

murko · Wed Jun 01, 2016 2:47 am

diego wrote:I dont see the HTTPS://

did you try my code?

Sorry, no I missed that part. Didn't see anything different though.
But as I just stated, the pics are now showing up all of them with this ending:

Code: Select all

<script src="//platform.instagram.com/en_US/embeds.js"></script>

(no https://)
and that's the original code that instagram gave me.

Don't know why it took a complete day for them to show up and what the secure part (https) has to do with it.
I'm just glad they showed up at all