How to Embed Content When You Don't Have Embed Code

We've posted previously about the magic of embed code, but we had a question this week from one of our school technology coordinators about embedding a graphing calculator tool (Desmos) into an assessment in Schoology, our LMS.  While Desmos gives embed code for a graph that is saved and created (as a static .jpg or image), what if you want to embed the tool itself into a page?  How can you insert an interactive tool or webpage if you don't have the actual embed code?

In this case, an easy option is to create your own using a variation of code with iframe attributes.  When you embed media (like from YouTube, for example), the embed code looks like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/qp0HIF3SfI4?rel=0" frameborder="0" allowfullscreen></iframe>

The basic components above are the width, the height, and the source URL.  If you want to embed something and you don't have the right embed code, you can just replace or change the parts of the code for what you want to embed.

So, in the scenario mentioned earlier for getting the graphing calculator into Schoology, I would change the code to look like this:

<iframe width="100%" height="400" src="https://www.desmos.com/calculator"></iframe>

Once you have the code, you can decide where you would like to place it. In web pages or blogs, you may need to look for the "HTML" option and paste in the code. In something like Schoology, it's even easier. You can paste embed code into a page, a discussion board, a test/quiz question, an assignment, and/or as a link. To add embed code to interactive student activites in Schoology:

1. In the rich text editor window, use the "Insert Content" icon.
2. Choose "Image/Media." 
3. Choose "From the Web" and make sure you choose "Media."
4. Paste in the code, and the embedded item will appear when you save.

When my modified code is pasted into Schoology (or somewhere else like Blogger), the embedded item below would appear.  Notice that I changed the width to 100%, which automatically adjusts your embedded content to fit the window, and I made the height number a bit bigger since there is a keypad tool that students can use.  If you need to change the width or height, you can always experiment with the numbers until it looks the way you want it to.


Pretty slick!  Now you can just copy and paste the code I included above and replace the URL with whatever you need.   While this doesn't work for everything (and you can find embed code for most things on the web), this is a good workaround when you need to embed something and aren't provided the code.