yourminis :: developers :: Social API Tutorial

Developers > Learning Center > Facebook and OpenSocial 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

Adobe Flash CS3/CS4
wAPI .mxp (If you don't have this installed yet, follow the steps found here)
Completed the RSS Tutorial

Steps

1. Open the .fla you created in the RSS Tutorial

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

2. Go to the linkHandler function

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

function linkHandler(evt:TextEvent)
{		
	widget.reporting.trackURL(evt.text);
}

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:

import yourminis.api.IWidget
var widget:IWidget;

var rss;
var textfield:TextField;

addEventListener("widget-loaded",onWidgetLoaded);

function onWidgetResize( evt:Event ):void 
{ 
	textfield.width = widget.width -20;
	textfield.height = widget.height -20;
}

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);
}

function onWidgetLoaded(evt:Event)
{
	//your widget has started and is ready for display
	widget.initWidget(300,350,0xffffff);
	widget.addEventListener(widget.WIDGET_RESIZED,onWidgetResize);
	widget.addEventListener(widget.DROPDOWN_LOADED,onDropDownLoaded);
	
    //add the textfield to the form
    textfield = new TextField();
    textfield.x = 5;
    textfield.y = 5;
	textfield.width = 280;
	textfield.height = 330;
	textfield.multiline = true;
	textfield.wordWrap = true;
            
	addChild(textfield);
	
	rss = widget.newRSS();
	rss.addEventListener(Event.COMPLETE,onRSSLoaded);
	rss.load(new URLRequest(widget.getSetting("feedurl","http://feeds.feedburner.com/yourminis")));

addEventListener(TextEvent.LINK, linkHandler);
}

function loadFeed(feed)
{
	widget.setSetting("feedurl",feed);
	
	rss = widget.newRSS();
	rss.addEventListener(Event.COMPLETE,onRSSLoaded);
	rss.load(new URLRequest(feed));
}

function onRSSLoaded(evt:Event)
{
	var loader:URLLoader = URLLoader(evt.target);
	var rssxml:XML = XML(loader.data);
	
	var str = "";
	for each (var item:XML in rssxml..item)
	{
		str+="<a href='event:" + item.link + "' target='_blank'>" + 
					item.title + "</a> " + 
					item.description + " ";
	}
	textfield.htmlText = str;
}

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 widget and can begin to take advantage of the distribution that social networks have to offer. Download the source code for this example here: Samples.

Next Steps

Start sharing your social widgets!