3 minutes

How to Display Social Share Counts in WordPress as Text

6 Comments

In the first part of this series, I showed you how to programmatically retrieve the share count of various social media networks from their respective APIs using PHP.

In this final part, we will develop a WordPress plugin that displays the number of Facebook likes, Twitter posts, and social share count of a specific URL.

StrictThemes

To display the share count of a social network in a WordPress post or page, embed the shortcode of the social network as defined by the plugin. Let’s get started with the plugin development.

Plugin Development

First, create a folder where all of the plugin files will be stored. Let’s name it designmodo-social-count.

Include the plugin header in the plugin PHP file. Without the header, WordPress will not recognize the plugin.

<?php

/*
Plugin Name: Designmodo Social Media Count
Plugin URI: https://designmodo.com
Description: Display social media count.
Version: 1.0
Author: Agbonghama Collins
Author URI: http://w3guy.com
*/

Create the PHP class and initialize the required methods at the magic __construct.

class Designmodo_Social_Count {

	function __construct() {

		add_shortcode( 'facebook-share', array( $this, 'facebook_share' ) );

		add_shortcode( 'facebook-page-like', array( $this, 'facebook_page_like' ) );

		add_shortcode( 'pinterest-count', array( $this, 'pinterest_count' ) );

		add_shortcode( 'tweet-count', array( $this, 'tweet_count' ) );

		add_shortcode( 'google-plus', array( $this, 'google_plus_count' ) );

		add_shortcode( 'linkedin-share', array( $this, 'linkedin_share' ) );

		add_shortcode( 'stumbledupon', array( $this, 'stumbledupon_share' ) );
	}

In the code above, we defined the shortcode (first function argument) for the various social networks and their respective callback function (second function argument) via the add_shortcode function.

Before we start writing code for the various shortcode callback functions, we’ll create two helper class methods that accept an API call as its parameter and return the JSON output back to the callback function for processing.

Below are the two helper functions: get_response_body and post_response_body

	function get_response_body( $url, $type = '' ) {

		$response = wp_remote_get( $url );
		$body     = wp_remote_retrieve_body( $response );

		// if api call is pinterest, make the response pure json
		if ( $type == 'pinterest' ) {
			$body = preg_replace( '/^receiveCount\((.*)\)$/', '\\1', $body );
		}

		return json_decode( $body );
	}
	function post_response_body( $url ) {

		$query = '
		[{
		    "method": "pos.plusones.get",
		    "id": "p",
		    "params": {"nolog": true, "id": "' . $url . '", "source": "widget", "userId": "@viewer", "groupId": "@self"},
		    "jsonrpc": "2.0",
		    "key": "p",
		    "apiVersion": "v1"
		}]
		';

		$response = wp_remote_post(
			'https://clients6.google.com/rpc',
			array(
				'headers' => array( 'Content-type' => 'application/json' ),
				'body'    => $query
			)
		);

		return json_decode( wp_remote_retrieve_body( $response ), true );
	}

The initial will handle GET request for the entire social network we are majoring except that of Google+ (a POST request), which will be handled by the latter.

When the shortcode for Facebook likes and share count is active [facebook-share url="http://xyz.com"], the callback function facebook_share is called.

function facebook_share( $atts ) {
		$url      = $atts['url'];
		$api_call = 'http://graph.facebook.com/?id=' . $url;

		return $this->get_response_body( $api_call )->shares . ' Facebook Likes & Shares';

	}

The facebook_page_like() below is the callback function for the Facebook page like shortcode.

function facebook_page_like( $atts ) {
		$username = $atts['username'];
		$api_call = 'http://graph.facebook.com/?id=http://facebook.com/' . $username;

		return $this->get_response_body( $api_call )->likes . ' Facebook Page Like';
	}

The function pinterest_count is the callback function for the Pinterest share shortcode.

function pinterest_count( $atts ) {

		$url      = $atts['url'];
		$api_call = 'http://api.pinterest.com/v1/urls/count.json?callback%20&url=' . $url;

		return $this->get_response_body( $api_call, 'pinterest' )->count . ' Pinterest Pins';
	}

When the shortcode for the Twitter tweet count is active, tweet_count callback function is called.

function tweet_count( $atts ) {

		$url      = $atts['url'];
		$api_call = 'https://cdn.api.twitter.com/1/urls/count.json?url=' . $url;

		return $this->get_response_body( $api_call )->count . ' Tweets';

	}

The callback function for LinkedIn share is linkedin_share.

function linkedin_share( $atts ) {
		$url      = $atts['url'];
		$api_call = 'https://www.linkedin.com/countserv/count/share?url=' . $url . '&format=json';
		$count    = $this->get_response_body( $api_call )->count;

		return $count . ' LinkedIn Shares';
	}

stumbledupon_share is the callback function for StumbleUpon.

function stumbledupon_share( $atts ) {
		$url      = $atts['url'];
		$api_call = 'https://www.stumbleupon.com/services/1.01/badge.getinfo?url=' . $url;
		$count    = $this->get_response_body( $api_call )->result->views;

		return $count . ' Stumbles';
	}

google_plus_count() is the callback function for the Google+ shortcode.

function google_plus_count( $atts ) {
		$url   = $atts['url'];
		$count = $this->post_response_body( $url )[0]['result']['metadata']['globalCounts']['count'];

		return $count . ' Google Plus';
	}

Below is the singleton method that will instantiate the class to make it active.

static function get_instance() {
		static $instance = false;

		if ( ! $instance ) {
			$instance = new self;
		}

	}

Finally, we will make a call to the singleton method get_instance() to instantiate the class.

Designmodo_Social_Count::get_instance();

Voila! We are done coding our social share count plugin.

How to Use the Plugin

Using the URL https://designmodo.com/ as our example:

To get the number of Facebook likes and shares for the URL, use the shortcode [facebook-share url="https://designmodo.com/"]

Pinterest share count [pinterest-count url="https://designmodo.com/"]

Tweet count [tweet-count url="https://designmodo.com/"]

Google PlusOnes [google-plus url="https://designmodo.com"]

LinkedIn shares [linkedin-share url="https://designmodo.com"]

StumbleUpon stumbles [stumbledupon url="https://designmodo.com/"]

To display the number of likes a Facebook page has, use this shortcode [facebook-page-like username="designmodo"] where designmodo is the page’s username.

Designmodo Social Share Shortcodes

Say you added all the shortcodes above in a WordPress post or page, you will see the social share count display as depicted in the image below.

Social share count in Action

Conclusion

To further understand how the plugin was built and how you can implement it in your WordPress site, download the plugin. Have a question, contribution or suggestion 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. When not wrangling with code, he is fond of sleeping on the couch and writing on his personal blog. Follow me on Google+ and Twitter

Posts by Agbonghama Collins

Super-Intuitive Drag & Drop Template Generator

Create beautiful responsive emails and newsletters easily.

Learn more Try Free
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree