Virtual Game Lab
  • News
  • Research
  • Publications
  • Unity Resources
  • Contact

Update on Weebly and Unity

7/16/2011

22 Comments

 
It seems that Weebly made some changes to their custom html objects. Last time I've checked, Unity content didn't display when using Weebly's custom html objects.
I made a short video explaining how this can be achieved now. It's easier than ever and you can freely embed your Unity content in your Weebly webpage.
Embedded video and download for HD version are available. Let me know if you have any questions.

-Sebas
weeblyandunity.mp4
File Size: 10761 kb
File Type: mp4
Download File
22 Comments
Jonathan J link
11/15/2012 07:15:14 pm

Thanks so much I was looking all over to find out how to easily embed a unity game into a website and this was by far the easiest/ best solution i found!

Reply
Joe
2/3/2013 03:50:08 am

Thanks a bunch. Really helpful.

Reply
Tom
3/16/2013 06:56:09 am

I don't understand where to paste the url of the .unity3d file
there are many places where there are urls on the .html file
My .html file doesn't look like yours...

Reply
Tom
3/16/2013 06:58:05 am

Can you post your .html file or as text please

Reply
Joe
3/22/2013 05:28:00 am

What about a flash game? Is there a specific process for that too?

Reply
Joe
3/22/2013 05:29:41 am

Exported my unity game in flash ,got 4 files:
.swc
.js
.html
.swf

I have no clue how to make it all work on weebly. Any help?

Thank you!

Reply
Spencer
5/29/2015 07:43:38 pm

SWF

damien
4/10/2013 06:05:31 am

how can i do it with the free version of weebly?
please, i need to know asap!
thanks!

Reply
Damien link
4/14/2013 06:43:04 am

I found a way to do it. Upload file to drop box instead and link that.

In the html file, you will see your ganesh name, eg

unitygame1

Swap that with url.
Eg

Www.fileaxample.com//unitygame1

Reply
Damien link
4/14/2013 06:43:12 am

I found a way to do it. Upload file to drop box instead and link that.

In the html file, you will see your ganesh name, eg

unitygame1

Swap that with url.
Eg

Www.fileaxample.com//unitygame1

Reply
ash
8/25/2013 09:55:47 pm

where do i paste the extra bit here is my html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity Web Player | SurvivalGame</title>
<script type='text/javascript' src='https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/jquery.min.js'></script>
<script type="text/javascript">
<!--
var unityObjectUrl = "http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js";
if (document.location.protocol == 'https:')
unityObjectUrl = unityObjectUrl.replace("http://", "https://ssl-");
document.write('<script type="text\/javascript" src="' + unityObjectUrl + '"><\/script>');
-->
</script>
<script type="text/javascript">
<!--
var config = {
width: 960,
height: 600,
params: { enableDebugging:"0" }

};
var u = new UnityObject2(config);

jQuery(function() {

var $missingScreen = jQuery("#unityPlayer").find(".missing");
var $brokenScreen = jQuery("#unityPlayer").find(".broken");
$missingScreen.hide();
$brokenScreen.hide();

u.observeProgress(function (progress) {
switch(progress.pluginStatus) {
case "broken":
$brokenScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$brokenScreen.show();
break;
case "missing":
$missingScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "New folder.unity3d");
});
-->
</script>
<style type="text/css">
<!--
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
}
a:link, a:visited {
color: #000;
}
a:active, a:hover {
color: #666;
}
p.header {
font-size: small;
}
p.header span {
font-weight: bold;
}
p.footer {
font-size: x-small;
}
div.content {
margin: auto;
width: 960px;
}
div.broken,
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.broken a,
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.broken img,
div.missing img {
border-width: 0px;
}
div.broken {
display: none;
}
div#unityPlayer {
cursor: default;
height: 600px;
width: 960px;
}
-->
</style>
</head>
<body>
<p class="header"><span>Unity Web Player | </span>SurvivalGame</p>
<div class="content">
<div id="unityPlayer">
<div class="missing">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
</a>
</div>
<div class="broken">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now! Restart your browser after install.">
<img alt="Unity Web Player. Install now! Restart your browser after install." src="http://webplayer.unity3d.com/installation/getunityrestart.png" width="193" height="63" />
</a>
</div>
</div>
</div>
<p class="footer">« created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> »</p>
</body>
</html>

Reply
ash
8/25/2013 10:12:04 pm

nevermind i figured it out

Reply
beast
2/5/2014 08:39:42 am

Hi, my html code looks exactly like yours. Could you tell me where you pasted the extra bit.

Omar
9/4/2013 07:08:20 pm

Thank you so much, i've been trying to figure this out for like 3 days. You helped me a lot!

Reply
neil link
10/6/2013 11:45:25 pm

Very nice, can I see the video at high resolution as I am not sure about the hyperlink.

Maybe you could drop it into Youtube, or Google Box/Dropbox and make it public?

Thank you,
Neil

Reply
neil link
1/8/2014 07:14:14 pm

Can we see the video at high resolution as I am not sure about the hyperlink.

Maybe you could drop it into Youtube, or Google Box/Dropbox and make it public?

Reply
Tariq
2/18/2014 09:59:21 am

God bless you Sebas.

For anyone who still needs help, the part of the code you need to replace is called "Something.unity3D" and that "Something" is going to be the name of the Folder you built your project in.

Reply
Chris link
4/23/2014 06:26:27 am

here is my html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity Web Player | CookingWithUnity120326</title>
<script type='text/javascript' src='https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/jquery.min.js'></script>
<script type="text/javascript">
<!--
var unityObjectUrl = "http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js";
if (document.location.protocol == 'https:')
unityObjectUrl = unityObjectUrl.replace("http://", "https://ssl-");
document.write('<script type="text\/javascript" src="' + unityObjectUrl + '"><\/script>');
-->
</script>
<script type="text/javascript">
<!--
var config = {
width: 960,
height: 600,
params: { enableDebugging:"0" }

};
var u = new UnityObject2(config);

jQuery(function() {

var $missingScreen = jQuery("#unityPlayer").find(".missing");
var $brokenScreen = jQuery("#unityPlayer").find(".broken");
$missingScreen.hide();
$brokenScreen.hide();

u.observeProgress(function (progress) {
switch(progress.pluginStatus) {
case "broken":
$brokenScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$brokenScreen.show();
break;
case "missing":
$missingScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "space_invaders.unity3d");
});
-->
</script>
<style type="text/css">
<!--
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
}
a:link, a:visited {
color: #000;
}
a:active, a:hover {
color: #666;
}
p.header {
font-size: small;
}
p.header span {
font-weight: bold;
}
p.footer {
font-size: x-small;
}
div.content {
margin: auto;
width: 960px;
}
div.broken,
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.broken a,
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.broken img,
div.missing img {
border-width: 0px;
}
div.broken {
display: none;
}
div#unityPlayer {
cursor: default;
height: 600px;
width: 960px;
}
-->
</style>
</head>
<body>
<p class="header"><span>Unity Web Player | </span>CookingWithUnity120326</p>
<div class="content">
<div id="unityPlayer">
<div class="missing">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
</a>
</div>
<div class="broken">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now! Restart your browser after install.">
<img alt="Unity Web Player. Install now! Restart your browser after install." src="http://webplayer.unity3d.com/installation/getunityrestart.png" width="193" height="63" />
</a>
</div>
</div>
</div>
<p class="footer">« created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> »</p>
</body>
</html>


------------------------------------------------------------------------------------------

the piece of code i need to change is

http://www.weebly.com/uploads/1/2/8/7/12872966/space_invaders.unity3d

i just cant find where to put it.

any help would be fantastic.

this is my first time doing anything like this, so please be gentle lol

thanks

Chris

Reply
polo
11/27/2014 02:30:19 am

how to put unity game like c.s portable in our website
help pls

Reply
ioxfhdsivhzdilvcXc link
8/7/2015 02:55:32 am

cxzckjxscdskC

Reply
MckinneyVia link
11/5/2021 03:31:44 am

Very much appreciated. Thank you for this excellent article. Keep posting!

Reply
Brett White link
3/21/2022 09:10:25 pm

What an exquisite article! Your post is very helpful right now. Thank you for sharing this informative one.

Reply



Leave a Reply.

    Sebas

    Experimental Psychologist
    Research Associate
    Mad Scientist

    Red 5 Studios
    Institute for Creative Technologies, USC, Los Angeles

    View my profile on LinkedIn

    RSS Feed

    Archives

    January 2013
    December 2012
    November 2012
    September 2012
    June 2012
    April 2012
    March 2012
    January 2012
    July 2011
    June 2011
    May 2011
    April 2011
    January 2011
    December 2010
    October 2010
    August 2010
    July 2010
    June 2010
    May 2010
    April 2010

    Categories

    All
    Development
    Games User Research
    Literature
    News
    Research Update
    Unity
    Unity Research Update
    Virtual Reality

© Copyright Sebastian Koenig 2009-2018