ChipprogrammerWhatsapp Share Button
Nowadays Whatsapp became a powerful messegaing platform. So get in touch with friends and colleagues we are using whatsapp. So Whatsapp has 600 million users in world wide. It is not a small number. Nowadays WhatsApp has more number of users than any other social media except facebook. In this post we will discuss how can we create a WhatsApp share button for a Jekyll Website. See the following code.
<a href="whatsapp://send?text=The text to share!" data-action="share/whatsapp/share">Share via Whatsapp</a>
It will show something like this:
Share via Whatsapp
Now we want to think how can we use use this as the share button. We know that for our Jekyll website has site.url, base.url and a page.url. We want share the url of post. It usually looks like
https://chipprogrammers.github.io/jekyll/2017/06/17/whatsapp-share-and-contact.html
Here https://chipprogrammers.github.io is my site.url and /jekyll//2017/06/17/whatsapp-share-and-contact.html is my page.url. I have no site.baseurl since I am named my repository in the format username.github.io. Now we can see how the code should be written.
<a href="whatsapp://send?text= { site.url }{page.url }" style="position: relative; top: -8px; padding: 3px 8px 3px 8px;color: #fff;font-size: 11px;font-weight: bold;font-family: Helvetica, Arial, sans-serif;background-color: #5bb66f;border-radius: 3px;"><i class="fa fa-whatsapp" aria-hidden="true"></i> Whatsapp</a>
- Actually Code Snippet not allowing me to write site.url and page.url in double braces. After copying and pasting this code it is your responsibility to put them into double braces.
- This code never works with every browser(especially from your desktop browsers). However this code works well with Google Chrome Android.
This will produce a button like following:
Whatsapp
Reference: Yateendra/very-simple-whatsapp-sharing-button
Whatsapp Contact Button
It is very easy to build a Whatsapp contact button on your website. You can see perfect example for this on the header of this blog. I do not going to exaggerate theae things. It is the code:
<a href="https://api.whatsapp.com/send?phone=+cc-xxxxxxxxxx"><i class="fa fa-whatsapp"></i>Whatsapp Contact</a>
Type your phone number with contry code instead +cc-xxxxxxxxxx. The output of this one shows something like this:
Whatsapp Contact
Sometimes this guy shows erroneous results too 😢. But it is the only possible way…
Hai friends. My name is Arun K Soman. I am from India. Now I am pursuing M.Sc. Electronics science degree from Cochin University of Science and Technoloy(CUSAT). I completed B.Sc Electronics from BPC college, Piravom. I am not a webdesigner. But I intersted in webdesigning. I have also some enthusiam in Electronics. I know how to use CSS kits like Bootstrap, w3.css etc. and HTML as well as Jekyll. This is not my first Jekyll template. I also created some jekyll templates before, But this is a full fledged one. This theme made with doing some tweaks on w3.css. It is fully open source under MIT Licence.Pull requests are welcomed to improve this theme.