How To Add WhatsApp Share Button In Blogger | Mobile Traffic

In 2013, Whatsapp was declared as the most used social media in the world. This thing attracts the blogger to add WhatsApp share button in their blogger blog to share their posts on the viral media. As a blogger, you must think that how to add WhatsApp share button in blogger to get mobile traffic. I am using word mobile traffic because smartphones are the king of this era. Almost everyone has a smartphone in hands for web browsing and navigation. If a user if visiting your blog on mobile and wants to share your best article in a WhatsApp group to make it viral but there is not any button to share on whatsapp. I am sure it is the worst part because you lost your free huge traffic due to the lack of one Whatsapp share button in your blog posts.

Social share icons are necessary to get exposure. Therefore, try to design social share icons with font awesome to make them more attractive for visitors.

Why We Should Add Whatsapp Share Button In Blogger

Anyone of you can ask this question that why it is beneficial or necessary to add WhatsApp share button. This thing can be explained in many ways. As I mentioned early that smartphones are the most used devices in the world. I am pretty much sure that almost 99% phones have Whatsapp installed in it due to the viral use of this social network. A Whatsapp share button can attract the reader to share your post in any whats app group to make it viral. 

No doubt, there are other social share buttons like facebook, google plus, twitter etc but WhatsApp is above all of this. A mobile user will easily share your post on WhatsApp instead of other social networks. This thing can increase the revenue due to more hits. Bloggers always want to boost their income that's why they also prefer to use an anti-Adblock script to increase earnings. 

5 Ways To Add WhatsApp Share Button In Blogger

This is the core part of this article in which I am going to mention 5 different ways to add a WhatsApp share button in your blogger blog to get mobile traffic. I am presenting different methods because some of these will not work for you due to your template. I also tried several methods and the last one worked for me while other methods are working well with my friend's blogs. In the blogging tips section, a valued article tells about make author's comment box prominent. You just need to try following methods to get your best match.

Method 1:

This is one step method that is quite easy and works for most of the blog's templates. Follow the below-mentioned steps to try this.

• In blogger dashboard, go to "Theme >> Edit HTML"
• Click in the coding section and press "Ctrl + F" to find <data:post.body/> 

• Maybe this tag comes 2 or 3 times in your template but you have to choose any one.
• Try pasting following code above <data:post.body/>. (Try other two tags also if it did not work for one)

<!-- Whatsapp Share Buttons Start --> <script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;https://dl.dropboxusercontent.com/u/7330191/whatsapp-sharing.js&quot;;h.appendChild(s);}</script> <a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Share</a>
 <!-- Whatsapp Share Buttons End -->

• Click on "Save Template" and it is done.

Method 2:

This method is simple because there is no need to dig into HTML section and find different codes, You just need to add a gadget in layout section and that's it.

• In blogger dashboard, go to "Layout >> Add A Gadget"

• Choose HTML/JavaScrip and paste the following code in it.

<script><br />
//<![CDATA[<br />
var whatsurl = window.location.href;<br />
var whattitle=encodeURIComponent(document.title);<br />
var whattitle_esc=unescape(whattitle);<br />
document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share on Whatsapp : </span>\<br />
<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\<br />
Share</a>\<br />
');<br />
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}<br />
//]]><br /></script><br />

• Click on "Save Template" and it is done. It will create a button to share posts on WhatsApp.

Recommended:

• Add Email Subscription Box Below Each Post
• Create Working Sitemap For Blogger Blog

Method 3:

I recommend creating a backup of your recent template to use it later in case of any failure. Try the following mentioned series of steps.

• In blogger dashboard, go to "Theme >> Edit HTML"
• Find ]]></b:skin> and paste the following code above it.

.whatsapp a:hover { background: linear-gradient(#01A507, #069A00); } .whatsapp i { color: #038F02; background: #FFF; text-shadow: none; font-weight: 900; border-radius: 2px; position: relative; left: -3px; margin-right: -4px; padding: 2px; -webkit-font-smoothing: antialiased; } .whatsapp a { font-family: sans-serif; font-weight: 700; text-decoration: none; font-size: 11px; color: #FFF; padding: 7px; background: linear-gradient(#009805, #058400); padding-top: 4px; border-radius: 2px; padding-bottom: 5px; text-shadow: 1px 1px 2px #797272; }

• Now find <data:post.body/> and paste the following code below it. (You can try all of the instances because this tag may come 2 or 3 times.)

<div class='whatsapp'> <i class='fa fa-whatsapp'></i> <whatsapp expr:text='data:post.title' expr:href="data:post.url"></whatsapp> <a href="kipu" data-action="share/whatsapp/share">Share</a> </div> <style> @media only screen and (max-width:780px) { div.whatsapp {display:block!important;} } div.whatsapp {display:none} </style>

• In the last step, search for </body> and paste the following code above this tag.

<script> //<![CDATA[ var x = document.getElementsByTagName("whatsapp")[0].getAttribute("href"); var y = document.getElementsByTagName("whatsapp")[0].getAttribute("text"); var z = "whatsapp://send?text=" + y + ' ' + x; document.body.innerHTML = document.body.innerHTML.replace('kipu', z); //]]> </script>

• Click on "Save Template" and it is done.

Method 4: 

Like first two methods, this is also a short and quite easy method to add WhatsApp share button in blogger to increase your mobile traffic.

• In blogger dashboard, go to "Theme >> Edit HTML"
• Now you find the section where social share buttons are already available. You have to pay attention to this step. Carefully find the social share section and add the following code there.

<!-- Whatsapp Share Buttons Start -->
<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;https://dl.dropboxusercontent.com/u/7330191/whatsapp-sharing.js&quot;;h.appendChild(s);}</script>
<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Share</a><!-- Whatsapp Share Buttons End -->

• Click on "Save Template" and it is done.

Method 5: (It worked for me)

This is the method which is working well for me. It is recommended to create a backup of your existing template and move further to the following steps.

• In blogger dashboard, go to "Theme >> Edit HTML"
• Find </head> tag and paste following code above this tag.

<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>

• Now search for ]]></b:skin> and add following code above it.

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

• Now you find the section where social share buttons are already available. You have to pay attention to this step. Carefully find the social share section and add the following code there.

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

• Click on "Save Template" and it is done.

[Also Read: How To Add Contact Form In Blogger Blog]

Additional Bonus Method: [Updated]

If you have tried all of the above 5 methods and failed to achieve your goal, then it is better to use Addthis Website. It will work for you automatically. You have not to engage with annoying codes lines. Just create an account, follow the mentioned steps and create a WhatsApp share button in your blogger blog.

Conclusion

This is the complete discussion about adding WhatsApp share button in your blogger blog to increase mobile traffic up to maximum extent. I tried my best to explain all of the steps in easy ways using simple methods. However, you are always welcome to ask any question in the case of any trouble. Any comment will be appreciated to share your knowledge in this regard. Share this article among your friends using favorite social media. (You can also share it through Whatsapp 😜). Stay tuned to get more latest articles. Thanks