HOT!Subscribe To Get Latest Blogging TipsClick Here

How to add Whatsapp sharing button in blogger


WhatsApp has become very essential part of our daily life, It help us to communicate with our friends and family in most easiest way possible. To let you use the easy accessibility of this amazing app we have brought you a tutorial about How to add Whatsapp sharing button in blogger. Most of the widgets available on the internet are only for wordpress or any other platform, and those which claim to work on blogger are buggy and most of the time it doesn't work properly, but here we have published a tutorial which works absolutely perfect and clutter free but it also carries other social media profiles, but this time we have added only WhatsApp sharing button. So, Lets move further and see How to add Whatsapp sharing button in blogger. You can check a live preview of the widget just below.
Also Check :- How To Add Social Sharing Widget With Whatsapp Sharing Button In Blogger

Start Step-1 ( Adding CSS

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

/* ######## Whatsapp Sharing Widget By Sorabloggingtips.com ######################### */
.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
float:left;
}
.share-art {
float: left;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a:hover{color:#fff}
.share-art .wat-art{background:#25d266;display:none;}
.share-art .wat-art.whatsapp-desktop{background:#25d266;display:inline-block;}
.share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)}
@media only screen and (max-width: 768px) {
.share-art .wat-art{display:inline-block;}
.share-art .wat-art.whatsapp-desktop{display:none;}
}

Step-2 ( Adding HTML

In the template, search for the <data:post.body/> tag  and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>,  then you can paste it just below <div class='post-footer'> or <div class='post-footer-line post-footer-line-1'></div>.

Note :- You will find <data:post.body/> two times or may be more then that, you just have to paste the code below second one.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-box'>
 
          <h8 class='share-title'>Share This:</h8>
               <div class='share-art'> 

<whatsapp expr:href='data:post.url' expr:src='data:post.firstImageUrl' expr:text='data:post.title'/>
<a class='wat-art whatsapp-desktop' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a>
<a class='wat-art' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a>

</div>
         </div>
                 
      <div style='clear:both'/> 
</b:if> 
Note :- If you want to display the widget in every page ( Homepage, postpage, indexpage, searchpage, archive page etc.) Then remove the lines which are marked in red from the above code.

Step-3 ( Adding Fontawesome ) 

The widget works on fontawesome icons, so to make the widget work you have to install fontawesome in your blog, To do so.
In the template, search for the </head> tag  and just above it paste the following HTML Coding.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Conclusion

Congrats !! You have made it. now you have learned that How to add Whatsapp sharing button in blogger. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us.
How to add Whatsapp sharing button in blogger How to add Whatsapp sharing button in blogger Reviewed by TemplatesYard on March 22, 2018 Rating: 5

8 comments:

  1. Thank You ... Such a informative article .... its help me to adding whatsapp share button in my every post... but i think the button is so small... how can we resize it ?

    ReplyDelete
  2. I apologize
    it worked well on my smartphone
    I checked on my pc
    thank you so much

    ReplyDelete
  3. How can I add my cell phone number to that share code for whatsapp? please helpme

    ReplyDelete

Note : -Before Commenting We Recommend You To Read Our FAQ(Frequently Asked Question) Page.