A new tutorial compatible with Twinspace new security settings
One of the most popular tools amongst eTwinners is Voki which is used not only for pupils' presentations but in several innovative ways e.g. for singing, for collaborative poems etc. as well. Unfortunately the given by Voki embed code is not compatible with Twinspace settings and thus is needed to be edited to be shown in a Twispace page. The whole procedure is quite easy if you follow the steps of this tutorial.
1. How to embed a Voki in a Twinspace page
One of the most popular tools amongst eTwinners is Voki which is used not only for
pupils' presentations but in several innovative ways e.g. for singing, for collaborative poems etc. as
well. Unfortunately the given by Voki embed code is not compatible with Twinspace settings and thus
is needed to be edited to be shown in a Twispace page. The whole procedure is quite easy if you follow
the 8 steps of this tutorial.
Step
1
Copy the embed the
embed code from Voki
(case 1: a previously
created Voki)
Step
1
Copy the embed the
embed code (4) from
Voki (case 2: a new
created Voki)
2. Step
2
<object height="267" width="200" classid="clsid:D27CDB6E-
AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
id="widget_name"><param name="movie" value="http://vhss-
d.oddcast.com/vhss_editors/voki_player.swf?doc=http://vhss-
d.oddcast.com/php/vhss_editors/getvoki/chsm=e3d414d20d6
2536ec951fe9a8c052bd4%26sc=9059693" /><param
name="quality" value="high" /><param
name="allowScriptAccess" value="always" /><param
name="width" value="200" /><param name="height"
value="267" /><param name="allowNetworking"
value="all"/><param name="wmode" value="transparent"
/><param name="allowFullScreen" value="true" /><embed
height="267" width="200" src="http://vhss-
d.oddcast.com/vhss_editors/voki_player.swf?doc=http%3A%2
F%2Fvhss-
d.oddcast.com%2Fphp%2Fvhss_editors%2Fgetvoki%2Fchsm=
e3d414d20d62536ec951fe9a8c052bd4%26sc=9059693"
quality="high" allowScriptAccess="always"
allowNetworking="all" wmode="transparent"
allowFullScreen="true"
pluginspage="http://www.adobe.com/shockwave/download/d
ownload.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash"
name="widget_name"></object>
Paste the code in a
word sheet in order to
make the necessary
changes.
The copied from Voki
code looks like this.
From all this code you
don’t need the part
which is before
<embed height=
delete it
Step
3
<embed height="267" width="200" src="http://vhss-
d.oddcast.com/vhss_editors/voki_player.swf?doc=http%3A%2
F%2Fvhss-
d.oddcast.com%2Fphp%2Fvhss_editors%2Fgetvoki%2Fchsm=
e3d414d20d62536ec951fe9a8c052bd4%26sc=9059693"
quality="high" allowScriptAccess="always"
allowNetworking="all" wmode="transparent"
allowFullScreen="true"
pluginspage="http://www.adobe.com/shockwave/download/d
ownload.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash"
name="widget_name"></object>
Your code now should
look like that
Now you must do three
small changes in the
code
1. Change the
word embed
with the word
iframe
2. Put an s after
the http in the
url so as to
become https
3. Change the
word </object>
to </iframe
Step
4
<iframe height="267" width="200" src="https://vhss-
d.oddcast.com/vhss_editors/voki_player.swf?doc=http%3A%2F%2F
vhss-
d.oddcast.com%2Fphp%2Fvhss_editors%2Fgetvoki%2Fchsm=e3d4
14d20d62536ec951fe9a8c052bd4%26sc=9059693" quality="high"
allowScriptAccess="always" allowNetworking="all"
wmode="transparent" allowFullScreen="true"
pluginspage="http://www.adobe.com/shockwave/download/downl
oad.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-
shockwave-flash" name="widget_name"></iframe>
your code now should
look like that
Copy the code
3. Step
5
Login to Twinspace
Find the page of
interest to embed
your Voki
Click on "Edit
page"
Step
6
When the page open in
edit mode, click on the
"Code" button
Step
7
In code mode, right click
(or Ctrl + V on your
keyboard) anywhere in
the field in order to paste
the copied code
Click again on the “Code”
button( it’s the only active
one)
4. Step
8
If everything is right, your
voki is visible and
embedded in your
Twinspace page. Click the
"Save" button in order to
complete the procedure.
Good Luck!!!
Petros Michailidis
GrNSS Member