open social
DESCRIPTION
TRANSCRIPT
![Page 1: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/1.jpg)
OpenSocial
![Page 2: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/2.jpg)
Outline
OpenSocial concepts overview Containers, people, relationships, activities, viewers,
owners, friends Hello world application
Demo: installing an application in a container Requesting social data
Using the OpenSocial namespace Demo: owner and viewer Demo: listing friends
![Page 3: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/3.jpg)
OpenSocial concepts
What is OpenSocial? OpenSocial is an API that enables the development of
applications within a social networking environment First version released in 2007
(version 0.9 released early this year) Based on HTML and JavaScript Code can be used across multiple social
websites Supported in several containers: Orkut, MySpace,
hi5, friendster, and many others
![Page 4: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/4.jpg)
OpenSocial concepts
People: users in a social networking environment
Relationships: friends and connections between people
Activities: actions that users carry out (that they want friends to know about)
OpenSocial apps: applications/gadgets written using the OpenSocial API through which users can interact
![Page 5: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/5.jpg)
Key namespaces
opensocial: defines classes that represent key objects and data in a social networking environment (persons, activities, messages) and functions that facilitate object creation and social data requests
gadget: defines classes and functions that facilitate remote data requests and container-specific user interface features
![Page 6: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/6.jpg)
Roles
Viewer: user who logged in, who may be viewing another person’s profile
Owner: user who owns the profile Friends: users who have been added as
friends (of the viewer or owner) within the container
![Page 7: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/7.jpg)
![Page 8: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/8.jpg)
Creating your first social app
What you needA container (social networking website) that
supports OpenSocial Create an account
(or a sandbox/developer account, as necessary)A webhost where you can store your
application code in Should be publicly accessible, or accessible from
the container
![Page 9: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/9.jpg)
Creating your first social app
You will need to create an XML file that specifies your gadget (social app)
Hello-worldgadget:
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="my first app"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"> <![CDATA[ Hello world, this is my first app. ]]> </Content> </Module>
HTML/JavaScript codegoes here
![Page 10: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/10.jpg)
Demo: friendster
Relatively straightforward container to use: apps can be installed and immediately executed without special developer or sandbox accounts
Steps: Upload gadget (XML file) to a website Log in to friendster, then go to
friendster.com/developer to install application Execute the application (your friends may execute or
install the applications as well)
![Page 11: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/11.jpg)
Requesting social data Steps:
Create an opensocial.DataRequest object Add request items to the object Send the object to the container, specifying a callback
function Example: requesting owner datafunction request() { var req = opensocial.newDataRequest(); req.add( req.newFetchPersonRequest( opensocial.IdSpec.PersonId.OWNER), 'get_owner' ); req.send(response);};
![Page 12: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/12.jpg)
opensocial.DataRequest.add()
add(request, opt_key) Adds a request item to fetch or update
data from the server Parameters
request: specifies which data to fetch/updateopt_key: string that the generated response
maps to (for future retrieval from the callback function)
![Page 13: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/13.jpg)
Request items
There are functions under opensocial.DataRequest that create request items
newFetchPersonRequest: Creates an item to request person data for the given
person Returns a Person object
newFetchPeopleRequest: Creates an item to request friends from the server Returns a Collection<Person> object
![Page 14: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/14.jpg)
opensocial.DataRequest.send()
send(callback_function) Sends the data request to the server in
order to get a data response Parameter
callback_function: The function to call with the data response generated by the server
![Page 15: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/15.jpg)
Call back function example
You need a Javascript function through which the response will be processed
function response(dataResponse) { var owner = dataResponse.get('get_owner').getData(); var html = ' <h3> Owner name:' + owner.getDisplayName()
+ ' </h3> '; document.getElementById('msg').innerHTML = html;};
The last line identifies the html code generated To be inserted inside a div tag: <div id='msg'> </div>
Key specified whenthe request was made
![Page 16: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/16.jpg)
Putting it all together
<script type="text/javascript">function request() { var req = opensocial.newDataRequest(); req.add( req.newFetchPersonRequest( opensocial.IdSpec.PersonId.OWNER), 'get_owner' ); req.send(response);};function response(dataResponse) { var owner = dataResponse.get('get_owner').getData(); var html = ' <h3> Owner name:' + owner.getDisplayName() + ' </h3>'; document.getElementById('msg').innerHTML = html;};gadgets.util.registerOnLoadHandler(request);</script><div id='msg'> </div>
![Page 17: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/17.jpg)
Request items v0.8
People: newFetchPersonRequest newFetchPeopleRequest
Activities: newFetchActivitiesRequest
Application Data: (persistence) newFetchPersonAppDataRequest newUpdatePersonAppDataRequest newRemovePersonAppDataRequest
![Page 18: Open social](https://reader036.vdocument.in/reader036/viewer/2022082916/54bf0b994a7959ef3d8b46c4/html5/thumbnails/18.jpg)
Request items v0.9 People:
newFetchPersonRequest newFetchPeopleRequest
Activities: newFetchActivitiesRequest
Application Data newFetchPersonAppDataRequest newUpdatePersonAppDataRequest newRemovePersonAppDataRequest
Media Items newCreateMediaItemRequest newFetchMediaItemsRequest newUpdateMediaItemRequest
Albums newCreateAlbumRequest newFetchAlbumsRequest newUpdateAlbumRequest newDeleteAlbumRequest