Page 1 of 2
Embed media issue
Posted: Tue May 31, 2016 11:37 am
by murko
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.
Re: Embed media issue
Posted: Tue May 31, 2016 2:45 pm
by Edi
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)
Re: Embed media issue
Posted: Wed Jun 01, 2016 1:15 am
by diego
Hi, what editor are you using ? because Nibbleblog has Tinymce as default and Bludit has SimpleMDE (you can change to the plugin Tinymce).
Re: Embed media issue
Posted: Wed Jun 01, 2016 1:54 am
by Edi
I tried with TinyMCE, but this also does not work. In this case the part with the coded image information gets lost.
Re: Embed media issue
Posted: Wed Jun 01, 2016 2:29 am
by murko
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?)
Re: Embed media issue
Posted: Wed Jun 01, 2016 2:30 am
by diego
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>
Re: Embed media issue
Posted: Wed Jun 01, 2016 2:33 am
by murko
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
Re: Embed media issue
Posted: Wed Jun 01, 2016 2:34 am
by diego
I dont see the HTTPS://
did you try my code?
Re: Embed media issue
Posted: Wed Jun 01, 2016 2:39 am
by murko
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
Re: Embed media issue
Posted: Wed Jun 01, 2016 2:47 am
by murko
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
