yourminis :: developers :: Social API Tutorial (Flex)

Developers > FLEX Learning Center > Social API Tutorial

This tutorial will demonstrate how to use the yourminis Social Widget API to take advantage of social features within Facebook and OpenSocial supported websites.

Requirements

Completed the RSS Flex Widget Tutorial
Download the source code for this example here: Samples.

Steps

1. Open the .mxml file you created in the RSS Flex Widget Tutorial

We will be extending the widget we developed in the RSS Flex Widget Tutorial with social capabilites.

2. Go to the onClick function

This is the function where we handle the clicking of the RSS item within the Repeater. Currently, this handler navigates the user to the URL and tracks the URL click within the yourminis widget reporting server.

private function onClick(url:String):void  
{  
    widget.navigateToURL(new URLRequest(url));  
}

3. Add a call to create a new social Activity

There are two classes that delegate social-related functions within the yourminis API:

yourminis.api.social.SimpleSocial
yourminis.api.social.Facebook

All wAPI widgets will have a widget.social instance of type yourminis.api.social.ISocial automatically set before the widget.WIDGET_LOADED event within the top level DisplayObject.

In the code below, we will utilize the Facebook API if the widget is running in Facebook, otherwise we will use the OpenSocial API.

4. Re-compile your widget and Upload

Go to the dashboard, click add new widget, and follow the prompts.

The resulting code should look like this:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    width="300" height="300" initialize="onLoad()" backgroundAlpha="0">
    <mx:Script>

<![CDATA[
    public var widget:Object; //Widget
    [Bindable]
    private var rssdata:XML;

public function onLoad():void
    {
        addEventListener("widget-loaded",onWidgetLoaded);
    }
    public function onWidgetLoaded(evt:Event):void
    {
        //initialize widget container instance (width,height,backgroundColor)
        widget.initWidget(300,300,0xccffff);
    	widget.addEventListener(widget.WIDGET_RESIZED,onResize);
	    widget.addEventListener(widget.DROPDOWN_LOADED,onDropDownLoaded);

loadFeed(widget.getSetting("feedurl","http://feeds.feedburner.com/yourminis"));
	}
        
        private function loadFeed(feed:String):void {
	
	    widget.setSetting("feedurl",feed);

var rss:Object=widget.newRSS();
	    rss.addEventListener(Event.COMPLETE,onRSSLoaded);
	    rss.load(new URLRequest(feed));
	}
            
        private function onRSSLoaded(event:Event):void {     
            var loader:URLLoader = URLLoader(event.target);
       
            rssdata = XML( loader.data );
	}

private function onResize(evt:Event):void
	{
	    this.width=widget.width-10;
	    this.height=widget.height-10;
	}

private function onClick(url:String):void  
    { 	
        //create an activity in opensocial or 
        //  a mini-feed & newfeed item in facebook
        widget.social.createActivity(
                "clicked a <a href='" + url + "'>link</a>",
                "The full URL is: <a href='" + url + "'>" 
                                          + url + "</a>");
        	
        widget.navigateToURL(new URLRequest(url));
    }

private function onDropDownLoaded( evt:Event):void
	{
    	    widget.chrome.addDropDownItem("yourminis","http://feeds.feedburner.com/yourminis",loadFeed);
            widget.chrome.addDropDownItem("digg","http://digg.com/rss/index.xml",loadFeed);
            widget.chrome.addDropDownItem("flickr","http://api.flickr.com/services/" +
                                        "feeds/photos_public.gne?format=rss2",loadFeed);
	}
        ]]>
    </mx:Script>
    <mx:Panel layout="vertical" 
	    title="Flex RSS Widget"
	    width="{this.width-10}" height="{this.height-10}">

<mx:Repeater width="100%" height="100%"
        id="items"
        dataProvider="{rssdata.channel.item}">
        <mx:VBox width="100%" horizontalAlign="left" creationCompleteEffect="Fade">
            <mx:LinkButton 
                textAlign="left"
                label="{ items.currentItem.title}"
		click="onClick( event.currentTarget.getRepeaterItem().link);"></mx:LinkButton> 
            <mx:TextArea paddingLeft="10" paddingRight="10" editable="false"
                width="98%" cornerRadius="6" height="60"
                backgroundColor="0xf9f9f9"
                htmlText="{ items.currentItem.description}" ></mx:TextArea>
            <mx:Text paddingRight="10" 
                width="98%" 
                textAlign="right"
                text="{ (items.currentItem.creator==null?'':items.currentItem.creator)+ 
                    ' ' + (items.currentItem.date==null?'':items.currentItem.date)}" />                    
        </mx:VBox>
    </mx:Repeater>
</mx:Panel>
</mx:Application>

5. Test

In order to test the Social APIs, you will need to have the widget loaded within either Facebook or an OpenSocial site that supports creating new activities. To test on Facebook, your widget needs to be associated to a Facebook application using the instructions in the Dashboard -> Syndication -> Galleries section of your widget.

On facebook, this is what it would look like in the mini-feed after clicking links in this widget:

Conclusion

Congratulations! You successfully added social capabilities to your flex widget and can begin to take advantage of the distribution that social networks have to offer.

Next Steps

Start sharing your social widgets!