webtechgroups
LightBlog

Banner Link

Tuesday, December 26, 2017

How To Add WhatsApp Share Button on Blogger Easy Methods

As we know that WHATSAPP is one if the giant social network among the world...with easy and instant messenger...now in this era whatsapp is most common to all..

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

We know that the Blogger is one of the big platform....most of bloggers are searching for a working script coding..

There are TWO Easy Methods To Add Whatsapp Share on your Blogger Templates.
 Let's step up to its Easy and Simple Steps:

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 JAVA SCRIPPT 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>
You are Done..!! :-D




No comments:

Post a Comment