Custom, Scriptless, and Trackable Social Media Share Buttons

For a freelance project I am currently working on, the client wanted more advanced insight into where their traffic was coming from and, more specifically, if people were arriving from links shared via the social media share buttons on the website.

To do this, I created some custom social media share buttons that were lightweight, scriptless, and included tracking information for google analytics.

These were the final buttons -

• Share on Facebook
• Share on Twitter
• Share on Google Plus
• [Share on LinkedIn](https://www.linkedin.com/shareArticle ?mini=true%26title%26source=bitsofcode%26url=https://bitsofco.de?utm_source=googleplus%26utm_medium=social%26utm_campaign=share_buttons)
• Share on Pinterest
• Share via Email
• Share on Whatsapp

You can view the source code for this on my github and use it in your own project.

Scriptless Social Media Buttons #

A typical way of adding social media share buttons to a site would include loading third-party scripts from each of the social media websites. However, most of these sites also provide a scriptless alternative in the form of a special “sharer” URL.

With this alternative, all we do is direct users to a specific url, adding the parameters we want to be shared, such as the page title and link. For example, a twitter share url for this blog could look like this -

<a href="https://twitter.com/intent/tweet/?text=Reading%20the%20bitsofcode%20blog&url=https://bitsofco.de&via=ireaderinokun">Share on Twitter</a>

When clicked, it will generate this tweet -

The base url and parameters we can add differ depending on the social media site. For example, with Facebook you can only pass the url you want to share, whereas with Twitter you can pass a lot more information such as hastags and related users.

Here are the parameters we can add for some popular social media sites (and email).

Platform	Base Share URL	Parameters
Facebook	https://www.facebook.com/sharer/sharer.php?	u - url
Twitter	https://twitter.com/intent/tweet/?	url``text``hashtags - a comma-separated list (no spaces)via - a twitter usernamerelated - suggested related twitter usernamesin-reply-to - Tweet ID of tweet to reply to
Google Plus	https://plus.google.com/share?	url
LinkedIn	https://www.linkedin.com/shareArticle?	mini=true - required parameterurl``title``summary``source - your website or app name
Pinterest	https://www.pinterest.com/pin/create/button/?	url``media - image attachmentsdescription``hashtags
Whatsapp	whatsapp://send?	text
Email	mailto:?	subject``body

Working With Dynamic Content #

In most cases, we want the shared content to change depending on what page the user is currently on. For the project I was working on, it was a wordpress blog, and so the url and any text should be different depending on the blog post being shared.

To do this, instead of writing out the URL and title, we instead add a marker for the dynamic content. For example, the twitter URL could instead look like this -

<a href=“https://twitter.com/intent/tweet/?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>”>
  Share on Twitter
</a>

URL Encoding #

URLs can only be sent using the ASCII character set. This means that certain special characters, such as spaces, hastags and exclamation marks, need to be converted ("encoded") into a valid format.

There are a number of different ways to encode a URL. If you are dealing with static, predetermined text, you can use Eric Meyer's URL Decoder/Encoder. Since this was a wordpress blog and I was using PHP, I used the native urlencode function.

<?php
  // First get the raw details
  $rawTitle = get_the_title();
  $rawPermalink = get_the_permalink();

  // Get clean details
  $cleanTitle = urlencode($rawTitle);
  $cleanPermalink = urlencode($rawPrmalink);
?>

<a href=“https://twitter.com/intent/tweet/?text=<?php echo $cleanTitle; ?>&url=<?php echo $cleanPermalink; ?>”>
  Share on Twitter
</a>

Adding Events Tracking #

Once we have the share buttons, we can start adding analytics tracking. After installing the Google Analytics tracking code, the first thing we want to do is track how many people are clicking on the share buttons.

To do this, we want to send an instance of the event when a user clicks the button. We acheive this using the Google Analytics ga function with a hit type of event. For example -

$('.social-share-btns a').on('click', function() {

  /* Expanded syntax */
  ga('send', {
    'hitType': 'event', // required 
    'eventCategory': 'button', // required 
    'eventAction': 'click', // required 
    'eventLabel': 'social share buttons'
  });

  /* Shortened syntax */
  ga('send', 'event', 'button', 'click', 'social share buttons');

});

The event category is the object that the event is tied to, in this case a button. The event action is the type of interaction; in this case, the user is clicking on the button. The event label is a string we use to categorise the event.

Once data has been collected, in the Google Analytics report, the data can be found under Behaviour > Events > Overview.

Adding Custom Analytics Campaigns #

Once we know how many people are sharing the page, we can measure the effectiveness of those shares by tracking if people are arriving to the site through the links that were shared.

Campaigns are a way of categorising and tracking the acquisition of users to the site. We implement a campaign by adding special “UTM" paramters to the URL.

There are five of these parameters we can add -

Parameter	Description
utm_campaign	The name for the campaign
utm_source	The referring website, e.g. facebook
utm_medium	The category for the referrer, e.g. social, email, search
utm_content	A term to differentiate between two links that may have the same campaign, source and medium
utm_term	Used to identify paid search keywords

For this project, I only used the first three parameters.

• utm_campaign=share_buttons
• utm_source=[social media site] , e.g. utm_source=twitter
• utm_medium=social

This is what the Twitter button looked like -

<a href=“https://twitter.com/intent/tweet/?text=<?php echo $cleanTitle; ?>&url=<?php echo $cleanPermalink; ?>?utm_source=twitter%26utm_medium=social%26utm_campaign=share_buttons”>
  Share on Twitter
</a>

Because of the text restraints for Twitter, it may be better to restrict the utm paramters to only the utm_campaign.

In the Google Analytics report, the campaign data can be found under Acquisition > Campaigns > All Campaigns.

You can view the full code for the buttons on my github.