FSW Stand-Alone Example

This is a demo of the FSW - Facebook SDK Wrapper. It provides an alternative interface to the official Facebook Javascript SDK. Note that it is a wrapper around the SDK, not a replacement - the actual FB Object is still available to you.

Also note that I have no affiliation with Facebook - I’m an independent developer providing this wrapper in the hope of making working with the official Facebook SDK a bit less painful.

You can grab the full source on github, and full documentation here.

Below are a set of examples demonstrating basic usage of the wrapper. They complement the documentation, but don’t necessarily illustrate all the avaiable options for a given method.

I am actively developing this wrapper and welcome suggestions and contributions. Visit the project page on github and submit an issue or send me a pull request.


Example 1: Initializing FSW

            var appId = '220491094663866';
            fsw.ready(function(){
                fsw.init(appId);
            });
        

This will do the following:

Note that all calls to the FSW method must be wrapped inside of fsw.ready(function(){}); This ensures that the official Facebook JavaScript SDK has actually finished loading and is available to fsw.


Example 2: Authorization

In this example, I created a button in my markup, <button id="auth">Authorize App</button>, which will prompt a Facebook Authorization pop-up.

            fsw.auth.createBtn('fblogin', function(response){
				console.info('App Authorize respone: ');
				console.log(response);
			});
        

Example 3: Like Button

Insert a "like" button into an HTML element. The "like" button is an XFBML element that gets replaced by an iframe, making it tricky to position it directly with CSS. Instead, the wrapper requires you to provide a holding element to contain the resulting iframe.

You can also bind callbacks to the "like" button - one for onLike, and one for onUnlike.

			var likeBtn = fsw.like.createBtn(likeHolder,'http://www.philipschweiger.com/fsw/');
			
			likeBtn.bind(
				function(){
					console.log('user Liked this page');
				},
				function(){
					console.log('user unLiked this page');
				}
			);
		

Example 4: Send Button

The interface for the "send" button is nearly identical to that of the "like" button.

			var sendBtn = fsw.send.createBtn('sendHolder','http://www.philipschweiger.com/fsw/');
			sendBtn.bind(
				function(){
					console.log('user sent this page');
				}
			);
		

Example 5: Post to Stream

Post a message with an attachment to the user’s stream.

            $('#postTrigger').click(function(){

                fsw.stream.post(
                {
                    title:'FSW Demo',
                    subtitle:'Stream Post with Attachment',
                    link:'http://www.philipschweiger.com/fsw/',
                    description:'Does Facebook strike anyone else as a kind of reverse panopticon? Well regardless, I have written a little library to make developing FB apps easier - here is an example post from the demo.',
                    media:'http://www.philipschweiger.com/fsw/images/Panopticon.jgp',
                    action:'click,http://www.philipschweiger.com/fsw/'
                },
                function(response){
                   console.log('User posted to wall. Response was ');
                   consoel.log(response);
                }
                );


            });
                

Example 6: Requests

Application requests generally have both a front-end and back-end component to them. The wrapper takes care of the front-end, sending a request to a specified user.

When a user accepts a request, they are directed to your application canvas page; you will want to set up some code on that page to read the application data, delete it, and move the user on to the next stage (usually a redirect, or showing some specific content);

In this example, we are sending a request to a Test User so we don't have to worry about actually handling request acceptance.

                $('#requestTrigger').click(function(){
                    fsw.request.send({
                        message:'Check out this little library for developing Facebook Apps!',
                        data:'eg a tracking code'
                    });
                });