A Wordpress widget for a Facebook like box

widget-fb-like.php

<?php
class FB_Like_Widget extends WP_Widget {

    private static $scripts_added;

    public function __construct() {
        parent::__construct(
            'fb-like-box-widget', // ID
            'Facebook Widget ', // Name
            array(
                'description' => 'Updated Facebook Like box',
                'classname' => 'fb-like-box-widget'
             )
        );
    }

    public function widget( $args, $instance ) {
        extract( $args );

        // If Facebook Javascript has been added elsewhere return true for this filter
        $scripts_added = apply_filters( 'nh_facebook_widget_scripts_added', self::$scripts_added );
        if(is_null($scripts_added)):
            self::$scripts_added = true;
            add_action('wp_footer', array(__CLASS__, 'footer_scripts'));
        endif;

        $defaults = array(
            'url'          => false,
            'width'        => 300,
            'height'       => 490,
            'color_scheme' => 'light',
            'show_faces'   => false,
            'show_stream'  => false,
            'show_header'  => false,
            'show_border'  => false
        );
        extract( wp_parse_args( $instance, $defaults ));

        if(empty(esc_url($url))) return;

        echo $before_widget;

        echo sprintf('<div class="fb-like-box" data-href="%s" data-width="%d" data-height="%d" data-colorscheme="%s" data-show-faces="%s" data-header="%s" data-stream="%s" data-show-border="%s"></div>',
            esc_url($url),
            intval($width),
            intval($height),
            ($color_scheme === 'dark' ? 'dark' : 'light'),
            ($show_faces == true ? 'true' : 'false'),
            ($show_header == true ? 'true' : 'false'),
            ($show_stream == true ? 'true' : 'false'),
            ($show_border == true ? 'true' : 'false')
        );
        echo $after_widget;
    }

    public function form( $instance ) {
         $defaults = array(
            'url'          => false,
            'width'        => 300,
            'height'       => 490,
            'color_scheme' => 'light',
            'show_faces'   => false,
            'show_stream'  => false,
            'show_header'  => false,
            'show_border'  => false
        );
        extract( wp_parse_args( $instance, $defaults ) );
        ?>
        <p>
            <label for="<?php echo $this->get_field_name( 'url' ); ?>"><?php _e( 'Facebook URL:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'url' ); ?>" name="<?php echo $this->get_field_name( 'url' ); ?>" type="text" value="<?php echo esc_url($url); ?>" />
            <br/><em class="description">ex: http://www.facebook.com/401creative</em>
        </p>
        <p>
            <label for="<?php echo $this->get_field_name( 'width' ); ?>"><?php _e( 'Width:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'width' ); ?>" name="<?php echo $this->get_field_name( 'width' ); ?>" type="text" value="<?php echo intval($width); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_name( 'height' ); ?>"><?php _e( 'Height:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'height' ); ?>" name="<?php echo $this->get_field_name( 'height' ); ?>" type="text" value="<?php echo intval($height); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_name( 'color_scheme' ); ?>"><?php _e( 'Color Scheme:' ); ?></label>
            <select class="widefat" id="<?php echo $this->get_field_id( 'color_scheme' ); ?>" name="<?php echo $this->get_field_name( 'color_scheme' ); ?>">
                <option value="light" <?php selected($color_scheme, 'light'); ?>>Light</option>
                <option value="dark" <?php selected($color_scheme, 'dark'); ?>>Dark</option>
            </select>
            <br/>
        </p>
        <p>
            <label style="display:inline-block; width:90px" for="<?php echo $this->get_field_name( 'show_faces' ); ?>"><?php _e( 'Show Faces?' ); ?></label>
            <label><input type="radio" name="<?php echo $this->get_field_name( 'show_faces' ); ?>" value="false" <?php checked($show_faces, false); ?> /> No</label>&nbsp;&nbsp;
            <label><input type="radio" name="<?php echo $this->get_field_name( 'show_faces' ); ?>" value="true" <?php checked($show_faces, true); ?> /> Yes</label>
        </p>
        <p>
            <label style="display:inline-block; width:90px" for="<?php echo $this->get_field_name( 'show_stream' ); ?>"><?php _e( 'Show Stream?' ); ?></label>
            <label><input type="radio" name="<?php echo $this->get_field_name( 'show_stream' ); ?>" value="false" <?php checked($show_stream, false); ?> /> No</label>&nbsp;&nbsp;&nbsp;
            <label><input type="radio" name="<?php echo $this->get_field_name( 'show_stream' ); ?>" value="true" <?php checked($show_stream, true); ?> /> Yes</label>
        </p>
        <p>
            <label style="display:inline-block; width:90px" for="<?php echo $this->get_field_name( 'show_header' ); ?>"><?php _e( 'Show Header?' ); ?></label>
            <label><input type="radio" name="<?php echo $this->get_field_name( 'show_header' ); ?>" value="false" <?php checked($show_header, false); ?> /> No</label>&nbsp;&nbsp;&nbsp;
            <label><input type="radio" name="<?php echo $this->get_field_name( 'show_header' ); ?>" value="true" <?php checked($show_header, true); ?> /> Yes</label>
        </p>
        <p>
            <label style="display:inline-block; width:90px" for="<?php echo $this->get_field_name( 'show_border' ); ?>"><?php _e( 'Show Border?' ); ?></label>
            <label><input type="radio" name="<?php echo $this->get_field_name( 'show_border' ); ?>" value="false" <?php checked($show_border, false); ?> /> No</label>&nbsp;&nbsp;&nbsp;
            <label><input type="radio" name="<?php echo $this->get_field_name( 'show_border' ); ?>" value="true" <?php checked($show_border, true); ?> /> Yes</label>
        </p>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance = $old_instance;
        $instance['url'] = esc_url_raw($new_instance['url']);
        $instance['width'] = intval($new_instance['width']);
        $instance['height'] = intval($new_instance['height']);
        $instance['color_scheme'] = $new_instance['color_scheme'] === 'dark' ? 'dark' : 'light';
        $instance['show_faces'] = $new_instance['show_faces'] === 'true' ? true : false;
        $instance['show_stream'] = $new_instance['show_stream'] === 'true' ? true : false;
        $instance['show_header'] = $new_instance['show_header'] === 'true' ? true : false;
        $instance['show_border'] = $new_instance['show_border'] === 'true' ? true : false;
        return $instance;
    }
    static public function footer_scripts() {
        ?>
        <div id="fb-root"></div>
        <script>
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        jQuery(function($) {
            $(window).on("load reseizeend", function(){
                $('.fb-like-box-widget').each(function() {
                    var w = $(this).width();
                    $(this).find('.fb-like-box').attr('data-width', w);
                    FB.XFBML.parse();
                });
            });
            var doit;
            $(window).resize(function(){
              clearTimeout(doit);
              doit = setTimeout(function() { $(window).trigger('reseizeend'); }, 300);
            });
        });
        </script>
        <?php
    }

    static public function register() {
        register_widget(__CLASS__);
    }

}
add_action("widgets_init", array('FB_Like_Widget', 'register'));