How to embed Instagram pictures on SugarCube 1 - Twine?

0 votes
asked May 9 by arfinta (130 points)

I tried embedding an Instagram post using an embedded code generated through Instagram:

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/BaAR6Gujr2d/" 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=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BaAR6Gujr2d/" 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">Happier now with my body than I’ve ever been, even after two beautiful babies  In my @loungeunderwear</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;">A post shared by <a href="https://www.instagram.com/tammyhembrow/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀Tammy </a> (@tammyhembrow) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-10-08T22:48:58+00:00">Oct 8, 2017 at 3:48pm PDT</time></p></div></blockquote> <script async defer src="//www.instagram.com/embed.js"></script>

but the image did not show. Please help!

I'm using Sugarcube 1.0.35 on Twine, but when I use Sugarcube 2.21.0 it shows but everything else is ruined. Not wanting to start over, can anyone help how I can still use Sugarcube 1.0.35 but have the images to display properly?

I have no clue why the image won't show, I tried adding "https:" on the script but it doesn't work or display the image from the post.

1 Answer

+1 vote
answered May 9 by greyelf (83,430 points)

There are two issues with the example you provided:

1. The src URL of the <script> element is missing the required http: protocol at the start of it.
2. You can't use a <script> element like that in SugarCube.

Replace the whole of the <script> element with the following

<<script>>
$.getScript("http://www.instagram.com/embed.js");
<</script>>

 

commented May 9 by arfinta (130 points)
it worked perfectly, Thank you soooooo much!
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...