WordPress plugin to add responsive Facebook Like Box widget.

fb_feed.php

<?php
/*
  Plugin Name: Responsive Facebook Like Box
  Plugin URI: http://glamanate.com
  Description: Adds a Facebook Like Box widget which is responsive
  Author: Matt Glaman
  Version: 0.1-alpha
  Author URI: http://glamanate.com
 */

add_action( 'widgets_init', create_function( '', 'return register_widget( "FB_Feed" );' ) );

class FB_Feed extends WP_Widget {

  public function __construct() {
    parent::__construct(
      'fb_feed',
      'Responsive Facebook Like Box',
      array('description' => __('Adds a responsive Facebook Like Box.', 'text_domain')
    )
    );
    // widget actual processes
  }

  public function form( $instance ) {
    $defaults = array(
      'page_url' => 'https://www.facebook.com/FacebookDevelopers',
      'height' => '',
      'show_faces' => 0,
      'show_stream' =>0,
      'show_header' => 0,
      'show_border' => 0,
      'color_scheme' => 'light',
      );
    $instance = wp_parse_args($instance, $defaults);
    ?>
    <p>
      <label for="<?php print $this->get_field_id('page_url'); ?>">Facebook Page URL</label>
      <input type="text" id="<?php $this->get_field_id('page_url'); ?>" name="<?php print $this->get_field_name('page_url'); ?>" value="<?php print esc_attr($instance['page_url']); ?>" class="widefat"/>
    </p>
    <p>
      <label for="<?php print $this->get_field_id('height'); ?>">Height (px)</label>
      <input type="text" id="<?php $this->get_field_id('height'); ?>" name="<?php print $this->get_field_name('height'); ?>" value="<?php print esc_attr($instance['height']); ?>" size="7"/>
    </p>
    <p>
      <label for="<?php print $this->get_field_id('show_faces'); ?>">
        <input type="checkbox" id="<?php print $this->get_field_id('show_faces'); ?>" name="<?php print $this->get_field_name('show_faces') ?>" <?php checked(1, $instance['show_faces']); ?>/>
        Show Faces</label>
    </p>
    <p>
      <label for="<?php print $this->get_field_id('show_stream'); ?>">
        <input type="checkbox" id="<?php print $this->get_field_id('show_stream'); ?>" name="<?php print $this->get_field_name('show_stream') ?>" <?php checked(1, $instance['show_stream']); ?>/>
        Show  Stream</label>
    </p>
    <p>
      <label for="<?php print $this->get_field_id('show_header'); ?>">
        <input type="checkbox" id="<?php print $this->get_field_id('show_header'); ?>" name="<?php print $this->get_field_name('show_header') ?>" <?php checked(1, $instance['show_header']); ?>/>
        Show  Header</label>
    </p>
    <p>
      <label for="<?php print $this->get_field_id('show_border'); ?>">
        <input type="checkbox" id="<?php print $this->get_field_id('show_border'); ?>" name="<?php print $this->get_field_name('show_border') ?>" <?php checked(1, $instance['show_border']); ?>/>
        Show Border</label>
    </p>
    <p>
      <label for="<?php print $this->get_field_id('color_scheme'); ?>">Color Scheme</label>
      <select id="<?php print $this->get_field_id('color_scheme') ?>" name="<?php print $this->get_field_name('color_scheme'); ?>">
        <option value="light" <?php selected('light', $instance['color_scheme']); ?>>Light</option>
        <option value="dark" <?php selected('dark', $instance['color_scheme']); ?>>Dark</option>
      </select>
    </p>
    <?php
  }

  public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['page_url'] = esc_attr($new_instance['page_url']);
    $instance['height'] = (is_numeric($new_instance['height'])) ? $new_instance['height']: '';
    $instance['show_faces'] = $new_instance['show_faces'];
    $instance['show_stream'] = $new_instance['show_stream'];
    $instance['show_header'] = $new_instance['show_header'];
    $instance['show_border'] = $new_instance['show_border'];
    $instance['color_scheme'] = $new_instance['color_scheme'];
    return $instance;
  }

  public function widget( $args, $instance ) {
      extract($args);
    $defaults = array(
      'page_url' => 'https://www.facebook.com/FacebookDevelopers',
      'height' => '',
      'show_faces' => 'false',
      'show_stream' =>'false',
      'show_header' => 'false',
      'show_border' => 'false',
      'color_scheme' => 'light',
      );
    $instance = wp_parse_args($instance, $defaults);
      echo $before_widget; ?>

<div id="fb-root"></div>
<script>
//Responsive Facebook Like Box inspired by - https://gist.github.com/dineshcooper/2111366
//Facebook
(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&appId=474010699349290";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//Responsive crafty ness
jQuery(window).bind("load resize", function(){
  var container_width = jQuery('#fb-feed-container').width();
  var pageURL = '<?php print $instance['page_url']; ?>';
  var boxHeight = '<?php print $instance['height']; ?>';
  var showFaces = '<?php print ($instance['show_faces'] == 0) ? 'false' : $instance['show_faces']; ?>';
  var showStream = '<?php print ($instance['show_stream'] == 0) ? 'false' : $instance['show_stream']; ?>';
  var showHeader = '<?php print ($instance['show_header'] == 0) ? 'false' : $instance['show_header']; ?>';
  var showBorder = '<?php print ($instance['show_border'] == 0) ? 'false' : $instance['show_border']; ?>';
  var colorScheme = '<?php print $instance['color_scheme']; ?>';
  jQUery('#fb-feed-container').html('<div class="fb-like-box" ' +
  'data-href="'+ pageURL +'"' +
  ' data-width="' + container_width +'" '+ boxHeight +' data-show-faces="'+ showFaces +'" data-stream="'+ showStream +'" data-header="'+ showHeader +
  '" data-colorscheme="'+ colorScheme +'" data-show-border="'+ showBorder +'""></div>');
  FB.XFBML.parse( );
});
</script>
<div id="fb-feed-container"></div>

      <?php echo $after_widget;
  }

}

?>