Adding A Voki Speaking Avatar To A Post or Page of Your Blog

February 24th, 2008 · 28 Comments
Cool Web 2.0 & Desktop Tools

Our last post showed how to add a Voki speaking avatar to your blog sidebar using a Text box widget. Why? Because voki avatars are cool and lots of fun to create.

Adding a Voki to your blog sidebar gives a “human element” to the site — your readers can now hear your voice. However if students create the Vokis, or you want to use a Voki for giving instructions to students, you are more likely to want to add them to posts or pages on your blog.

Ideas for using Vokis in an educational context in your classroom are summarized in our previous post.

Embedding a Voki in Post or PAge

Register for an account at Voki and create your own Voki.
Grab the code of your Voki for embedding into Wordpress (use large size Voki).
On your blog dashboard, go to Write > Write A Post or Write A Page
Completely write your post adding all text and images including adding your categories, tags and post title.
It’s best to add any code you want to embed as the last step just before you click publish as you’re less likely to have problems.
Click on Save and View this Post to do any final edits on your post.
Click on HTML tab.
Paste the embed code from Voki into your post where you want it to appear then immediately press Publish. When viewed on your site your voki will appear in your post.

Please note

Voki avatars embedded in posts are stripped out by feed readers like Google Reader so it is good practice to let your readers know that you have added a voki to a post and include a link to its original location (i.e. code you copied from Notepad enclosed in the quotes after src= is the URL address of your voki).

For example you might say:

If my voki has been removed by your feed reader, you can check it out here.

Get a Voki now!

FINAL THOUGHT

We hope you enjoy creating your voki avatars and adding them to your blogs. Please let us know how you go.

If you are enjoying reading this blog, please consider Subscribing For Free!

Tagged: voki

Create a free edublog to get your own comment avatar (and more!)

28 responses so far ↓

1 Adding A Voki Speaking Avatar To Your Blog Sidebar // Feb 24, 2008 at 4:24 am

[...] Adding A Voki Speaking Avatar To A Post or Page of Your Blog [...]
2 I added a Voki avatar! « Ratherbereading’s Weblog // Feb 24, 2008 at 8:11 am

[...] Voki avatar to one of the posts on the blog. I just followed the directions in 2 recent posts on The Edublogger. This first avatar uses a voice available from Voki. When I get back to school, I’m [...]
3 wvskphillips // Feb 24, 2008 at 8:59 am

Wonderful addition to add some character to my blog! Thanks for the resource. I can see some really cool uses for this. Thanks again! PS - the directions were extremely easy to follow - well done.
4 Randy Gibson // Feb 24, 2008 at 12:38 pm

Sue,

I believe that in Step 4 of your instructions for “Adding A Voki Speaking Avatar To A Post or Page of Your Blog”, you intended to write “… enclosed in the quotes… ” rather than “… enclosed in the commas …”.

I just thought that you would like to know.

Randy Gibson, Computer Science Department
Indian River Community College - Fort Pierce, Florida
5 Sue Waters // Feb 24, 2008 at 3:31 pm

Hi Sonja (wvskphillips) - just dropped past your blog and congratulations for creating and adding a voki to a post. Well done — glad the instructions helped.

Thanks Randy -definitely was a mistake and I do appreciate you letting me know. I’ve changed the wording now. I wrote these two posts on Voki at the same time so when I got to this post I was a bit tired - hence the reason for the grammatical error.
6 alexanderhayes // Feb 26, 2008 at 4:05 am

spam check89

Sheesh…..bling bling. Where and when did you get into Copyright The Edublogger ?

What happened to the CC 3.0 ethic of 6 months ago ?
7 StarDuckPiano // Feb 26, 2008 at 5:13 pm

Wow!

also, can you add a Voki as a user advatar? or even a blog advatar?
8 Gail Haythorne // Feb 28, 2008 at 8:03 am

I love these and had my 13 year-old French class create vokis for a range of teachers from our school (with their permission). My blog now has a virtaul staffroom populated by French-speaking virtual teachers. They loved it (students and the staff).
9 Sue Waters // Feb 29, 2008 at 11:45 pm

Hi Alex - the “This post may be Copyright © 2008 Sue Waters. Hosted by Edublogs” has been added to every Eublog - obviously not my name — because there had been some issue with others using people’s posts without permission. My recommendation if people have concerns with the wording they add their own license to their blog sidebar or to each post.

Sorry StarDuckPiano - blog and user avatars can 0nly be jpeg, gif, and png files.

Hi Gail - that sounds like it was a fun activity for both your teachers and students. I did try searching for them on your site but had no luck. Any chance of the URL so I can check them out?
10 Teachers At Risk » On becoming a networked teacher // Mar 1, 2008 at 9:16 pm

[...] do feel as if I’m making some headway though. Thanks to bloggers like Kevin, Sue, and Chrissy who’ve helped me unwrap some of the digital candy like like Voice Thread, and [...]
11 » Katriana - Our Intergalactic Mentor Al Upton and the miniLegends 08 // Mar 2, 2008 at 4:46 pm

[...] For more on embedding vokis, check out Sue Water’s post in The Edublogger … Adding A Voki Speaking Avatar To A Post or Page of Your Blog [...]
12 An attempt to add voice to a post | Front-line Learning // Mar 9, 2008 at 9:10 pm

[...] there are instructions on embedding the clip in the edublogs help file - search for “voki” or go to this link [...]
13 Annie // Mar 11, 2008 at 12:58 pm

This was so much fun. I love reading your blog and depend on it for lots of insights. In fact, I’m going to add you to my blogroll. If you get a chance, drop by http://www.crazy4kidsbooks.blogspot.com and check out my new Voki.
14 The Best Sites To Practice Speaking English | Larry Ferlazzo's Websites of the Day... // Mar 17, 2008 at 12:31 pm

[...] avatar students can design and easily post on a blog or website. Sue Waters has written excellent step-by-step instructions on how to post a [...]
15 Thing 5–RSS Feeds | Kim's Web 2.0 Learning Blog // Mar 18, 2008 at 6:13 am

[...] February 2008 Mar 18 Thing 5–RSS Feeds Filed Under (Uncategorized) by tech4me on 18-03-2008 Edublogger [...]
16 ellenrobinette // Mar 18, 2008 at 10:36 am

I have successfully added Voki’s to my posts and sidebars, but the Voki site does not seem to save my Voki’s for future use or editing. Is this everyone’s experience or am I doing something wrong?
17 ellenrobinette // Mar 18, 2008 at 10:38 am

Also, when I showed her the Voki’s a colleague suggested using Blabberize.com to create talking photos. I haven’t tried it yet, but it seems like it would work and be fun!
18 Sue Waters // Mar 18, 2008 at 1:34 pm

HiAnnie - your voki looks so pretty I must admit I’m feeling a bit jealous as I made mine in a hurry.

Ellen - I was retesting voki yesterday and it was giving me attitude. Wouldn’t give me the code of my saved voki. Perhaps they are having trouble with the site. Blabberize is good. You may also want to check out Larry Ferlazzo’s list of best site for practicing English.
19 StarDuckPiano // Mar 18, 2008 at 4:32 pm

Another question:

Can you have a .gif animation as an advatar? of you can’t, can you try to add that as a new feature to an update to Edublogs?
20 Voki | LiterateLife // Apr 3, 2008 at 6:54 pm

[...] a Voki into my blogs now! Maybe I should put it on my About Me page.I followed the directions from The Edublogger and only had difficulty trying to decide how much code to highlight. How are teachers using these [...]
21 Sven // Apr 5, 2008 at 12:14 am

Hi, just discovered this really interesting blog, I will surely visit it again.
On Voki’s: I have to be the one where it doesn’t work. The problem is that I can not find such an ‘embed flash button’ in the Wordpress toolbar. Now, I know, Wordpress has changed its layout, but I don’t remember having seen this button before.
So, it doesn’t work for me to put a Voki on my blog. Anyone any thoughts?
Thanks,
SveN
22 fuadhawmd // Apr 13, 2008 at 6:34 am

hi 4 all
the subj. w’ll disc. is the cell
23 Debbie Thom // Apr 22, 2008 at 6:01 am

Hi there I did everything you instructed me to do about adding a voki to my blog but it didn’t work. All I got was the link to the voki website. It didn’t seem to want to save the code. Any ideas why this is?
24 Mr Meikle // Apr 30, 2008 at 12:36 pm

I don’t seem to have the flash icon. Can you think of a reason for this?
25 Sue Waters // Apr 30, 2008 at 6:51 pm

Starduckpiano,

Sorry .gif animation as an avatar isn’t possible at the moment and not sure if it will be an option.

Sven,

Sorry not sure what embed code restrictions they have on Wordpress but I would try embedding directly using the Code Tab.

Debbie

Sorry I wasn’t able to help you with this due to the restrictions on your blog platform.

Sorry Mr Meikle

There has been changes within the blog dashboard so there is no flash icon. I haven’t had time to update this post. If you read this post it explains how to embed flash and vokis.
26 Belgica Nina-Matos // May 11, 2008 at 9:40 am

I don’t know what I am doing wrong : ( I have the code from voki, but I need to know how to embed it as part of the sidebar 1 of my blog. I tried adding a widget, but it won’t let me add the code. I tried adding it to a posting that I have previously made and it didn’t work.

Any suggestions will be appreciated as I become familiar with edublog.
27 alexisalexander // May 14, 2008 at 2:42 pm

I also have been only getting the code, even though I am pasting the voki in in Code view. I had a voki in there and working before, but since the flash button has disapeared I have not been able to do it.
28 Sue Waters // Jun 13, 2008 at 8:47 pm

I’ve just updated this post to show how you embed Voki avatars into pages and posts using our latest version of Edublogs. If you embedded into a page or post using the old method (i.e. the Flash Button) you need to re-embed your voki using this method.