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!
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're looking at the world's largest plane. This colossal craft, named the Stratolaunch, is being built by @microsoft's Paul Allen and will be used to launch rockets into space. It's not quite operational yet, but with 28 wheels and a whopping 385-metre wingspan, we can'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>
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
Russell, would you be willing to walk through the steps of creating the web object and inserting in into Storyline? Inserting a web object once created I think I can tackle, it's the beginning steps of this process that are giving me trouble. Thanks,
Thank you for the reply, Russell. I really appreciate it. I thought a post from over four years ago would be dead in the water, but I'm happy to see it wasn't. Saved me a ton of time.
12 Replies
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're looking at the world's largest plane. This colossal craft, named the Stratolaunch, is being built by @microsoft's Paul Allen and will be used to launch rockets into space. It's not quite operational yet, but with 28 wheels and a whopping 385-metre wingspan, we can'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.
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.
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
When you publish the course, the Web Object will be automatically added to the story_content folder.
Russell, would you be willing to walk through the steps of creating the web object and inserting in into Storyline? Inserting a web object once created I think I can tackle, it's the beginning steps of this process that are giving me trouble. Thanks,
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
Thank you for the reply, Russell. I really appreciate it. I thought a post from over four years ago would be dead in the water, but I'm happy to see it wasn't. Saved me a ton of time.
also i want to learn about that., its looking difficult to perform that task.