TracNav

Code snippets

If you have an code snippet that you think is missing or u want to share on this page. Please let us know on hyves-apiAThyvesDOTnl. We have a live example of all snippets on http://gorillaapi.hyves.nl/ (Our API-documentation friend ;) you will have to be in Sandbox mode to view these gadgets). Some examples output with console.log(). This is displayed in the Firefox add-on Firebug See https://addons.mozilla.org/en-US/firefox/addon/1843

  1. Hello world
  2. Viewports
  3. Check if the Viewer is logged in and has the right permissions
  4. Getting OWNER/VIEWER's number of friends
  5. How to determine if the Viewer is the Owner
  6. Getting data from Owner, Viewer, Hyver or Friends
  7. Has app installed
  8. Share gadget with friends (appInvite)
  9. Send an application message (Tell a Friend)
  10. Send an application message (single message)
  11. Setting and fetching appdata
  12. Passing params on installation / Passing params to another view / …
  13. Adobe Flash
  14. Google analytics
  15. Gadgets Skin
  16. Signed request
  17. OpenSocial Tabs
  18. Localization
  19. WWWS on the map

Hello world

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello world example" summary="" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
  <Require feature="opensocial-0.7"/>
  </ModulePrefs>

  <Content type="html">
  <![CDATA[
    <p>Hello world</p>
  ]]>
  </Content>

</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13735891/Hello_world_example/25XMzmGN/

Example file: http://www.apikooien.nl/examples/opensocial/helloworld.xml

Viewports

To display different content in each viewport it is possible to recognize each view through content sections. 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Viewports based on Content view" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
  <Require feature="opensocial-0.7"/>
  </ModulePrefs>

  <Content type="html">
  <![CDATA[
    <p>If you do not provide an Content tag with a "view" this sentence is shown at all the views</p>
  ]]>
  </Content>

  <Content type="html" view="profile">
  <![CDATA[
    <p>This sentence is shown at the profile view</p>
  ]]>
  </Content>

  <Content type="html" view="home">
  <![CDATA[
    <p>This sentence is shown at the home view</p>
  ]]>
  </Content>

  <Content type="html" view="canvas">
  <![CDATA[
    <p>This sentence is shown at the canvas view</p>
  ]]>
  </Content>

  <Content type="html" view="home,profile">
  <![CDATA[
    <p>This sentence is shown at the home view and the profile view</p>
  ]]>
  </Content>

</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13735926/Multiple_Views_example/xrXqT33y/

Example file: http://www.apikooien.nl/examples/opensocial/viewports.xml

It is also possible to use the default content section (only default when not other is present) and recognize the available views (you need the "views" feature for this): 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Viewports based on gadgets.views" description="" screenshot="" author="" author_email="" author_location="" author_affiliation="" height="200">
<Require feature="opensocial-0.7" />
<Require feature="views" />
</ModulePrefs>
  <Content type="html">
  <![CDATA[
<script type="text/javascript">
        function init() {
                var currentview = gadgets.views.getCurrentView().getName();
                var availableviews = gadgets.views.getSupportedViews();
        
                var sContent = "";
                if(availableviews[currentview] == availableviews['home']) {
                
                        sContent += '<p>This sentence is shown at the home view</p>';
                
                } else if(availableviews[currentview] == availableviews['profile']) {
                
                        sContent += '<p>This sentence is shown at the profile view</p>';
                        
                } else if(availableviews[currentview] == availableviews['canvas']) {
                
                        sContent += '<p>This sentence is shown at the canvas view</p>';
                        
                }
            sContent += '<p>This sentence is shown at all views</p>';
        
                document.getElementById('content').innerHTML = sContent;
        }
        gadgets.util.registerOnLoadHandler(init);
</script>
<div id="content"></div>
  ]]>
  </Content>
</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13736092/Check_view/Mknwqipo/

Example file: http://www.apikooien.nl/examples/opensocial/checkview.xml

Check if the Viewer is logged in and has the right permissions

The Viewer information is not always available, see OpensocialSpecs#Viewerbusinessrules. You need to check if this is needed. 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Check Viewer permission" summary="" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
        <Require feature="opensocial-0.7"/>
</ModulePrefs>
<Content type="html">
        <![CDATA[
        <div id='content'></div>
        <br>
        <script type="text/javascript">

        var getViewer = function(responseItem) {
                if(responseItem.hadError()) {
                        var sErrorcode = responseItem.getErrorCode();
                        if(sErrorcode == 'forbidden') {
                                document.getElementById('content').innerHTML = "You are not logged in, please log in first.";
                        } else if(sErrorcode == 'unauthorized') {
                                document.getElementById('content').innerHTML = "This application can't see your information because you will have to give permission to share your information. Please click the button below.";
                        }
        }
                if(opensocial.hasPermission(opensocial.Permission.VIEWER)) {
                        document.getElementById('content').innerHTML = "You are logged in and your public information is available.";
                }               
        }       
        var isViewer = function() {
                opensocial.requestPermission([opensocial.Permission.VIEWER], 'This reason sentence is not used at the moment', getViewer);
        }
        </script>
        <input type="button" value="Check if Viewer information is available" onClick="isViewer();">
        ]]>
</Content>
</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13736160/Check_viewer_permission/rQWlZNXq/

Example file: http://www.apikooien.nl/examples/opensocial/checkviewer.xml

Getting OWNER/VIEWER's number of friends

Person objects don't have a field with its number of friends. Therefor we need a small workaround, which can determine the number of friends of the OWNER of VIEWER (if available). 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="friend count" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
   <Require feature="opensocial-0.7"/>
</ModulePrefs>
<Content type="html">

<![CDATA[
<script type="text/javascript">
function init(){
        /* only interested in friendCount, not the actual friends */
        var params = {max: 1};
        
        var req = opensocial.newDataRequest();
        req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS, params), 'owner_friends');
        req.send(callback);
}
function callback(dataResponse){
        var owner_friends = dataResponse.get('owner_friends').getData();
        /* owner_friends is of type Collection */
        var friendCount = owner_friends.getTotalSize();
                document.getElementById('content').innerHTML = "Total amount of Owner friends is: " + friendCount;
}
gadgets.util.registerOnLoadHandler(init);
</script>
<div id="content"></div>
]]>
</Content>
</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13736270/friend_count/6ocHpjQv/

Example file: http://www.apikooien.nl/examples/opensocial/numberoffriends.xml

How to determine if the Viewer is the Owner

On the profile view, the Viewer is not always visible to the application. Therefor we need to check if we can see the Viewer. 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Is viewer Owner" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
   <Require feature="opensocial-0.7"/>
   <Require feature="views" />
</ModulePrefs>
<Content type="html">
<![CDATA[
<script type="text/javascript">
        var currentview = gadgets.views.getCurrentView().getName();
        var availableviews = gadgets.views.getSupportedViews();

        function loadData(){
        var req = opensocial.newDataRequest();
        req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER), 'viewer');
        req.send(onViewerLoaded);
        }
        function onViewerLoaded(dataResponse){
                var viewer = dataResponse.get('viewer').getData();
        if(viewer.isOwner()){
            document.getElementById('message').innerHTML = 'Viewer is Owner';
        } else{
                document.getElementById('message').innerHTML = 'Viewer is not Owner';
        }
        }

        function viewerinfo() {
                document.getElementById('viewernotvisible').style.display = "none";
            function getViewer(responseItem) {
                        if(responseItem.hadError()) {
                                var sErrorcode = responseItem.getErrorCode();
                                if(sErrorcode == 'forbidden') {
                                        document.getElementById('message').innerHTML = "You are not logged in, please log in first.";
                                } else if(sErrorcode == 'unauthorized') {
                                        document.getElementById('message').innerHTML = "This application can't see your information because you will have to give permission to share your information. Please click the button below.";
                                        document.getElementById('viewernotvisible').style.display = "block";
                                }
                        }       
                if (opensocial.hasPermission(opensocial.Permission.VIEWER)) {
                        loadData();
                }
            }
            opensocial.requestPermission([opensocial.Permission.VIEWER], 'This reason sentence is not used at the moment', getViewer);
        }

        function init() {
                // check if you have permission to see the VIEWER
                if(opensocial.hasPermission(opensocial.Permission.VIEWER)){
                     loadData();
                } else{
                        // you don't have VIEWER permission, so on the profile view this means you are not the owner
                        if(availableviews[currentview] == availableviews['profile']) {
                                document.getElementById('message').innerHTML = 'viewer is not owner (or not logged in) because viewer information is not by default available on profile. Please click the button below.';
                                document.getElementById('viewernotvisible').style.display = "block";                            
                        } else {
                        loadData();
                        }
                }
        }
        
        gadgets.util.registerOnLoadHandler(init);
</script>
  <div id="message"></div>
  <div id="viewernotvisible" style="display:none;"><input type="button" onclick="viewerinfo();" value="Ask for viewer permission"></div>
]]>
</Content>
</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13736297/Is_viewer_Owner/50_j9BoV/

Example file: http://www.apikooien.nl/examples/opensocial/viewerisowner.xml

Getting data from Owner, Viewer, Hyver or Friends

To know who the viewer and the owner is. To get the owner friends or specific Hyvers (They are sorted and can be set with a amount of Hyvers you want each newFetchPeopleRequest. 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="List data" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
   <Require feature="opensocial-0.7"/>
   <Require feature="dynamic-height"/>
 </ModulePrefs>
 <Content type="html">

 <![CDATA[
<style>
body {
        font-size:12px;
        font-family:Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript">

// this is a gadget example for newFetchPersonRequest and newFetchPeopleRequest with unique id's or with owner friends
function loadData() {
    var req = opensocial.newDataRequest();
        req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
        req.add(req.newFetchPersonRequest('OWNER'), 'owner');
        
        var params = {};
        params[opensocial.DataRequest.PeopleRequestFields.FIRST] = 0;
        params[opensocial.DataRequest.PeopleRequestFields.MAX] = 10;
        params[opensocial.DataRequest.PeopleRequestFields.SORT_ORDER] = opensocial.DataRequest.SortOrder.NAME;
        
        // disabled example on how to filter your result on people who have the app installed
        //params[opensocial.DataRequest.PeopleRequestFields.FILTER] = opensocial.DataRequest.FilterType.HAS_APP;
        
        // disabled example with multiple userid's        
        //var hyverIds = ["XXXXXXXXX","YYYYYYYYYYY"];
        //req.add(req.newFetchPeopleRequest(hyverIds, params), 'hyvers');
        
        // example owner_friends
        req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS, params), 'ownerfriends');
        
        // example viewer_friends
        req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS, params), 'viewerfriends');
        
        req.send(onLoadData);
}

function onLoadData(data) {
    var viewer = data.get('viewer').getData();
    var owner = data.get('owner').getData();
    var ownerfriends = data.get('ownerfriends').getData();
        var viewerfriends = data.get('viewerfriends').getData();

    var viewerId = viewer.getField(opensocial.Person.Field.ID);
    var ownerId = owner.getField(opensocial.Person.Field.ID);
        var sViewerThumbnail = viewer.getField(Hyves.Person.Field.THUMBNAIL_URL_SQUARE_LARGE);
        var sOwnerThumbnail = owner.getField(Hyves.Person.Field.THUMBNAIL_URL_SQUARE_LARGE);
        
    html = new Array();
    html.push('<br>Viewer/Owner:<br><hr><br>');
    html.push('<table><tr><td><strong>Owner:</strong></td><td><img src="' + sOwnerThumbnail + '" border="0"></td><td><strong>Userid:</strong></td><td>' + ownerId + '</td></tr>');
    html.push('<tr><td><strong>Viewer:</strong></td><td><img src="' + sViewerThumbnail + '" border="0"></td><td><strong>Userid:</strong></td><td>' + viewerId + '</td></tr>');
    html.push('</table><br>');
        html.push('<h4>First 10 OWNER_FRIENDS</h4><hr><br>');

    ownerfriends.each(function(person) {
        var sId = person.getId();
        var sGivenName = person.getField(opensocial.Person.Field.NAME).getField(opensocial.Name.Field.GIVEN_NAME);
        var sFamilyName = person.getField(opensocial.Person.Field.NAME).getField(opensocial.Name.Field.FAMILY_NAME);
        var sUnstructuredName = person.getField(opensocial.Person.Field.NAME).getField(opensocial.Name.Field.UNSTRUCTURED);
        var gender = person.getField(opensocial.Person.Field.GENDER);
        var sGender = gender ? gender.getDisplayValue() : 'unknown';
        var sDisplayname = person.getDisplayName();
        var sNickname = person.getField(opensocial.Person.Field.NICKNAME);
        var firstAddress = person.getField(opensocial.Person.Field.ADDRESSES)[0];
        var sAdresType = firstAddress.getField(opensocial.Address.Field.TYPE);
        var sAdresUnstructured = firstAddress.getField(opensocial.Address.Field.UNSTRUCTURED_ADDRESS);
        var sAdresLocality = firstAddress.getField(opensocial.Address.Field.LOCALITY);
        var sAdresCountry = firstAddress.getField(opensocial.Address.Field.COUNTRY);
        var sDateOfBirth = person.getField(opensocial.Person.Field.DATE_OF_BIRTH);
        var sProfileUrl = person.getField(opensocial.Person.Field.PROFILE_URL);
        var sThumbnail = person.getField(Hyves.Person.Field.THUMBNAIL_URL_SQUARE_LARGE);

        html.push('<img src="' + sThumbnail + '" border="0">');
        html.push('<br><br>');
        html.push('id: ' + sId);
        html.push('<br>');
        html.push('givenName: ' + sGivenName);
        html.push('<br>');
        html.push('familyName: ' + sFamilyName);
        html.push('<br>');
        html.push('displayname: ' + sDisplayname);
        html.push('<br>');
        html.push('nickname: ' + sNickname);
        html.push('<br>');
        html.push('unstructured name: ' + sUnstructuredName);
        html.push('<br>');
        html.push('gender:' + sGender);
        html.push('<br>');
        html.push('date of birth: ' + sDateOfBirth);
        html.push('<br>');
        html.push('profile url: ' + sProfileUrl);
        html.push('<br><br>');
        html.push('address: ');
        html.push('<br>');
        html.push('type: ' + sAdresType);
        html.push('<br>');
        html.push('unstructured: ' + sAdresUnstructured);
        html.push('<br>');
        html.push('locality: ' + sAdresLocality);
        html.push('<br>');
        html.push('country: ' + sAdresCountry);
        html.push('<br><hr><br>');
    });

    html.push('<h4>First 10 VIEWER_FRIENDS</h4><hr><br>');
                
    viewerfriends.each(function(person) {
            var sThumbnail = person.getField(Hyves.Person.Field.THUMBNAIL_URL_SQUARE_LARGE);
            html.push('<img src="' + sThumbnail + '" border="0">');
    });
        
    html.push('<br><br>');
    document.getElementById('message').innerHTML = html.join('');
    gadgets.window.adjustHeight();
}
function viewerinfo() {
        document.getElementById('viewernotvisible').style.display = "none";
    function getViewer(responseItem) {
                if(responseItem.hadError()) {
                        var sErrorcode = responseItem.getErrorCode();
                        if(sErrorcode == 'forbidden') {
                                document.getElementById('message').innerHTML = "You are not logged in, please log in first.";
                        } else if(sErrorcode == 'unauthorized') {
                                document.getElementById('message').innerHTML = "This application can't see your information because you will have to give permission to share your information. Please click the button below.";
                                document.getElementById('viewernotvisible').style.display = "block";
                        }
                }       
        if (opensocial.hasPermission(opensocial.Permission.VIEWER)) {
                loadData();
        }
    }
    opensocial.requestPermission([opensocial.Permission.VIEWER], 'This reason sentence is not used at the moment', getViewer);
}
function init() {
    if (opensocial.hasPermission(opensocial.Permission.VIEWER)) {
            loadData();
    } else {
                document.getElementById('viewernotvisible').style.display = "block";
    }
}

gadgets.util.registerOnLoadHandler(init);

  </script>
  <div id="viewernotvisible" style="display:none;"><input type="button" onclick="viewerinfo();" value="Ask for viewer permission"></div>
  <div id="message"></div>
  ]]>
  </Content>
</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13682722/List_data/zbEvUwWY/

Example file: http://www.apikooien.nl/examples/opensocial/ownerviewerdata.xml

Has app installed

Check if the viewer has the app installed. Also possible to check on owner or viewer friends. 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Has app installed" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
   <Require feature="opensocial-0.7"/>
   <Require feature="dynamic-height"/>
 </ModulePrefs>
 <Content type="html">

 <![CDATA[

<script type="text/javascript">

// this is a gadget example on how to filter on persons who have the app installed
function loadData() {
        var params = {};
        params[opensocial.DataRequest.PeopleRequestFields.FILTER] = opensocial.DataRequest.FilterType.HAS_APP;

        var req = opensocial.newDataRequest();
        req.add(req.newFetchPersonRequest('VIEWER', params), 'viewer');

                // You can also check all of your friends with VIEWER_FRIENDS
                //req.add(req.newFetchPersonRequest('VIEWER_FRIENDS', params), 'viewer');
        req.send(onLoadData);
}

function onLoadData(data) {
        var viewer = data.get('viewer').getData();
                if(viewer != null) {
                var result = "You (the viewer) have the app installed";
                } else {
                var result = "You (the viewer) do not have the app installed";
                }
        document.getElementById('message').innerHTML = result;
        gadgets.window.adjustHeight();
}

function viewerinfo() {
        document.getElementById('viewernotvisible').style.display = "none";
    function getViewer(responseItem) {
                if(responseItem.hadError()) {
                        var sErrorcode = responseItem.getErrorCode();
                        if(sErrorcode == 'forbidden') {
                                document.getElementById('message').innerHTML = "You are not logged in, please log in first.";
                        } else if(sErrorcode == 'unauthorized') {
                                document.getElementById('message').innerHTML = "This application can't see your information because you will have to give permission to share your information. Please click the button below.";
                        }
                }       
        if (opensocial.hasPermission(opensocial.Permission.VIEWER)) {
                loadData();
        }
    }
    opensocial.requestPermission([opensocial.Permission.VIEWER], 'This reason sentence is not used at the moment', getViewer);
}

function init() {
    if (opensocial.hasPermission(opensocial.Permission.VIEWER)) {
            loadData();
    } else {
                document.getElementById('viewernotvisible').style.display = "block";
    }
}

gadgets.util.registerOnLoadHandler(init);

  </script>
  <div id="viewernotvisible" style="display:none;"><input type="button" onclick="viewerinfo();" value="Ask for viewer permission"></div>
  <div id="message"></div>
  ]]>
  </Content>
</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13736327/Has_app_installed/E9EAo7M5/

Example file: http://www.apikooien.nl/examples/opensocial/viewer_hasapp.xml

Share gadget with friends (appInvite)

With requestShareApp() you can invite friends for the gadget (no predefined message possible).

Click here for the example and for more info

Send an application message (Tell a Friend)

With requestSendMessage() you can send a predefined message to a Hyver with a link to the gadget. 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Tell a friend example" summary="" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
        <Require feature="opensocial-0.7"/>
        <Require feature="dynamic-height"/>
        </ModulePrefs>
                <Content type="html">
                        <![CDATA[
                        
                                function loadData(req) {
                                        req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
                                
                                        var params = {};
                                        params[opensocial.DataRequest.PeopleRequestFields.FIRST] = 0;
                                        params[opensocial.DataRequest.PeopleRequestFields.MAX] = 10000;
                                        params[opensocial.DataRequest.PeopleRequestFields.SORT_ORDER] = opensocial.DataRequest.SortOrder.NAME;
                                
                                        // Retrieve the friends of the VIEWER
                                        req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS, params), 'viewerfriends');
                                
                                        req.send(onLoadData);
                                }
                
                                function onLoadData(data) {
                                        var viewer = data.get('viewer').getData();
                                        var viewerfriends = data.get('viewerfriends').getData();
                                
                                        var viewerId = viewer.getField(opensocial.Person.Field.ID);
                                
                                        var sViewerThumbnail = viewer.getField(Hyves.Person.Field.THUMBNAIL_URL_SMALL);
                                             
                                        html = new Array();
                                                html.push('<h4>Subject</h4>');
                                                html.push('<input type="text" id="subject" value="This is the subject">');
                                                html.push('<h4>Message</h4>');
                                                html.push('<textarea id="messagebody" style="width: 350px; height: 75px">Test [b]message[/b] [i]body[/i] with a [url=http://www.hyves.nl]link[/url] and a smiley :) :P </textarea>');
                                        html.push('<h4>Select friends</h4>');
                                                html.push('<input type="hidden" id="theviewer" value="' + viewerId +'"'); // Used for the demo version. Send the message only to the VIEWER's inbox
                                                
                                                // This input field is used to filter the results based on the users input
                                                html.push('<label for="filt">Filter results</label>');
                                                html.push('<input name="filt" onkeyup="filter(this, \'filterable\', \'1\')" type="text">');
                                                
                                                // This form will hold your friends
                                                html.push('<form name="myfriends" id="myfriends">');
                                                html.push('<div class="friends">');
                                                html.push('<table celpadding=0 cellspacing=0 id="filterable">');
                                                html.push('<thead>');
                                                html.push('<tr>');
                                                html.push('<th colspan=3></th>');
                                                html.push('</tr>');
                                                html.push('</thead>');
                                                html.push('<tbody>');
                                                
                                                // For echt friend create a row
                                                viewerfriends.each(function(person) {
                                                
                                                                // Retrieve the user information of the friends
                                                                var sFriendId  = person.getField(opensocial.Person.Field.ID);
                                                var sGivenName = person.getField(opensocial.Person.Field.NAME).getField(opensocial.Name.Field.GIVEN_NAME);
                                                                var sGetFamName = person.getField(opensocial.Person.Field.NAME).getField(opensocial.Name.Field.FAMILY_NAME);      
                                                var sThumbnail = person.getField(Hyves.Person.Field.THUMBNAIL_URL_SQUARE_LARGE);
                                                                
                                                                // If the family name is empty do not display it
                                                                if(sGetFamName == null) {
                                                                        var sFamName = " ";
                                                                } else {
                                                                        sFamName = sGetFamName;
                                                                }
                                                                
                                                                html.push('<tr class="checkrow">');
                                                                html.push('<td>');
                                                                html.push('<input type="checkbox" name="friend" value="' + sFriendId + '" >');
                                                                html.push('</td>');
                                                                html.push('<td>');
                                                html.push('<img src="' + sThumbnail + '" border="0" height="42px">');
                                                                html.push('</td>');
                                                                html.push('<td>'); 
                                                html.push(sGivenName + " " + sFamName);
                                                                html.push('</td>');
                                                                html.push('</tr>');
                                                
                                        });
                                                
                                                html.push('</tbody>');
                                                html.push('</table>');
                                                html.push('</div>');
                                                html.push('<input type="button" value="versturen" onClick="tellFriend()">');
                                                html.push('</form>');
                                                html.push('<em style="font-size: 11px">Note: While in sandbox mode you can only send 20 messages each month. Use them wisely ;-)</em>');
                                                
                                                // Create the HTML and adjust the height
                                        document.getElementById('message').innerHTML = html.join('');
                                        gadgets.window.adjustHeight();
                                }
                
                                function init() {
                                        function getViewer() {
                                                if (opensocial.hasPermission(opensocial.Permission.VIEWER)) {
                                                        var req = opensocial.newDataRequest();
                                                        loadData(req);
                                                } else {
                                                        document.getElementById('message').innerHTML = 'No permission to see the viewer';
                                                }
                                        }
                                        opensocial.requestPermission([opensocial.Permission.VIEWER], 'This reason sentence is not used at the moment', getViewer);
                                }
                
                                function tellFriend() {
                                        var selectedFriends = "";
                                        //For each checkbox see if it has been checked, record the value.
                                        for (i = 0; i < document.getElementById('myfriends').friend.length; i++)
                                        if (document.getElementById('myfriends').friend[i].checked){
                                        selectedFriends += document.getElementById('myfriends').friend[i].value;
                                                selectedFriends += ",";
                                        }
                        
                                    // we do not allow VIEWER_FRIENDS and OWNER_FRIENDS as recipients           
                                    var recipients = [selectedFriends]; // A single reciepient should be set as ['6c7ec0b62fca4e5f'] and multiple reciepients are called like [6c7ec0b62fca4e5f,6c7ec0b62fca4e5f,6c7ec0b62fca4e5f]
                                        
                                        // Retrieve the values for the title and body from the input fields
                                        var title               = document.getElementById('subject').value;
                                    var body            = document.getElementById('messagebody').value;
                                
                                    var opt_params = {};
                                
                                    // the opensocial.Message.Field.TYPE field will be ignored
                                    opt_params[opensocial.Message.Field.TITLE] = title;
                                
                                    // create the message object
                                    var message = opensocial.newMessage(body, opt_params);
                                
                                    // callback is optional
                                    var callback = function(responseItem){
                                    // responseItem contains id's of the people who were send a message     
                                            if(responseItem.hadError()) {
                                                    var sErrorcode = responseItem.getErrorCode();
                                                    alert(sErrorcode);
                                            } else {        
                                                    var aData = responseItem.getData();
                                                    var sResult = '';
                                                    if(aData.length != 0) { 
                                                            for (var i=0;i<aData.length;i++) {
                                                                    sResult += aData[i]+' ';
                                                            }
                                                            reloadPage(recipients);
                                                    }
                                            }
                                    };
                
                                // Actually send the message
                                opensocial.requestSendMessage(recipients, message, callback);
                                }
        
                
                                function reloadPage(recipients) {
                                        // This function is called when the message is succesfully send
                                        // It reloads the page and shows a succes message
                                        html = new Array();
                                        html.push('<h2>Success!</h2>');
                                        html.push('The message has been send to the following recipients:<br/><br/>');
                                        
                                        // Display the users the message has just been send to
                                var params = {};
                                        var hyverIds = [recipients];
                                        var req = opensocial.newDataRequest();
                                        req.add(req.newFetchPeopleRequest(hyverIds, params), 'hyvers');
                                        
                                        req.send(function(response) {
                                        var hyvers = response.get('hyvers').getData();
                                        
                                                hyvers.each(function(hyver) {
                                                        var sThumbnail = hyver.getField(Hyves.Person.Field.THUMBNAIL_URL_SQUARE_LARGE);
                                                        var sGivenName = hyver.getField(opensocial.Person.Field.NAME).getField(opensocial.Name.Field.GIVEN_NAME);
                                                        var sProfile = hyver.getField(opensocial.Person.Field.PROFILE_URL);
                                                        html.push('<a href="' + sProfile + '" target="_blank"><img src="' + sThumbnail + '" border="0" title="' + sGivenName  +  '" ></a>');
                                                });
                                                
                                                html.push('<em>Note:<br>While in sandbox mode you can only send 20 messages each month<br>In sandbox mode you can only send messages to other API-developers</em>');
                                                document.getElementById('message').innerHTML = html.join('');
                                        gadgets.window.adjustHeight();
                                        })
                        
                                        
                                }
                
                                // Filter the results on the users input
                                function filter (phrase, _id){
                                var words = phrase.value.toLowerCase().split(" ");
                                var table = document.getElementById(_id);
                                var ele;
                                for (var r = 1; r < table.rows.length; r++){
                                        ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
                                        var displayStyle = 'none';
                                        for (var i = 0; i < words.length; i++) {
                                            if (ele.toLowerCase().indexOf(words[i])>=0)
                                                displayStyle = '';
                                            else {
                                                displayStyle = 'none';
                                                break;
                                            }
                                        }
                                        table.rows[r].style.display = displayStyle;
                                }
                        }
        
                
                        gadgets.util.registerOnLoadHandler(init);

                        </script>
                        
                        <div id="message"></div>
                        
                        ]]>
                </Content>
  
</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/14884641/Tell_a_friend_example/iRl1u773/ (You will have to be in Sandbox mode)

Example file: http://www.apikooien.nl/examples/opensocial/telll_a_friend/tell_a_friend_example.xml

Note: While in Sandbox mode it's only possible to send 20 messages a month. If you reach this number and still need to test, rename the xml file and add it as a new gadget.

Note: While in Sandbox mode, you can only send messages to other API developers.

Send an application message (single message)

Click here for the example and more info.

Setting and fetching appdata

Storing of viewer data (you can store up to 10kb with each instance). 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="appData example" summary="" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
        <Require feature="opensocial-0.7"/>
</ModulePrefs>
<Content type="html">
        <![CDATA[
        <script type="text/javascript">
        
        function get_callback(response) {
                // response.get("oViewer").getData().getId();
                var userid = response.get("oViewer").getData().getId();
                
                if (response.get("get_data").hadError()) {
                        alert("get callback failed");
                } else {
                        var data = response.get("get_data").getData();
                        alert(data[userid]["myKey"]);
                        alert("get callback suceeded");
                }
        };
        
        function set_callback(response) {
                if (response.get("set_data").hadError()) {
                        alert("set callback failed: "+response.get("set_data").getErrorMessage());
                } else {
                        alert("set callback succeeded");
                }
        };
        
        function get_request() {
                var req = opensocial.newDataRequest();
                req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER), "oViewer");
                req.add(req.newFetchPersonAppDataRequest("VIEWER", "myKey"), "get_data");
                req.send(get_callback);
        };
        
        // set data with the current time as value and with key "myKey"
        function request() {
                var req = opensocial.newDataRequest();
                var sTime = getCurrentTime().toString();
                req.add(req.newUpdatePersonAppDataRequest("VIEWER", "myKey", sTime), "set_data");
                req.send(set_callback);
        };
        
        function getCurrentTime() {
                var currentTime = new Date()
                return currentTime;
        }
        </script>
        <br>
        &nbsp;<input type="button" value="Set appdata" onClick="request();">&nbsp;
        <input type="button" value="Get appdata" onClick="get_request();">
        ]]>
</Content>
</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13736355/appData_example/XBVsaRTV/

Example file: http://www.apikooien.nl/examples/opensocial/settingappdata.xml

Passing params on installation / Passing params to another view / navigating between views

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Passing params to another view" description="" screenshot="" author="" author_email="" author_location="" author_affiliation="" height="200">
<Require feature="opensocial-0.7" />
<Require feature="views" />
</ModulePrefs>
  <Content type="html">
  <![CDATA[
<script type="text/javascript">
function navigate(navigateview){
        var params = {};
        var currentview = gadgets.views.getCurrentView().getName();
        var availableviews = gadgets.views.getSupportedViews();
        for(i in availableviews) {
                // show all possible views with the firebug add on in Firefox
                if (window.console && window.console.firebug) {         
                        console.log(availableviews[i]);
                }
        }
        if(currentview != navigateview && navigateview != '') {
                params['data1'] = 'This is paramdata';
                params['data2'] = 'This is paramdata to';
                gadgets.views.requestNavigateTo(availableviews[navigateview], params);
        } else {
                alert('You are allready on this view');
        }
}
function init() {
        var params = gadgets.views.getParams();
        if (typeof(params['data1']) == 'undefined') document.getElementById('sParam1').value = 'empty'; else document.getElementById('sParam1').value = params['data1'];
        if (typeof(params['data2']) == 'undefined') document.getElementById('sParam2').value = 'empty'; else document.getElementById('sParam2').value = params['data2'];        
}

gadgets.util.registerOnLoadHandler(init);
</script>
Which view do you want to go to? <select onChange="javascript:navigate(this.value);">
    <option>select...</option>
    <option value="home">home</option>
    <option value="profile">profile</option>
    <option value="canvas">canvas</option>
</select>
<br><br>
Passed param value: <input type="text" id="sParam1" style="background:#F0F0F0;" READONLY /><br>
Passed param value: <input type="text" id="sParam2" style="background:#F0F0F0;" READONLY /><br>
  ]]>
  </Content>
</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13736198/Passing_params_to_another_view/GJqY5Kcx/

Example file: http://www.apikooien.nl/examples/opensocial/passing_params.xml

When passing params on the item page (installation page) you can personalized the gadget with these parameters that will be available on the canvas view once the gadget is installed. The url that is presented below uses the example of Passing params to another view to do so.

Example install: http://www.hyves.nl/gadgetgallery/389/Passing_params_to_another_view/?appParams={%22data1%22:%22data%20on%20install%22,%22data2%22:%22This%20is%20paramdata%20to%22}

Adobe Flash

Example of displaying Adobe flash content.

Spec reference: http://code.google.com/apis/opensocial/docs/0.7/reference/gadgets.flash.html

Note: To have your Flash files cached by Hyves you need to use gadgets.io.getProxyUrl() in combination with gadgets.flash.embedFlash() instead of using the gadgets.flash.embedCachedFlash(). This is because this function does not work at the moment. More on OpenSocial and cacing can be found on OpenSocialCaching 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Adobe Flash example" summary="" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
<Require feature="opensocial-0.7"/>
<Require feature="flash" />
</ModulePrefs>

<Content type="html">
<![CDATA[
        <style>
        html, body {
                margin: 0; // set the iframed page margin to zero
                background-color: transparent; //set the gadget background to transparent
        }
        </style>
        <div id="flashcontent">
        </div>
        
        <script type="text/javascript">
                var swfUrl = "http://www.example.com/example.swf";
                var proxySwfUrl = gadgets.io.getProxyUrl(swfUrl);
                swfUrl = "http://" + document.domain + "/gadgets/" + proxySwfUrl;
                // use the embedflash function with the wmode set to transparent so you flashmovie does not fall behind the Hyves presencebar in the footer and behind the main menu items of the Hyves website
                gadgets.flash.embedFlash(swfUrl, "flashcontent", 9, {id: 'example', width: 380, height: 380, allowScriptAccess: 'always', wmode: 'transparent', flashVars: ''});
        </script>
]]>
</Content>

</Module>

Google analytics

You can add Google analytics tracking to a gadget. More information on the Google documentation. 

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Google analytics" summary="" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
<Require feature="opensocial-0.7"/>
<Require feature="analytics"/>

<Content type="html">
<![CDATA[
<script type="text/javascript">
 // tracking this gadget as an pageview
 _IG_Analytics("UA-XXXXXX-X", "/example_gadget");
 // Track this click as an pageview
 <input onclick="_IG_Analytics('UA-XXXXXX-X', '/example_gadget/click')" type=button value="This click is counted by Analytics"/>
</script>
]]>
</Content>

</Module>

Gadgets Skin

Example of getting the information of the skin that the Hyver is using, this way the application can blend in with the profile (Spec reference http://code.google.com/apis/opensocial/docs/0.7/reference/gadgets.skins.html). 

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="gadgetSkins" summary="" description="" author="" author_email="" thumbnail="" screenshot="" height="260">
<Require feature="opensocial-0.7"/>
<Require feature="views"/>
<Require feature="dynamic-height"/>
<Require feature="skins" />
</ModulePrefs>
<Content type="html">
     <![CDATA[
<script type="text/javascript">
function init() {
        var sContent = '<h4>gadgets.skins</h4>';
        sContent += "BG_COLOR: "+gadgets.skins.getProperty(gadgets.skins.Property.BG_COLOR)+"<br>";
        sContent += "ANCHOR_COLOR: "+gadgets.skins.getProperty(gadgets.skins.Property.ANCHOR_COLOR)+"<br>";
        sContent += "BG_IMAGE: "+gadgets.skins.getProperty(gadgets.skins.Property.BG_IMAGE)+"<br>";
        sContent += "FONT_COLOR: "+gadgets.skins.getProperty(gadgets.skins.Property.FONT_COLOR)+"<br>";
        document.getElementById('content').innerHTML = sContent;
}
gadgets.util.registerOnLoadHandler(init);
</script>
<div id="content" style="width:380px;margin:10px auto;font-size: 80%">
</div>
        ]]>
</Content>
</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13737444/gadgetSkins/G9FGsRgB/

Example file: http://www.apikooien.nl/examples/opensocial/gadget_skin.xml

Signed request

Example of doing a signed request with gadgets.io.makeRequest. This script also includes a serverside script (PHP) with the help of an oAuth library. You can download the files in a RAR-file here http://www.apikooien.nl/examples/opensocial/signedrequest/signed_request.rar. You can find more information on this here 

<?xml version="1.0" encoding="UTF-8"?>
<Module>
        <ModulePrefs title="Signed request test Gadget" summary="" description="" author="" author_email="" thumbnail="" screenshot="" height="260">
                <Require feature="opensocial-0.7" />
                <Require feature="dynamic-height" />
        </ModulePrefs>
        <Content type="html">
                <![CDATA[
                <style>
                html body {
                        padding:15px;
                        }
                #maindiv {
                        font-size: 9pt;
                        }
                #oauthtextarea {
                        width:100%;
                }
                </style>
                <p>This test gadget performs a signed io.makeRequest();</p>
                <script type="text/javascript">         
                function initgadget() {
                        makeSignedRequest();
                }

                function makeSignedRequest() {
                        var params = {};
                        params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED;
                        params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
                        var url = "http://www.apikooien.nl/examples/opensocial/signedrequest/TestOAuthService.php";
                        gadgets.io.makeRequest(url, response, params);
                };
                
                function response(ret) {
                        var html = [ ret.data.validated, "<br />",
                                "oauth_consumer_key: ", ret.data.query.oauth_consumer_key, "<br />",
                                "oauth_nonce: ", ret.data.query.oauth_nonce, "<br />",
                                "oauth_signature: <br><textarea id='oauthtextarea'>", ret.data.query.oauth_signature, "</textarea><br />",
                                "oauth_signature_method: ", ret.data.query.oauth_signature_method, "<br />",
                                "oauth_timestamp: ", ret.data.query.oauth_timestamp, "<br />",
                                "oauth_token: ", ret.data.query.oauth_token, "<br />",
                                "opensocial_app_id: ", ret.data.query.opensocial_app_id, "<br />",
                                "opensocial_owner_id: ", ret.data.query.opensocial_owner_id, "<br />",
                                "opensocial_viewer_id: ", ret.data.query.opensocial_viewer_id, "<br />",
                                "xoauth_signature_publickey: ", ret.data.query.xoauth_signature_publickey ].join("");
                    html = html+"<br><br>";
                        output(html);
                        loadOwner();                    
                };

                function loadOwner() {
                        var req = opensocial.newDataRequest();
                        req.add(req.newFetchPersonRequest('OWNER'), 'owner');
                        req.send(onLoadOwner);
                };

                function onLoadOwner(data) {
                        var owner = data.get('owner').getData();
                        output("<br><br><strong>owner_id from newFetchPersonRequest</strong>: " + owner.getId() + " (compare this to opensocial_owner_id)<br>");
                };
                
                function output(value) {
                        document.getElementById("maindiv").innerHTML += value;
                        gadgets.window.adjustHeight();
                }

                gadgets.util.registerOnLoadHandler(initgadget);
                </script>
                <div id="maindiv"><strong>Reponse from the server:</strong><br/></div>
                ]]>
                
        </Content>
</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13737498/Signed_request_test_Gadget/wDZbk4LJ/

Example file: http://www.apikooien.nl/examples/opensocial/signedrequest/signed_request.xml

OpenSocial Tabs

Example of using the tabs functionality within OpenSocial. For more information see the 0.7 spec reference on http://code.google.com/apis/opensocial/docs/0.7/reference/gadgets.Tab.html 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Tabs" summary="" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
   <Require feature="opensocial-0.7"/>
        <Require feature="tabs" />
</ModulePrefs>
<Content type="html">
<![CDATA[
<script type="text/javascript">
        var tabSet = '';
        function init() {
                // Add a new tabset to the div with id "tabContainer"
                tabSet = new gadgets.TabSet(null,null,document.getElementById("tabContainer"));
                // Add 3 tabs to the specified div's with the callback function callback_tab
                tabSet.addTab("Tab 1", {contentContainer: document.getElementById("tabContentContainer1"),tooltip: "Tab 1",callback: callback_tab});
                tabSet.addTab("Tab 2", {contentContainer: document.getElementById("tabContentContainer2"),tooltip: "Tab 2",callback: callback_tab});
                tabSet.addTab("Tab 3", {contentContainer: document.getElementById("tabContentContainer3"),tooltip: "Tab 3",callback: callback_tab});            
                // Align the tabs to the left
                tabSet.alignTabs('left');
        }
        function callback_tab() {
                // to printout some information this example uses Firebug within the browser Firefox
                if (window.console && window.console.firebug) {
                        //get the selected tab 
                        var oSelectedTab = tabSet.getSelectedTab();
                        console.log('getName: ' + oSelectedTab.getName());
                        console.log('getIndex: ' + oSelectedTab.getIndex());
                        console.log('getNameContainer: ');
                        console.log(oSelectedTab.getNameContainer());                   
                        console.log('getContentContainer: ');
                        console.log(oSelectedTab.getContentContainer());                        
                }
        }
    gadgets.util.registerOnLoadHandler(init);                   
</script>
        <div id="tabContainer"></div>
        <div id="tabContentContainer1">Content tab 1</div>
        <div id="tabContentContainer2">Content tab 2</div>
        <div id="tabContentContainer3">Content tab 3</div>
]]>
</Content>
</Module>

Example install: http://gorillaapi.hyves.fm/gapmember/13737590/Tabs/6V1sP4Mo/

Example file: http://www.apikooien.nl/examples/opensocial/signedrequest/tabs.xml

Localization

To localize your application you can use message bundles that are defined in the OpenSocial spec. Hyves only uses the Dutch and the English language, so in the example the English message bundle is the default one and the Dutch message bundle is used when the Dutch language is selected. For these 2 message bundles you need to specify two files. More information on localization can be found here http://wiki.opensocial.org/index.php?title=Localizing_OpenSocial_applications.

Example of the use of 2 message bundles: 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Message bundle" summary="__MSG_SUMMARY__" description="__MSG_DESCRIPTION__" height="350" author="" author_email="" screenshot="" thumbnail="">
<Require feature="opensocial-0.7"/>
<Locale messages="http://www.apikooien.nl/examples/opensocial/message_bundle/locale/ALL_ALL.xml"/>
<Locale lang="nl" messages="http://www.apikooien.nl/examples/opensocial/message_bundle/locale/nl_ALL.xml"/>
</ModulePrefs>

<Content type="html">
<![CDATA[
        <script type="text/javascript">
                function init() {
                        var sText = "__MSG_TEST_TEXT_LANGUAGE_TEMPLATE__";
                        document.getElementById('content').innerHTML = sText;
                }
                gadgets.util.registerOnLoadHandler(init);
        </script>
        <div id="content"></div>
]]>
</Content>
</Module>

Dutch message bundle: 

<?xml version="1.0" encoding="UTF-8" ?>
<messagebundle>

        <msg name="SUMMARY">Samenvatting</msg>
        
        <msg name="DESCRIPTION">Beschrijving</msg>

        <msg name="TEST_TEXT_LANGUAGE_TEMPLATE">Deze tekst is in het Nederlands geschreven, dit template bestand wordt gebruikt als de Nederlands taalinstelling is geslecteerd op Hyves.</msg>

</messagebundle>

The default (English) message bundle: 

<?xml version="1.0" encoding="UTF-8" ?>
<messagebundle>

        <msg name="SUMMARY">Summary</msg>
        
        <msg name="DESCRIPTION">Description</msg>

        <msg name="TEST_TEXT_LANGUAGE_TEMPLATE">This text is writen in English, this is the default file that is used if no message template is found.</msg>

</messagebundle>

Example install: http://gorillaapi.hyves.fm/gapmember/13737556/Message_bundle/36Hib9HO/

Example file: http://www.apikooien.nl/examples/opensocial/message_bundle/message_bundle.xml

WWWS on the map

Example of using a xml file with your public wwws that are displayed on a Google map. 

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Jouw publieke wiewatwaar op de kaart" summary="" description="" author="" author_email="" thumbnail="" screenshot="" height="260">
   <Require feature="opensocial-0.7"/>
   <Require feature="dynamic-height"/>
                <Optional feature="content-rewrite">
                  <Param name="include-urls">.*</Param>
                  <Param name="exclude-urls"></Param>
                  <Param name="include-tags">link,img,style</Param>

                </Optional>

</ModulePrefs>
<Content type="html">
     <![CDATA[
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAaUtu4ciH37L1dY4ocrVJ8BSr1uBYV4d3_BC2tRWTDZMuGQ27jhRN6dW304KEHCm8mckUZGi_-R-hZg" type="text/javascript"></script>
    <script type="text/javascript">
        //Clean up
        document.body.onunload = function() { GUnload(); };
        // key hyves-modules.nl = ABQIAAAAaUtu4ciH37L1dY4ocrVJ8BSr1uBYV4d3_BC2tRWTDZMuGQ27jhRN6dW304KEHCm8mckUZGi_-R-hZg
        var map;
        var geoXml;

    function loadMap(username) {
      if (GBrowserIsCompatible()) {
                        geoXml = new GGeoXml("http://www.hyves-feeds.nl/rss/hyver/"+username+"/wiewatwaar/");
                        map = new GMap2(document.getElementById("content"));
                        map.setCenter(new GLatLng(52.255549,5.061951), 9);
                        map.setUIToDefault();
                        if(map.isLoaded()) {
                                map.addOverlay(geoXml);
                                gadgets.window.adjustHeight();
                        }
      } else {
                document.getElementById("content").innerHTML = '<p>We&#0039;re sorry, but your browser doesn&#0039;t support the Google Maps API.</p>';
          }
    }

        function loadData(req) {
                req.add(req.newFetchPersonRequest('OWNER'), 'owner');
                req.send(onLoadData);
        }
        function onLoadData(data) {
                var ownerdata = data.get('owner').getData();
                var owner = ownerdata.getField(opensocial.Person.Field.PROFILE_URL);
            owner = owner.split(".");
            owner = owner[0].substring(7)
                html = new Array();
                html.push(owner);
            var username = html.join('')
                loadMap(username);
        }

        function init() {
                var req = opensocial.newDataRequest();
                loadData(req);
        }

        gadgets.util.registerOnLoadHandler(init);

    </script>
    <div id="content" width="100%" style="height:300px;"></div>
        ]]>
</Content>
</Module>

Example install: http://gorillaapi.hyves.nl/gapmember/7790666/Jouw_publieke_wiewatwaar_op_de_kaart/aegaOHN6/

Example file: http://www.apikooien.nl/examples/opensocial/wwws_on_maps.xml