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:
var str = 'How to add Whatsapp and Pocket share buttons to your site http://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.
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.
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: