Social media sites are dominating the web. I’m sure you’ve seen Facebook, Twitter or Linkedin share buttons littered across the web, but have you noticed some new social share buttons popping up lately? That’s right, Whatsapp and Pocket are two of the hottest new social share buttons today, not only do they help spread your content, your users will be thankful to you for putting their favorite social share button on your site. Today I’m going to teach you how to put these buttons on your site and put tracking on them so you can tell exactly what people are sharing from your site.
Acquired by Facebook for 20+ BILLION dollars, Whatsapp is one of the most popular messaging platform on the web.
To get a Whatsapp button on your website, first we need to create an anchor tag:
<a href="whatsapp://send?text=How%20to%20add%20Whatsapp%20and%20Pocket%20share%20buttons%20to%20your%20site%0A%0Ahttp%3A%2F%2Fwww.penta-code.com" data-event-category="Social" data-event-action="Share:Whatsapp" data-event-label="Article Title">Share on Whatsapp</a>There is one IMPORTANT attributes required for this to work:
Anchor
href="whatsapp://send?text=How%20to%20add%20Whatsapp%20and%20Pocket%20share%20buttons%20to%20your%20site%0A%0Ahttp%3A%2F%2Fwww.penta-code.com" The above creates an anchor link that asks your phone to open the link in whatsapp via the whatsapp protocol, the text query parameter is the message you can pre-fill ahead of time, it’s important to remember to urlencode it. In Javascript you can invoke the encodeURIComponent() function, for instance:
var str = 'How to add Whatsapp and Pocket share buttons to your site https://www.penta-code.com';
console.log(encodeURIComponent(str));
// Outputs: "How%20to%20add%20Whatsapp%20and%20Pocket%20share%20buttons%20to%20your%20site%20http%3A%2F%2Fwww.penta-code.com"I also suggest using this site to encode/decode strings: URL Decoder/Encoder
Check out a demo here from your phone (assuming you have Whatsapp installed): Demo
Pocket is a great app to bookmark the content you want to read for later.
A great option for those interested in saving video, images, text and other content, all in one place.
– TNW
With 22 million users and 2 BILLION items saved, no doubt pocket is a very popular tool among internet users. Let’s implement the share button on your website.
Very similar to Whatsapp, you just need an anchor tag:
<a class="share-link-pocket" href="https://getpocket.com/save?url=http%3A%2F%2Fwww.penta-code.com&title=How%20to%20add%20Whatsapp%20and%20Pocket%20share%20buttons%20to%20your%20site%0A" data-event-category="Social" data-event-action="Share:pocket">Share On Pocket</a>Pocket requires two query parameters: url and title as long as they’re url encoded.
Tracking
You may have noticed a few data- attributes in the anchor tags above, the purpose of these data attributes is allow us to grab the button attributes and track it via Google Analytics when the user clicks on them. I’m not going to go into details on how to do that in this article, but you can read all about it in my previous tutorial here.
That’s it, it’s simple and effective, you’ll likely see a rise traffic from these platforms in no time. I’ll leave you with a few useful resources:
If you enjoyed this tutorial, make sure to subscribe to our Youtube Channel and follow us on Twitter @pentacodevids for latest updates!
