Fun with HTML5 Canvas and FaceBook API

29. Oct, 2010 7 Comments

Couple of days back I am experimenting Facebook API and the HTML 5 canvas. And It happens that I stumble this brilliant example by Mr. Doobs’ HTML5 canvas experiment.

I implemented same idea and logic the only difference here is it is integrated to Facebook and I made it as a plugin to jQuery.

Here is the final output of this article. You need to login in you Facebook account to see it in action.

View Demo

First you need to Download Facebook’s PHP Library in Github

Extract this archive into a directory on your hosting server where you can host and run PHP code:


$ curl -L http://github.com/facebook/php-sdk/tarball/master | tar xvz
$ mv facebook-php-sdk-* facebook-php-sdk
$ cp facebook-php-sdk/examples/example.php index.php

Replace the IDs in index.php to have your own app information

It should look like this when you’re done:


<?php
// Awesome Facebook Application
//
// Name: Insic Experiment
// 

require_once 'facebook-php-sdk/src/facebook.php';

// Create our Application instance.
$facebook = new Facebook(array(
  'appId'  => '12345678901234', // this must be replaced by you appID
  'secret' => 'dw3234ferf32we2435', // replace this with your app Secret
  'cookie' => true,
));

$session = $facebook->getSession();

$me = null;
// Session based API call.
if ($session) {
  try {
    $uid = $facebook->getUser();
    $me = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
  }
}

// login or logout url will be needed depending on current user state.
if ($me) {
  $logoutUrl = $facebook->getLogoutUrl();
} else {
  $loginUrl = $facebook->getLoginUrl();
}

// This call will always work since we are fetching public data.
$insic = $facebook->api('/1038291154');

Add the Facebook Javascript SDK you to access all of the features of the Graph API via JavaScript.

In case of this example the code looks like the following:

    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId   : '<?php echo $facebook->getAppId(); ?>',
          session : <?php echo json_encode($session); ?>,
          status  : true,
          cookie  : true,
          xfbml   : true
        });

        FB.Event.subscribe('auth.login', function() {
          window.location.reload();
        });
      };

      (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());

    </script>

Add the required jQuery library and the plugin. Add the following line of code in the bottom part of your html before the closing of the body tag

    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.fbcanvas.js" type="text/javascript"></script>

    <script>
       $(document).ready(function () {
           if($('#canvas').length){
                $('#canvas').fbcanvas({
                    'bgImage' : "https://graph.facebook.com/<?php echo $uid; ?>/picture?type=large"
                });
            }
       });
    </script>

In the above code we have assigned our variable bgImage the profile picture of the authenticated user.

The jQuery Plugin

(function ($) {
    $.fn.fbcanvas = function (options) {
        var settings = {
            'width': window.innerWidth,
            'height': window.innerWidth,
            'backgroundColor': '#fff',
            'bgImage': ''
        };

        if (options) {
            $.extend(settings, options);
        }

        //run a check if the current client supports canvas.
        var supports_canvas = function () {
            var iscompat = false;
            try {
                this.iscompat = !!(document.createElement('canvas').getContext('2d'));
            } catch (e) {
                this.iscompat = !!(document.createElement('canvas').getContext);
            }
            return this.iscompat;
        }

        if (supports_canvas() == true) {
            var canvasElem = $('<canvas>').attr({
                'width': settings.width.toString(),
                'height': settings.height.toString()
            }).css({
                'display' : 'block',
                'cursor': 'pointer'
            });

            $(this).append(canvasElem);
            var context = $('canvas')[0].getContext('2d');
            var imgMidw, imgMidh;

            var img = new Image();

            img.addEventListener ('load', function(){

                imgMidw = Math.floor( this.width / 2 );
                imgMidh = Math.floor( this.height / 2 );

                document.addEventListener( 'mousemove', onMouseEvent, false );

            }, false);

            function onMouseEvent(e) {
		context.drawImage( img, e.clientX - imgMidw, e.clientY - imgMidh );
            }

            img.src = settings.bgImage.toString();
        }
        else {
            $(this).css({
                'width': settings.width.toString(),
                'height': settings.height.toString(),
                'color': '#ff0000',
                'background-color': '#fff',
                'font-weight': 'bold'
            });
            var errorMsg = '<p style=\"text-align:center;\">Damn! your browser is too old dude! This app Requires HTML 5 Enabled Web Browser.<br /><br /> Have you heard Google Chrome?</p>';
            $(this).html(errorMsg);
        }
    };
})(jQuery);

View Application in action Demo