There are several Drupal 7 modules that provide functionality for creating social media sharing buttons for your site’s content. Recently, however, we had a project that had very specific requirements regarding the behavior of these buttons. Also, many of the prepackaged solutions communicate with a third-party service which keeps track of share counts. We wanted to query the providers’ APIs directly in order to provide more accurate metrics regarding how many times a URL has been shared. We found that it would likely be easier to create a custom module from scratch. I’ll walk you through a brief overview of our implementation for using social network APIs to create simple “share this content” buttons with counters.

We wanted to integrate our application with three external sharing services: Facebook, Twitter and LinkedIn. Here are some examples of fetching the share count of a url on each service using JQuery:

var url = ‘http://url.to.my.content’;
// Twitter
$.getJSON('//cdn.api.twitter.com/1/urls/count.json?url=' + url + '&callback=?', function (data) {
 
 console.log(data.count);
}
// LinkedIn
 
$.getJSON('//www.linkedin.com/countserv/count/share?url=' + url + '&callback=?', function (data) {
 
 console.log(data.count);
}
// Facebook
 
$.getJSON('//graph.facebook.com/?id=' + url, function (data) {
 
 console.log(data.shares);
}

Given this simple interface for grabbing data, I just needed to run these requests for each of the buttons on a given page. I added the URL as a data element to each button and used JQuery to iterate over the button elements and make separate requests for each. This would probably perform badly if we had more than 5-10 sets of buttons on each page, but in our case, we would only ever have a maximum of 6 sets of buttons.

Now that my buttons were displaying the number of shares, I just needed to add functionality so that the buttons opened sharing dialogs on each of the individual services. There are many approaches you can take here – I chose to go with simple links for each service. This approach is supported by each of the services listed, however, it required some digging to find the documentation for each, as the majority of the docs for each service assumes you will be using a Javascript API for sharing. In my Drupal module, I wrote a function that formatted each button including a link to the share functionality on the service. Here’s a snippet from that function:

switch ($service) {
 
 case 'linkedin':
 
   $link = variable_get('fastly_sharebuttons_linkedin_url').
 
             urlencode($path) . '&title=' . urlencode($title);
 
   break;
 
 case 'facebook':
 
   $link = variable_get('fastly_sharebuttons_facebook_url').
 
             urlencode($path);
 
   break;
 
 case 'twitter':
 
   $link = variable_get('fastly_sharebuttons_twitter_url').
 
             urlencode($title . ' ' . $path);
 
   break;

And in my module’s implementation of hook_install, I defined those variables:

variable_set('fastly_sharebuttons_linkedin_url', 'https://www.linkedin.com/shareArticle?mini=true&url=');
 
variable_set('fastly_sharebuttons_facebook_url', 'https://www.facebook.com/sharer/sharer.php?u=');
 
variable_set('fastly_sharebuttons_twitter_url', 'https://twitter.com/home?status=');

Lastly, I created a template that contained all three buttons, counters for each button, and the links I generated above. That’s it! Hopefully this is useful for someone looking to build out very simple social media share buttons with counters. Good luck and happy sharing!