Embedding Whole Documents in Your Site or Blog

Some times there may be occasions where you will need more out of your documents or your students documents than simply adding a link for others to access.  There are online services that will allow users to embed whole documents right on a web page or a blog post.  In other words, your chosen document will not only be accessible, but entirely visible and readable without a link or having to download it.

Let me show you.

Here is an example of one service that allows you to upload your documents to their site, then allows you to embed the document in your site.

FoxT.imovie Project 2012 by ratkacher

Those accessing your site or blog can then view and read entire, full-length documents simply because you uploaded documents to the host site and copied the embedding code (HTML) they provide.

("What is embedding code and how do I embed?")

Here are just three services that do this:

Google Drive

Embedding and HTML Code

Perhaps these are terms you have heard before and thought it was something only taught at MIT.  Well understanding it is much simpler than it sounds.

When embedding gadgets, documents, video, widgets or other digital content into a site or blog, the site or blog that hosts the digital content uses what is called HTML code.  Basically, it is a language in the form of text that websites use to display all of the content that is visible on the their site.

Let me, however, set your mind at ease.  You do not have to know anything about HTML code in order to use it to embed anything.  The only skill you will need is how to copy and paste.

When you find digital content that is sharable (like a Vimeo video, or Visual.ly infographics) you will usually find this symbol:  < / > or < >.

Some sites, like YouTube, will simply indicate "Embed" under the Share tab.

From there you will find a series of text and symbols; this is your HTML code.  Once you find this code simply copy the whole amount of text.  If you miss any portion of this code, it will not work.

Let's go to your site or blog that you would like to embed this into.  Your site or blog, in most occasions, will indicate options for embedding your copied HTML code.  I am going to demonstrate this with a Moodle course in this video below.

I hope this has been helpful.  If you have any questions concerning this, please contact me.

Mad Libs

Here's a fun activity you can add to your Moodle course for ELA.  Mad Libs offers a widget that can be put on your own website.  Simply copy and paste the HTML code they offer into an HTML box on your Moodle course.

If you are interested in this, but are uncertain of how to copy/paste HTML, let alone what HTML is, please do not hesitate to contact me, nasonb@sad1.org.

CNN Student News

Something that I would like to feature that I often hear from Richard Byrne as a great resource for Social Studies or any subject dealing with current events is CNN Student News.  CNN offers a customized student version of their daily news from their journalists and educators.  The main feature of their site is their 10min commercial-free daily news program.  It is a very informative, catchy and fun program designed with Middle and High School students in mind, highlighting some of the daily top stories.  Each of the videos can be embedded into your Moodle site for easy student access.  Today's CNN Student News highlights are:

• Greece's economic issues effecting global change
• India's endeavor to track all of it's people
• The unusual circumstance with this year's Nobel Prize
• And more

CNN Student News offers transcripts of their shows, discussion topics, colorful downloadable maps of the countries in the news, plus CNN's Heroes section.  Check out "What is CNN Student News?" for information on their content.

Royal Wedding Pics from Life.com

Life.com offers current event imagery from the best of the best in photography.  These galleries can be embedded right into your Moodle course for students to view even on your front page.  Simply, click on the main photo on their homepage; look for "link to" on the right-side menu; choose either Photo or Gallery; then copy the code that is available.

Place them in a "topic" section or place them in your sidebar as an HTML box.  For more information on how to do this, visit How Do I Embed HTML Code? and Adding HTML To My Moodle Course.  Here is an example below.

Adding HTML to My Moodle Course

There are a few different ways to embed HTML in to your Moodle course.  The process is pretty much the same every time.

When you create an activity, web page, label, etc there will be a full text editor as indicated below.

 

Once you see this editor, you can be safe to say, "I can add HTML".  In order to paste the code in the text box and have it be read properly, you must select Toggle HTML Source; this button - "<>".  When the text box changes, simply paste (Command+V) into the text box.  If you have never played around with HTML code, be careful not to mess with any other text associated with the text box.  When you have finished pasting, click the <> button to return to your regular text mode.  You may or may not instantly see your results; if not, it's ok.  Just click Save and Display at the bottom of the configuration page and you will see your results.

How Do I Embed HTML Code?

For the most part embedding HTML code is easy and you don't have to know a lot or anything about HTML.  Most sites or domains that offer gadgets, video, etc that have embedding HTML already done for you.  What is HTML?

Here's how it works:

We will use You Tube as an example because most everyone knows You Tube and how to navigate through it (unfortunately, You Tube is not a reliable source for student use on Moodle because it is blocked for students.  However, for the sake of learning how to embed code, we will use this source).  Below every You Tube video you will notice a small menu allowing you to add the video to your favorites, share, download, like, dislike; you can also "Embed".  Simply click the "Embed" button and copy the code below (Command+C).  As show below.

Though each online application will have its own way or terminology for accepting HTML, if it accepts HTML code, it will have the option to add the code.  When you are ready to add the HTML code, simply paste it in the appropriate spot (Command+V).  If you have never played with HTML, you will need to be careful with how you paste the code.  In most cases, however, it is as simple as pasting it at the top of the HTML text box.  There are several gadgets available online from various places.  Just look carefully for anything that allows you to get code, embed, etc.  Check out life.com.  You can embed any of their photos or albums right into your site; great for a discussion on current events or history.

For Moodle, if you want to add HTML, there are a few different ways.  See Adding HTML to My Moodle Course.