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 CSE
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

The yourminis.api.social.SimpleSocial class is the main class that delegates social related functions within yourminis Widget Platform. 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.

Inside the linkHandler event, add a call to widget.social.createActivity(...) passing the title and body of the activity. The new function should look like:

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:

var widget; //Widget

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 linkHandler(evt:TextEvent)
{
 //create an activity in opensocial or 
 // a mini-feed & newfeed item in facebook
 widget.social.createActivity(
 "clicked a <a href='" + evt.text + "'>link</a>",
 "The full URL is: <a href='" + evt.text + "'>" 
 + evt.text + "</a>");
 	
 widget.reporting.trackURL(evt.text);
}

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!