clearspring - the widget network.

Adding Clearspring enabled widgets to a Facebook Fan Page takes a few steps.  This document describes the process of adding a widget to your Fan Page.

1. Log into Facebook and access the Fan Page you want to add a widget
2. Click the “Edit Page” link to the right of the Fan Page image.  Note that you need to be an Admin of the Fan Page to add a widget.
3. On the “Edit” page scroll down to the bottom of the “Applications” section to the “More Applications (Browser More)” link and click the link.
4. On the “Application Directory” page type “Static fbml” into the search box and press enter.

   

5. The result page will include the “Static FBML” application.
   

   

   
   If this application has not been added to you page before, click on the “Static FBML” link.
6. On the “Static FBML” application page you will need to click the “Add to Page” button to add this application to you Fan Page.
7. Once you click the “Add to Page” button you will be presented with an option to pick the Fan Page you want to add “Static FBML”.  Note, be sure to select the Fan Page you want this application added to and not any of your application pages, which you may have.
8. Once you click the “Add Static FML” you will return to the Fan Page where the application was added.
9. Again, click the “Edit Page” link to the right of the Fan Page image.  On the “Edit” page scroll down to the “Applications” section where you will now see the “Static FBML” application listed.
10. Now we need to edit the application to insert the widget code.  Click the “(Edit)” link next to “Static FBML” to insert your code.
11. On the “Edit FBML” page you will need to provide the “Box Title”.  This should be the widget name.

    

12. In the “FBML” section you will need to add the FBML code that represents you widget.  Use the following working example as a template for your widget:
    

    <fb:swf swfbgcolor="000000" quality="high" imgstyle="border-width:0px; 
     border-color:white;" swfsrc='http://widgets.clearspring.com/o/47753faa9fc663ee' 
     imgsrc='http://img.clearspring.com/images/47753faa9fc663ee/img304x304.png' 
     width='304' height='304' />

    The code above uses the Facebook fb:swf syntax, which you can reference here
    
    If you use the above code exactly as described you will add the Clearspring “Hello World” widget to your page.  To modify the above code for your widget you will need to do the following:
    
    1. Update the widget id (WID) of the value of swfsrc (the location of your widget).  Simply replace the “Hello World” WID, 47753faa9fc663ee, with your widget’s WID.  You can find the WID for your widget in the Widget Console.
    2. Again, replace the “Hello World” WID, 47753faa9fc663ee, of the value of imgsrc (the location of the “Click to Activate” image displayed before the widget is loaded) with your widget’s WID.
    3. Also on the imgsrc value you will want to update the width and height of the image to display with the appropriate width and height of your widget.
    4. Finally, you will need to update the widget and height value to those of your widget.
13. Once you have added the title and code click the “Save Changes” button.  The widget will be added to you Fan Page.
14. If you want to add another widget to your Fan Page you simply need to click the “Add another FBML box” at the bottom of the “Edit FBML” page we just completed.  Once the new box is added below it will be listed below the name of the widget you just added.  Click the “edit” link to add the code for the next widget.

    

15. Good luck!