Building a Facebook Like Box WordPress Widget

• 3 minutes READ

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.

No-Code Email Template Builder

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 Templates

Below 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]

&lt;strong&gt;Note:&lt;/strong&gt; all subsequent methods created in this tutorial will go into the above PHP class unless otherwise stated.

Using the &lt;code&gt;__construct()&lt;/code&gt; 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 in WordPress Dashboard

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.

Facebook Widget Setup

The codes in form() method or function below will create the widget option form.

Low-Code Website Builders

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 Products
public 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.

The Facebook Like Widget in Action

Wrap Up


If you have any questions, contributions or suggestions for code improvement, let us know in the comments.

Agbonghama Collins

Agbonghama Collins is a web developer by day and a freelance writer/blogger by night.

Posts by Agbonghama Collins
🍪

We use cookies to ensure that we give you the best experience on our website. Privacy Statement.

  • I disagree
  • I agree