How to Add Whatsapp Share Button in Blogger or Website..By Mr Tech Expert

How to Add Whatsapp Share Button in Blogger

Blogger gives you the opportunity to promote your content via many social networks. Back in the year 2009, when WhatsApp was launched, no one knew that it would challenge the graph of Facebook. In the year 2013, WhatsApp was declared as the most used social network, leaving Facebook behind. Today in this article, we will show you how to add WhatsApp share button in blogger.

After witnessing its increasing popularity, blogger now provides you the opportunity to add WhatsApp share button to your blog. After telling you how to add various widgets in the blog, in this article we will tell you about WhatsApp widget.

Here we are giving you a script coding for adding a share button to you BLOGGER Templates to makes your blogger traffic reach with more and easy to share with persons via WhatsApp.

This is strange that till now there's no official WhatsApp share widget from WhatsApp (Except few latest blogger templates).

Why Should You Add Whatsapp Share Button:

With the increased use of mobile phones by each passing day, it is necessary for you to make the best use of your phone by optimizing it and enabling it so share sites, writing content or anything you liked and want to share with your friends as well.

In the beginning, WhatsApp was only a mobile feature but its increasing fame led to its availability on the web as well. Now, just think about how beneficial it would be for you if one of your subscribers like any article on your blog and he shared it via WhatsApp, more the people view his shared article, more your website traffic will boost.

There are TWO Easy Methods To Add Whatsapp Share on your Blogger Templates.

 Let's step up to its Easy and Simple Steps:

METHOD 1 Add Whatsapp Share Button in Blogger or Website

Step 1: In your blogger templates Dashboard > Select Templates > Edit HTML

Step 2: In the HTML page Search (Press ALT+F) </head>

Step 3: And Add Below Mentioning JAVASCRIPT Code Before </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script> // Whatsapp share button $(document).ready(function() { $(document).on("click", '.tist', function() { if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { var text = $(this).attr("data-text"); var url = $(this).attr("data-href"); var message = encodeURIComponent(text) + " - " + encodeURIComponent(url); var whatsapp_url = "whatsapp://send?text=" + message; window.location.href = whatsapp_url;} else {alert("This function works on Mobile Device only");}}); }); </script>

Step 4: Search (Press ALT+F) Again for ]]></b:skin> and Add Below Mentioning CSS CODE above it

 /* Whatsapp css setting */ .tist{background:#35BA47; color:#fff; padding:2px 6px; border-radius:3px;} a.tist:hover{color:#fff !important;}

Step 5: Paste this Below HTML CODE above post footer. And click save!

 <a class='tist' expr:data-href='data:post.url' expr:data-text='data:post.title' href='#'>Share on whatsapp</a>

Your Whatsapp Share button for the blogger is ready!

METHOD 2 Add Whatsapp Share Button in Blogger or Website 

Well, I won't recommend this method to pro blog coder but this step is quite easy and not involved in coding. So if you are not so familiar with coding or don't want do work hard, then not to worry, this Methode is for you.

Adding Whatsapp Share Button with the use of Addthis website

Visit the website and follow the instruction.