Building a Facebook Like Box WordPress Widget
WordPress arguably has become the de facto content management system (CMS) in the world powering over 20 percent of websites globally. One of the platform’s most loved feature is widgets that seamlessly add content and features to sidebars.
Widgets were originally designed to provide a simple and easy-to-use way of giving design and structure control of WordPress themes to users, which is available on properly “widgetized” themes to include the header, footer, and elsewhere in the design and structure.
Widgets require no code experience or expertise. They can be added, removed and rearranged in the WordPress Administration Appearance > Widgets panel.
What about a Facebook Like Box?
In this tutorial, we will code a WordPress widget plugin that displays a Like Box.
Facebook Like Box Widget Development
Since the widget is going to be a plugin and not bundled with a theme, the plugin header (information about the plugin for use by WordPress internal) would be the first thing to go into the plugin PHP file.
With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
Free Email BuilderFree Email TemplatesBelow is our Widget plugin header:
<?php /* Plugin Name: Designmodo Facebook Like Box Plugin URI: https://designmodo.com Description: Facebook Like Box Widget that just work Version: 1.0 Author: Agbonghama Collins Author URI: https://w3guy.com */
Creating widgets for WordPress is easy — extend the standard WP_Widget
class, include the required methods and finally register the widget.
We will go over the above widget development stages as we build our beloved Facebook Like Box.
First, create a PHP class extending the WP_Widget
.
class Designmodo_Facebook_Like_Box extends WP_Widget { // ... } [php] <strong>Note:</strong> all subsequent methods created in this tutorial will go into the above PHP class unless otherwise stated. Using the <code>__construct()</code> magic PHP method, we will give the widget a name and description. [php] function __construct() { parent::__construct( 'designmodo_flb', // Base ID __( 'Designmodo Facebook Like Box', 'designmodo' ), // Name array( 'description' => __( 'Facebook Like Box Widget that just work', 'designmodo' ), ) // Args ); }
Widget options will consist of two input fields that will contain the widget title and Facebook-page username and three check boxes for other configurable options.
Below is a screenshot of what the widget option will look like.
The codes in form()
method or function below will create the widget option form.
With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
Try Startup App Try Slides AppOther Productspublic function form( $instance ) { if ( isset( $instance['title'] ) ) { $title = $instance['title']; } else { $title = __( 'Facebook Like Box', 'text_domain' ); } if ( isset( $instance['page_username'] ) ) { $page_username = $instance['page_username']; } if ( isset( $instance['show_friends_faces'] ) ) { $show_friends_faces = $instance['show_friends_faces']; } else { $show_friends_faces = 'on'; } if ( isset( $instance['show_Header'] ) ) { $show_Header = $instance['show_Header']; } else { $show_Header = 'on'; } if ( isset( $instance['show_border'] ) ) { $show_border = $instance['show_border']; } else { $show_border = 'on'; } ?> <p> <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>"> </p> <p> <label for="<?php echo $this->get_field_id( 'page_username' ); ?>"><?php _e( 'Facebook-page username:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'page_username' ); ?>" name="<?php echo $this->get_field_name( 'page_username' ); ?>" type="text" value="<?php echo esc_attr( $page_username ); ?>"> </p> <p> <input class="widefat" id="<?php echo $this->get_field_id( 'show_friends_faces' ); ?>" name="<?php echo $this->get_field_name( 'show_friends_faces' ); ?>" type="checkbox" value="on" <?php checked( $show_friends_faces, 'on' ); ?>> <label for="<?php echo $this->get_field_id( 'show_friends_faces' ); ?>"><?php _e( 'Show Friends\' Faces' ); ?></label> </p> <p> <input class="widefat" id="<?php echo $this->get_field_id( 'show_Header' ); ?>" name="<?php echo $this->get_field_name( 'show_Header' ); ?>" type="checkbox" value="on" <?php checked( $show_Header, 'on' ); ?>> <label for="<?php echo $this->get_field_id( 'show_Header' ); ?>"><?php _e( 'Show Header' ); ?></label> </p> <p> <input class="widefat" id="<?php echo $this->get_field_id( 'show_border' ); ?>" name="<?php echo $this->get_field_name( 'show_border' ); ?>" type="checkbox" value="on" <?php checked( $show_border, 'on' ); ?>> <label for="<?php echo $this->get_field_id( 'show_border' ); ?>"><?php _e( 'Show Border' ); ?></label> </p> <?php }
When widget form is filled out, the entered data should be saved to the database for reuse.
The update()
method sanitizes and saves form data to the database.
public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; $instance['page_username'] = ( ! empty( $new_instance['page_username'] ) ) ? strip_tags( $new_instance['page_username'] ) : ''; $instance['show_friends_faces'] = ( ! empty( $new_instance['show_friends_faces'] ) ) ? strip_tags( $new_instance['show_friends_faces'] ) : ''; $instance['show_Header'] = ( ! empty( $new_instance['show_Header'] ) ) ? strip_tags( $new_instance['show_Header'] ) : ''; $instance['show_border'] = ( ! empty( $new_instance['show_border'] ) ) ? strip_tags( $new_instance['show_border'] ) : ''; return $instance; }
So far, we’ve developed the widget settings that will receive the entered form data and also added the ability to save the data to the database.
Next is the widget()
method or function that will display the Facebook Like Box.
public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); $page_username = $instance['page_username']; $show_friends_faces = $instance['show_friends_faces']; $show_Header = $instance['show_Header']; $show_border = $instance['show_border']; echo $args['before_widget']; if ( ! empty( $title ) ) { echo $args['before_title'] . $title . $args['after_title']; } if ( empty( $page_username ) ) { echo "Facebook username is missing in Widget settings."; } else { ?> <div class="fb-like-box" data-href="https://www.facebook.com/<?php echo $page_username; ?>" data-colorscheme="light" data-show-faces="<?php echo ( $show_friends_faces == 'on' ) ? 'true' : 'false'; ?>" data-header="<?php echo ( $show_Header == 'on' ) ? 'true' : 'false'; ?>" data-show-border="<?php echo ( $show_border == 'on' ) ? 'true' : 'false'; ?>"></div> <?php } echo $args['after_widget']; }
Let me briefly explain what the code above does.
The Facebook page username and other widget options saved to the database via the widget form are retrieved and saved to their respective PHP variables. These options are then applied to the Facebook Like Box HTML5 code.
The widget class Designmodo_Facebook_Like_Box
is finally registered using the widgets_init
hook so it is recognized by WordPress.
// register the widget to WordPress function register_designmodo_facebook_like_box_widget() { register_widget( 'Designmodo_Facebook_Like_Box' ); } add_action( 'widgets_init', 'register_designmodo_facebook_like_box_widget' );
In order for the Like Box to display when the widget is activated, we need to include it JavaScript SDK to WordPress header. To achieve this, a PHP function that will contain the JavaScript SDK will be created and hooked to wp_head
.
function designmodo_facebook_javaScript_sdk() { ?> <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/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <?php } add_action( 'wp_head', 'designmodo_facebook_javaScript_sdk' );
Voila! We are done coding the Facebook Like Box widget plugin.
When the widget gets activated you would see the display as depicted in the image below.
Wrap Up
If you have any questions, contributions or suggestions for code improvement, let us know in the comments.