How To Add WhatsApp Sharing Button In Blogger Posts

WhatsApp. I am damn sure that you use it very frequently and check your messages on WhatsApp 10-20 times a day. Now, how it will be like if you get a button to allow your visitors to share your blog's articles directly to their WhatsApp friends? It will become too much easy for people just to click the WhatsApp button if they found one under your post to share the post.

I know. You have already heard about "How To Add WhatsApp Button In Blogger" in many blogs because doing this is not common and everyone is looking for a more advanced WhatsApp button.

The publishers of articles publishing "How To Add WhatsApp Button In Blogger" never provide you with the code to add a WhatsApp button. The thing they offer is- WhatsApp, which is not so good and eye-catching. People scroll out the WhatsApp button because they were unable to see it or say catch it!

And, most of the WhatsApp sharing buttons do not work. The WhatsApp button I'm going to share with you is fully made by me. :)

WhatsApp Button Demo
(will appear if the screen is less than 800px)

I hope you're able to see the button. That's above comments.

How To Add This WhatsApp Button On Blogger?

Now, let's learn how to add it to Blogger.

• Go to Blogger > Template > Edit HTML
• Now, find ]]></b:skin> in your template and above it, copy and paste the following code:

.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 below it, paste the following code:-

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

<a href='https://www.bloggerguider.com' style='display:none'>Blogger Widget</a>
<style>
@media only screen and (max-width:780px) {
div.whatsapp {display:block!important;}
}
div.whatsapp {display:none}
</style>

• You can change the bold text to change the text that will appear on the button.
• Now, search for </body> and copy-paste the following script above it:

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

• Save Your Template & you are done with it!

Note: - If after placing the WhatsApp button code, if the button doesn't show up, just find another <data:post.body/> tag and try putting it after it. You would probably find two <data:post.body/>, so try with each one!

By the way, maybe, you'd love this too: Enable HTTPS in Custom Domain Blogger Blog [Officially]

Need Help?

If you need any help, then don't hesitate. I am happy to help and will help you. And, now I have completed my work. It's your job now. Just add it and share it or please tweet it in your twitter account. Take care of your family and friends. Thanks!

Share this post