Tuesday, May 26, 2015

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.

6 comments:

  1. awesome embedding tool. I love it!

    ReplyDelete
  2. Hello,
    We use Schoology at our school and I would like to embed my Blogger page as an iframe into a schoology page. I tried your code and I replaced the URL with my blogger page URL and it doesn't show anything. Do you know why or a fix for this?

    ReplyDelete
    Replies
    1. Hi, Nancy -- I was able to embed our blog into a Schoology page and as a regular inserted link. (It looks better embedded in a page.) Where were you trying to embed the code?

      Delete
  3. I am trying to embed a desmos tool into a schoology quiz so that I can have students make a graph. I can't figure out how to have their created graph show up as an answer submission. What question type should I choose? Or is this possible??
    -Emilie Cross

    ReplyDelete
    Replies
    1. Good question, Emily. Adding the Desmos calculator this way is purely for interaction within a question rather than as a way to post an answer. It won't capture the graph as a submission (yet). However, you could have students take a screencap and upload the image for their answer. This would entail making it possible for students to provide rich text answers (there is an insert image option).

      Delete