Opensocial Flash Example

UPDATE 6/18/2009 Hyves does no longer accept parameters in its opensocial xml-url's so the trick I describe below, won't work anymore.


One of our clients wanted a flash widget to be embedded by OpenSocial.
Try as I might, but I couldn't find a website that gave just a simple example of embedding a flash movie on your page/blog, without trying to communicate with it.

So I've searched around a bit more and got the code out of some existing widgets and I'm placing it here to maybe help some other people, who are also trying to look for a simple tutorial :)


In short, to make a widget for OpenSocial, you need to have an XML file that contains xml and javascript that actually loads and places the widget on the blog/community page you desire.

I've put up an example XML file Here

Example, Adding it to IGoogle

• In your Igoogle homepage, click on 'add stuff'
  
• then enter the url to your xmll file there.
  For example : http://tinustekent.whizzkid.nu/files/widget.xml
  

If you want to pass through parameters to your widget, you will need to make a script on your webserver which will put the needed parameters into the xml in the flashvars.
Note for Hyves users, Hyves expects the url to end with .xml
So it will fail when you put parameters in your url, but this is easily fixed if you just add &mode=.xml to your url.
The "mode" name doesnt matter, Hyves only checks the entire url-string to see if it ends with ".xml" :)


The xml for this widget (which is a little commercial for my comic site, plug plug):

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs title="Square and Circle" title_url="" description="Square and Circle" author="Martijn Croezen" author_email="sacwidget@whizzkid.nu" author_link="http://tinustekent.whizzkid.nu" height="190" width="160" scaling="false" scrolling="false" screenshot="" thumbnail="">
<Require feature="dynamic-height" /> 
</ModulePrefs>
<Content type="html">
<![CDATA[ 

<div id="wdiv__MODULE" style="width:190;height:160">Loading...</div>
<script type="text/javascript">
 function SetWidgetContent(div, content) {
      div.innerHTML = content;
    } 
     window.onload = function(evt) {
            var content = '<embed src="http://tinustekent.whizzkid.nu/files/widget.swf" width="190" height="160" quality="high" bgcolor="ffffff" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="" type="application/x-shockwave-flash">';
            var div = GetDiv();
            if (true)
            {
              SetWidgetContent(div, content);
            }
           _IG_AdjustIFrameHeight();
    }
 
 function SetWidgetContent(div, content) {
      div.innerHTML = content;
    }


function GetDiv() {
        return document.getElementById("wdiv__MODULE");
    }
 
</script>


  ]]> 
  </Content>
  </Module>