Print Friendly Print Get a PDF version of this webpage PDF

Some blogging platforms allow you to embed media like slides, videos, comic strips, quizzes, polls into your blog posts.

These take your posts to the next level; providing opportunities for readers’ engagement and interaction in ways not achievable using plain text and images.

In this sixth activity you will:

  1. Be introduced to a list of useful tools for adding interactive elements to your blog posts
  2. Learn how to add embedded media like slides, videos, comic strips, quizzes, polls to your posts
  3. Write a post that includes embed media
  4. Complete the extension activity (if you have time)

Step 1:  List of Useful Tools

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

Here’s a 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.  Check out this AnswerGarden embedded in a blog post or here’s another.
  2. Bubbl.us – used to create color brainstorms and mind maps.
  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.

Comic and Cartoon Tools

  1. Bitstrips – here’s a BitStrop embedded in a blog post
  2. ToonDoo – here’s a ToonDoo embedded in a blog post

Poll and Survey tools

  1. Google Forms
  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.
  3. Glogster – lets you combine images, video, music, photos and audio to create interactive posters.   Here’s Glogster’s embedded in a blog post.
  4. 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.
  5. 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!
  6. 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!
  7. 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.
  8. 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.
  4. Slides – Super easy slide show maker.

Quiz Creation tools

  1. QuizRevolution – allows you to quickly create quizzes with images and/or videos.
  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.
  2. xtranormal – lets you create 3D animated videos.

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

Step 2:  Embedding media into blog posts

Some blogging platforms allow you to embed media like slides, videos, comic strips, quizzes, polls into your blog posts while others don’t.

The following type of blogs on Edublogs can use embed code to add media to their blog posts:

  1. Edublogs Pro blogs
  2. Free Edublogs blogs that have had extra features enabled on them by an Edublogs Pro blog – here’s how you do it
  3. Edublogs Campus blogs

You can’t add embed code in posts on free Edublogs blogs that haven’t had extra features enabled or to WordPress.com blogs.   If you can’t embed into your blog posts you’ll need to link to it.

For those that can embed using code it is as simple as:

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

2.  Click on Save Draft, previewed your post and make all necessary edits.

3.  Go to the online tool you want to use.

4.  Create or find the media you want to embed in your blog post.

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

  • If the online tool provides embed code you’ll see a link that’ll use words like Share or Embed.
  • WallWisher embed code is located under the Do More menu on the top right hand side of your WallWisher
  • Click on the link and look for any code that says Embed in Blog, or Add to website.

6.  Copy the embed code

  • Here’s what the embed code looks like on PhotoPeach.

7.  Click on HTML Tab on your blog post.

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

  • Don’t click back to Visual Tab before hitting Publish as it can break the embed code.
  • Immediately close your post once you’ve published.
  • Change back to Visual Editing mode when you write your next post by clicking on the Visual tab.
  • You use this same process for any website that provides embed code.

Important tips when working with embed code in blog posts

Tip #1 – Use HTML editing mode

Remember 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 impact how your blog loads in a web browser like Internet Explorer or 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 Post and click on the HTML tab.
  2. Close the post while still in the HTML tab and then go to Posts > Edit Posts to open the post for editing.

Tip #2 – Adjusting the embed size

Some embed code is designed to be embedded into normal websites and can be too wide for the width of your 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.

Here’s an example of adjusting the Glogster embed code.

Glogster embed code is for 960 pixels wide.  Changing the scale in the embed code means your Glogster now fits your blog post.

Adjusting the embed size

Step 3: Write a post that includes embed media

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!

Step 4: 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!

Share|