Embedding Instagram

When you publish the course, the Web Object will be automatically added to the story_content folder.

Maybe inserting it as a Web Object will work for you. I have zipped up a sample Web Object and Storyline 2 project file for you to take a look at.

Hi Ryan,

To create this web object required a little bit of html programming.

You can do some html programming using a text editor like notepad.

When saving your file from notepad, you will want to give it a .html extension.

If you open up the Instragram.html file in notepad, you will see this:

You can see the code that Graham provided between the <center> and </center> tags.

If you want to learn more about html programming, check out:

https://www.w3schools.com/html/default.asp

Hi Graham,

What's the code look like? It's not something I've tried, but it's often something easy like an errant ' mark, or not using the straight quote vs. the open quote. If you could share it here I can take a look! 

Hi Ashley

This is an example of the code that Instagram generates for embedding.

<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:28.194444444444443% 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/BU--vivjDDM/" 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">You&#39;re looking at the world&#39;s largest plane. This colossal craft, named the Stratolaunch, is being built by @microsoft&#39;s Paul Allen and will be used to launch rockets into space. It&#39;s not quite operational yet, but with 28 wheels and a whopping 385-metre wingspan, we can&#39;t wait for it to take flight. #planes #aircraft #engineering #wings #flying #space #rockets</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 WIRED magazine (UK edition) (@wireduk) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-06-06T04:05:18+00:00">Jun 5, 2017 at 9:05pm PDT</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

That last line in your embed code that reads "//platform.instagram.com", change that to "https://platform.instagram.com".

Hi Michael - thanks for the suggestion but SL still wont accept that as a valid code.

Graham, as Russell said, it seems to work fine embedded as a web object. That's how I had tested it in Storyline 3.

Hi guys - thanks for this - Russell, I see you created the web object as a html file in a folder on your desktop and then pointed the web object link to its location on your drive.

Any idea how i would get this to work for a course being published in an LMS?  Does SL pick up the file and package it as part of its scorm output or would i have to

(A) Upload the html file to the LMS's content server

(B) Point the link of the web object in SL to the location of the file on the LMS server

(C) Publish the e-learning and uploading that to the LMS

Or is there a simpler way im not thinking of?

Thanks

also i want to learn about that., its looking difficult to perform that task.