[Blogger Tutorial] How to add WhatsApp sharer button for blogger site

Gurusprovince May 30, 2017 Blogspot Tutorials Leave a comment

Today, we’re gonna be giving you guys an ultimate steps on how to add a whatsApp sharer button to your blogger site.

As the case maybe these days, whatsapp as been a source of traffic for bloggers in the world today due to the amazing growth in users for whatsapp.

We’d love to show you guys range at which whatsapp realizes users right from the days twas launched but we would’t go into that, in order to work in range with time(**winks**).

To achieve this, kindly follow the below steps.

Go to Blogger > Template > Edit HTML

Now, find ]]></b:skin> using CLT+ F to search in your template and above it, copy and paste the following code there:

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

Then Save Your Template

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.

Thats all guys!!

If you encounters any error while making use of this tutorial, kindly make use of the comment box below.

REMEMBER: Always visit for more interesting topics.

Gurusprovince Home

[Blogger Tutorial] How to add WhatsApp sharer button for blogger site

Related Posts

About Gurusprovince

Check Also

[Blogspot Tutorial] Popular Post Widget

Leave a Reply Cancel reply