How To Add Whatsapp Share Button In Blogger

Hello friends, Do you want to get more traffic on your blog posts? Here am sharing this easy tutorial to add whatsapp share button in blogger posts. You can now make your users share your posts on whatsapp by single share button.

Now everyone using whatsapp and looking for new message and content in every 10 minutes time. So here you can use whatsapp share button to get more traffic from all your whatsapp friends.

There are huge benefits in whatsapp share button. It will improve your blog traffic without affect anything. Your readers will share your blog posts with their whatsapp friends and groups directly by having whatsapp share button in blog post.

I hope every blogger love this post because of more traffic guide. Yes, this one will give you more traffic from whatsapp messenger.

Here am sharing step by step guide to add whatsapp share button in blogger. This below whatsapp share button code is fully customizable. So follow all below mentioned steps to add beautiful whatsapp share button to your blog posts.

How To Add Whatsapp Share Button In Blogger :

Sign in to your blogger dashboard and navigate to theme section in menu. Under Live on blog current theme preview, You will get Edit html button to modify your current theme. Here backup your current theme in notepad or anywhere.

Once you done saving your current theme file. Find this ]]></b:skin> tag in theme html by click on Ctrl+F. Here you need to paste this given css code above mentioned skin tag. skin tag will save your all current theme css codes. Here paste this whatsapp button code too.

.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;
}

Check below given screenshot.

Now move forward to next step. Find <data:post.body/> tag in theme and paste below code under this mentioned tag. This tag defines post body, it will contains post content in your blog. So here you need to paste below code to add whatsapp share button under blog post.

<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 On Whatsapp</a>
</div>
<style>
@media only screen and (max-width:780px) {
div.whatsapp {display:block!important;}
}
div.whatsapp {display:none}
</style>

Then find the </body> tag in your theme file. Copy and paste below given code above </body> tag. This step is important in this tutorial, You must add this tag above the mentioned code.

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

Finally you are done. Just save your theme and open your blog in mobile or tab. You will get whatsapp share button under your every blog post. This method is 100% working with all blogger themes. Make sure you are not missed out any code in above codes.

Once your readers read your blog post and reaches the end of post, They will get whatsapp share button and they will share your post with their whatsapp friends. So you will get more page views and more earnings in blogger. If you still facing any issues while following this tutorial, Then just comment here.