Edublogs Teacher Challenges

Free professional learning for educators by educators.

Step 8 – Embedding media

Print Friendly

The aim of this activity is to show you how to use a range of online tools to enhance posts and pages.

Click on a link below to go to the section you want to work on:

  1. Why educators enhance posts with interactive tools
  2. List of tools to get you started
  3. How to embed media in blog posts
  4. Embed code tips
  5. What now?


Back to Top

Why educators enhance posts with interactive tools

If you look closely at blogs you’ll notice many of them add cool interactive tools to their blog post.

They do this because things like slides, videos, comic strips, quizzes, polls in blog posts grab attention, engage and create opportunities for interaction in ways not achievable using plain text and images.

There’s a gazillion online tools nowadays and most of them provide code that you can use to embed what you’ve found or created into your blog posts or pages.


Back to Top

List of tools to get you started

Brainstorming Tools

  1. AnswerGarden – is a word cloud site that collects words and phrases.   Great for brainstorming, collecting ideas, feedback etc.  Read about using AnswerGarden with students here.  Check out this AnswerGarden embedded in a blog post or here’s another.
  2. Bubbl.us – used to create color brainstorms and mind maps. Here’s a bubbl.us in a student post
  3. Wallwishers - an online notice board creator.  It’s a really fast and easy way to create engaging activities to use with students.  Learn more about Wallwisher here.

Curation tools

  1. Livebinders - create online binders.  Learn more about using Livebinder with students here and read how Livebinder can be used on iPads here.
  2. Scoop.it - easily curate engaging magazines.  Here’s a Scoop-it embedded in a blog post and here.
  3. Storify - curate your own stories from photos, video, tweets, what people post on social media sites and your own narration.  Here’s a Storify in a blog post and how you can use it with students.

Comic and Cartoon Tools

  1. Bitstrips – here’s a BitStrop embedded in a blog post.  Learn more about Bitstrips with students here.
  2. ToonDoo – here’s a ToonDoo embedded in a blog post.  Learn more about using ToonDoo with students here.

Poll and Survey tools

  1. Google Forms - here’s how to create a self grading Quiz using Google docs
  2. PollDaddy – Here’s a PollDaddy embedded in a blog post.
  3. PollEverywhere

Presentation Tools

  1. AuthorStream -  - A site where you can host your presentations and share with others. Check out this Authorstream embedded in a blog post here!
  2. Fotobabble – lets  you create a talking photo.  Excellent for speaking practising.  Here is an example of a Fotobabble or check out links in comments here.
  3. Glogster – lets you combine images, video, music, photos and audio to create interactive posters.   Here’s a Glogster’s embedded in a blog post.  Learn more about using Glogster with students here.
  4. Google Docs
  5. Prezi – is an online presentation and story telling tool that uses a single canvas instead of traditional series of slides.  The images, text, videos and other objects are placed on the canvas and users can zoom in and out.  Here’s a Prezi embedded in a blog post.
  6. SlideShare – A site where you can host your presentations and share with others.  Ideal for those who want to embed Presentations in their posts and websites rather than upload their PowerPoints directly and insert as a link.  It’s also an excellent site for locating Presentations created by others.  Check out a SlideShare embedded in a blog post here!
  7. Scribd – allows you to upload your MS Word documents, PDFs, PowerPoints and then share them within an embedded viewer on your blog.  Here’s an example of a Scribd embedded in a blog post – check out the Scribd as it contains cool tips for backing up your blog!’
  8. VoiceThreads – Creates an interactive slideshow using images or videos.  Allows others to leave comments on each photo by adding text, audio or video.  You can check out the VoiceThread in our post for advanced bloggers.
  9. Voki – allows you to create talking avatars.  Excellent for speaking practise and engaging students.  Here’s a Voki embedded in a blog post.

Slide Show Tools

  1. BookR – Super easy slide show maker.
  2. Flickr – Flickr is a PhotoSharing website for hosting and sharing your photos online.   SlideShows of photo sets or tags can be embedded into blog posts.
  3. PhotoPeach – lets you quickly upload photos to make great looking slideshows and even simple quizzes. Here’s a PhotoPeach embedded in a blog post and here’s instructions for creating PhotoPeach quizzes.

Quiz Creation tools

  1. QuizRevolution – allows you to quickly create quizzes with images and/or videos.  Here’s a QuizRevolution embedded in a blog post.
  2. PhotoPeach – lets you quickly upload photos to make great looking slideshows and even simple quizzes. Here’s a PhotoPeach embedded in a blog post and here’s instructions for creating PhotoPeach quizzes.

Video Creation Tools

  1. Animoto – great site for quickly creating professional looking videos from your images.  Here’s an Animoto embedded in a blog post. Learn more about using Animoto with students here.
  2. xtranormal – lets you create 3D animated videos. Here’s an xtranormal embedded in a blog post.

Video Hosting Websites

Here’s some of the popular site used by educators who want to embed their videos within embedded players rather than uploading them directly to posts as links.

  1. Blip TV
  2. Vimeo
  3. YouTube


Back to Top
How to embed in blog posts

Adding embed code to posts or pages is as simple as:

1.   Completely write your post including adding title, text, images, tags and categories.

2.  Click on Save Draft.

3.  Click on Preview to previewed your post.

4.  Check your post and make all necessary edits.

5.  Locate the embed code for the media you created or want to embed.

  • Websites use a range of different icons to represent Embed code.
  • Look for icons like </>, the word Embed or hover your mouse over icons until you see the word Embed.
Below are examples of what you need do look for.

6.  Copy the embed code.

Below is an example of copying the embed code from a Voicethread.

7.  Click on HTML Tab on your blog post.

8.  Paste the embed code into your post where you want it to appear then click Publish.

9. Don’t click back to Visual Tab and close your post in HTML view.

  • Changing back to your Visual editing mode once you have added the embed code can remove or break the embed code.

10.  You should now see your embedded media when you view your post on your blog!

11.  Change back to Visual Editing mode when you write your next post by clicking on the Visual Tab.


Back to Top

Embed code in blog posts

1. Use HTML editing mode

Never to click on the Visual Tab to change back to the visual editing mode once you have added the embed code.

This can break the embed code with some types of embeds.   If this happens it can cause your blog sidebar to be pushed to the bottom of your theme.

If you need to edit a  post that contains embed code make sure you change to HTML editing mode before opening up the post to edit.

The easiest way to do this is to:

  1. Go to Posts > Add New and click on the HTML tab.
  2. Close the post while still in the HTML tab and then go to Posts > All Posts to open the post for editing.


Back to Top
2.  Changing embed size

Some embed code is designed to be embedded into normal websites and can be too wide for the width of blog post.

Ideal width for embedding for most blog themes is 450 pixels wide.

If the online tool doesn’t provide the ability to adjust the embed size you can often do this by editing the code yourself.   All you need to do is try adjusting the scale, width and/or height after you’ve added it to your post.


Back to Top

What now?

Now we’ve talked about embedding media it’s time for you to get creative while showing us your skills by writing a blog post that includes some embedded media.

Remember— if your blog doesn’t allow you to embed into your blog posts you’ll need to link to it.

Here’s some ideas of what you might like to write about or do:

  1. Test a few of the online tools and write a review of them.  What did you like?  What did you find hard?  How suitable are they to use with your students?
  2. Create a quiz to test your readers knowledge.  Quizzes can be a lot of fun.  For those really wanting to extend themselves — try MyStudiyo, add some videos and get readers to answer questions based on what they can remember from the video
  3. Create a poll to gather your readers opinion.  Polls appeal to readers who like to express their opinion but don’t always like to leave comments.
  4. Create a Slide tour of your class room or where you live to.  Great for helping readers identify with who you are.

And remember to leave a comment with a link to your post so we can drop past to check it out!  We like to include these links to your posts in our weekly reviews!

Extension Activity – even more WOW Factor

Visit Web 2.0: Cool tools for Schools

Check through their lists of cool tools, write a post about what you learn and WOW us with the ideas of how you could use some of these tools with your students!

And remember to leave a comment with a link to your post so we can drop past to check it out!

88 comments for “Step 8 – Embedding media

  1. Lionel Miranda
    September 21, 2013 at 12:24 pm

    Sue,

    Thanks for all of the tips in this activity! As always, here is a link with my finalized test run on embedding media into my blog post. http://lionelstreams.blogspot.com/2013/09/what-do-you-think.html

  2. msz1011
    March 14, 2011 at 2:44 pm

    I worked with a lot of different media sites recently. I picked some of my favorites and posted some remarks on my site!

Leave a Reply

Your email address will not be published. Required fields are marked *