For the last two weeks I have been killing myself trying to, Build a widget, get it into ClearSpring and then finally set the widget so it can be installed into a users FaceBook profile. I love to figure out puzzles, but also really appreciate well documented processes. I* found both the ClearSpring and Facebooks tech documents to be verging on useless. So I did what we all do when we need the info I went to Google, where I was over whelmed with links that Described bits or what i needed to do. After wading through many links i managed to get the job done.

*i’m an idiot so you may have much better luck there then i did.

Some links I checked and found usefull:

• http://wiki.developers.facebook.com/index.php/Main_Page
• http://forum.developers.facebook.com/
• Most helpful to me and i based this tutorial on much of what i learned from this link. I tired to dumy proof it a bit.
• http://www.metablocks.com/blog/2009/01/28/clearspring-consulting-widgets/

the widget tutorial in two parts.

Goals:

• create a widget
• Embed into Clearspring using the In-Page menu
• Set up Simple FaceBook App
• Allow users to install widget on their FaceBook profile

*Assuming have a widget made (will add the making of a xml reading widget);
** make sure you have access to a php enabled server (needed for the Facebook app portion), and decide on the location of your widget.

START:

Create clearspring account;
Log in.

Menu Configuration Area:

widget name:
this name is used in the ClearSpring console manager (CS manager) to track the widget. Each widget in your account needs a unique name. Consider it a directory of sorts.

Code Type:
My widget used AS2 (if your using AS3 [teach me son]) there will be some differences although probably more similarities in the over all process. Choose AS2.

Menu Type:
Choose Sharing API (this option allows us to load the CS menu into our flash widget at runtime, so no nasty bottom bar will be added to the widget) .  *see menu types

Color Theme:
i didnt really do much with this. to be honest im not sure if its onl for the defualt externally added bottom sharing menu or not… play around and let me know.

Menu size:
Choose menu sixe approapriate to the size of your widget.

Sevices:
choose the Sharing networks you want to target and include in your CS sharing menu. Since the main gola is to get this widget into face bok make sure you have  Facebook checked as one your sharing options.

What do you want to share:
this confused me for a while at first, but what they want is the HTML to display your widget.
So if you published your widget, you want to copy the <object>….</object> tag and its contest and paste into the CS text area. *Make sure the path to your widget in the object tag refers to the Absolute URL of your widget. the full path to it on the server it will live on. (this can be changed later).

Save & Export Menu Configuration:
you can save the configuration setting (as XML, Json, ect) to use again for another widget, youd have to change some of the setting to use again.

SAVE SAVE SAVE.

WIDGET SETTINGS & Flash Updateing…

EDIT widget tab:
the edit widget tab allows you edit/update and or complete the configuration settings for your widget. It is also where you will get the Actionscript you need to hook into the CS sharing API (its all written for you/ as the AS3 [tach me son!]).

Content Template:
this containts the HTML object tag used to display your widget. if the swf changes servers/ paths you can edit the absoulte URl here.
* if you used the external shairng menu then you might need to reset the size of your widget including the hieght and width of your CS sharing menu
Library Code:
* you will need to access the fla of your widget to edit it.

Copy the library code provided here. Paste the copied code into the actions layer of your maintain line in your FLA file. The way the CS API works is it loads its self into the Root of your file, so depending on how and where you are making the menu.show() call there can be addressing issues. This tripped me up the first time for quite some time since my project required the widget to be loaded into a SWF, which complicated the absolute addressing of the widget, however it took a while for me to figure that out (if your using this you’re as slow as i am so I’m saving you time).
***ADD code sample with commented out mouse down code and disect.

Widget Info:
add the about widget info; author; email; referral site etc…

Widget parameters:
Allows you to set the parameters for your widget. if your using flash vars to pass config variables or run time user set variables you can add them here; name=”" and val=”default val”

Snapshots:
This create back up images of your widget to be used by various sharing networks as icons or for back up images, I.e. in  Facebook the profile will display the back up image, and when click it will take you to the Facebook app page hosting the widget (more on this as we go)* i also need to look into getting the swf to show in the profile instead of the back up image- not sure it can be done, but i d0nt Facebook much.

PUBLISH tab:

Facebook app wizard:
With the widget type were using the ‘wizard’ is as much as a misnomer as you can get. Enter canvas URL… WFT? this area took me quite a while to figure out. In Facebook when you create an application, the URL where the app lives is referred to, in Facebook-esse, as the Canvas. So we need to go start the set up of our  Facebook application. *LINK  Facebook Dev site.

Step two * LINK AS SOON AS the post is together