1. Code
  2. WordPress

Building a Social Profile Widget to Display Your Follower Count

Read Time:7 minsLanguages:

In the first part of this series, we looked at how to  to programmatically retrieve the count of a Facebook page's Likes, and Twitter and Google+ followers. By the end, we had created three PHP helper functions to simplify the social count retrieval.

These functions accept as its argument, a Facebook page username, Twitter username and Google+ username or ID respectively and in-turn return the Like or follower count.

In this final part of the series, we will develop a social profile widget that link to a Facebook page, Twitter and Google+ profile. The widget will also display the count of Facebook page likes as well as Twitter and Google+ followers count.

Below is a screenshot of the widget to be built at the end of this tutorial.

Coding the Widget

Like with all WordPress plugins, the file header containing meta information (such as Name, Version, Author, and so on) regarding the plugin should be at the beginning of the plugin file.

Below is our widget plugin header.

To create a WordPress widget, the standard WP_Widget class needs to be extended and the required methods included in the child class. Finally, the widget child class is registered and hooked to WordPress.

Create the child class extending the WP_Widget parent class.

Give the widget a name and description using the __construct() method.

At this point, it's time to take advantage of the helper functions we created in the last post so that we can display the Likes and Followers from Facebook, Twitter, and Google+.

In the twitter_count() method above, the Twitter application OAuth access token, access token secret, consumer key and consumer secret are all hard-coded to the method.

You will have to change them to your Twitter application's OAuth credentials.
Same goes for the Google Plus API Key in googleplus_count() method.

The widget settings options will consist of five form fields that contain the title of the widget, Facebook, Twitter, and Google+ usernames as depicted in the image below.

The form() method below create the Widget form.

When values are entered into the form field, they need to be saved to the database. The update() method sanitizes form values by stripping out malicious data and saves the sanitized values to the database.

Next is the widget() method that displays links to social network profiles together with the Likes and followers count at the front-end of WordPress.

We are done including the necessary methods and codes to the class so all that's left for us to do is to include the closing class brace.

The widget class Tutsplus_Social_Profile need to be registered using the WordPress register_widget function, and then hooked to widgets_init Action.
Without doing this, the widget won't be recognizable by WordPress.

To give the widget a nice look, below is the CSS of the widget which also include the imported Font Awesome icons stylesheet file.

Save the CSS file with name tutsplus-social-profile-widget.css which must reside in the plugin root folder.

Finally, we need to enqueue the CSS file to WordPress:

Hurray - we've have finished coding our Social Profile Widget

Suggested Improvements

In the widget class, the Twitter OAuth credentials and the Google+ API key were hard-coded to the class. When developing a plugin of this nature, a settings page which will contain a form that will save the OAuth and API keys to WordPress database should be in-place which are then retrieved and use by the class.

The widget form lacks a client-side validation mechanism which come in handy to ensure the appropriate form values are entered. Read my article on Client-Side Form Validation with HTML5 to learn how the validation can be done.

The widget only feature Facebook, Twitter and Google+. You are at liberty to extend the widget class and include other social networks.

At the top-right corner of this page is a link to download the Widget plugin file. Go ahead and use in your WordPress site and also sturdy the code to fully comprehend how it works.

Any and all feedback and questions are welcome in the comments section!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.