Booger and Boo in the Kitchen rounding midnite New years eve. Cooking up testers treats, Non vegan so i catn attest to the goodness….

Button guy

I have seen several of the people ive drawn since starting drawing on the way to and from work. Drawing, even for a short time, is almost like the act of writing acts and a memory aid. Your sitting there basically inspecting somebody; which in this day and age doesnt always go over well, and can be easily misinterpreted. You get to know someone while drawing them, they reveal a tic, or notice you and then you do the dance. The dance of negotiating the i notice you looking at me pretending your not looking at me; and now im gonna sit here and feel uncomfortable until my stop arrives. When you run across someone youve spent that time with its like seeing an old friend. You wonder what theyve been doing and so on.

I can relate to the early ideas/fears of cameras steeling souls… theres a power in the portriat, and its various forms.

The Next Step after getting the widget into ClearSpring (see The Widget Debacle)is setting up and Facebook application that you link said widget too.

FACEBOOK

• FaceBook Developer site
• FaceBook PHP library

New Application:

Click For larger image

Create new application:

Application Name:
name your application. this like the widget naming in the CS console manager- a referral name)

Authentication:

Click for larger image

Post-Authorize callback URL:
My widget was connected to a micorsite with metrics attached to it, so i entered the micorsite URL.

Post-Removal callbakck URL:
I believe this is a redirect URL the user will go to upon removing the Widget from FaceBook. A thank or installing or a pointer to the widgets dev site or support site can be used.

***EDIT:

When a user selects to remove your application they are not sent to the ‘Post-Remove URL’ as they have removed the application and so will have no further contact with it. A POST request will be sent to this address in the background however containing the uid of the leaving user.

This was copied from HERE

Profiles:

Click for larger image

Tab name: Choose a tab name; along the top of your proilfes page you can add tabs to go to things you want ( i dont do this at all so forgive my lack of proper normanclacher). Consider it a sub navigation bar youre adding a menu item too.

Tab URL:
Add the Absolute URL to where your widget lives; on your server.
**** I LEFT THE REST OF THE INPUT AREAS BLANK–ill try and figure this out in the future.

Canvas:

Click for larger image

Canvas Page URL:
This is like choosing a directory/ folder name. Choose a name (no spaces) that will best describe your app. your application and widget will be accessible at this address; http://apps.facebook.com/-YOUR CHOSEN NAME-/ (replace ‘-YOUR CHOSEN NAME-’, with your name)
Canvas CallBack URL:
this is where shit gets a lil Stupid….
this is the address to your page facebook home page: http://yourserver/widget directory/index.php
*** FaceBook-esse.
When setting up your FaceBook application your basically creating a page or set of pages Facebook will suck into its http://apps.facebook.com framework. You will need to set up at least three documents; full disclosure these still confuse me a quite a bit, although were it set up to be a proper Facebook app it may be made clearer).
Facebook uses its own mark up language FBML FaceBook Mark-up Language, as a means to prevent any code conflicts or maliciousness, and to make this as painful as possible.
You will need to make:

• Index.PHP
• xd_receiver.htm
• profiletab.html
• virtualhairtool.html

****Post my code (in a post yet to be completed)

Optional URLs:

Bookmark URL:
You can use the facebook app home page url; http://apps.facebook.com/-your app name/
Post-Authorize Redirect URL:
this is the URL users will be redirected to after authourising the installing of your application/widget. you can use the app URL http://apps.facebook.com/-your.app name/. You may also be able do other things wiht this, but havent investigated any of the possibilities beyond going to the app home page. Upon getting to the app home page the user will see and INSTALL this application button. where they can choose to instal the app so it appears in their profiles left rail.

Canvas Settings:
Render Method: choose FBML- i havent used the iframe situation yet.

Choose SAVE SAVE SAVE.

I didn’t need any of the other settings, so im not any help with them yet.

FACEBOOK Documents:

• Index.PHP
• xd_receiver.htm
• profiletab.html
• virtualhairtool.html
• Facebook PHP library.

Directory set-up:
you will need a PHP enabled server, the easiest thing to do is to use the same directory that you have your widget in; it will reduce the chances of snadbox security issues and also make it easier to keep track of al the files that will be talking to eachother and iteracting with faceBook.

sever/widget directory/
widget
fb directory/
xd_receiver.htm
profiletab.html
virtualhairtool.html
lib directory/
php directory/ – contains the facebook php library, which your index.php will need to communicate with. *http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz

In the next post in this series i will try and disect the Facebook files… as best as i can, read with low expectations and you might leave happy.

*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:

Click to see larger

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…

Click for larger image

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.

Click for larger image

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:

Click for larger Image

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