Blogger Guider

Blogger Guider

Blogging With Interesting Guider

30 Sep 2015

How To Add Facebook Like WhatsApp Sharing Button In Blogger?

Today, I am not going to publish that whatsapp button which is really a link but today, I am going to publish a real whatsapp button that look like Facebook button, have a clean icon with gradient effect and hover effect. So of course, it is eye-catching.
Facebook Like Button For WhatsApp
WhatsApp. I am damn sure that you use it very frequently and check you messages on WhatsApp 10-20 times a day. Now, how will be like if you will get a button of WhatsApp to allow your visitors to share your blog's articles directly to WhatsApp? It will be easy enough 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 the code to add a WhatsApp button. The thing they provide 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!

Today, I am not going to publish that WhatsApp button that is a link but today, I am going to release a real WhatsApp button that looks like the Facebook button, have a clean icon with a gradient effect and hover effect. So of course, it is eye-catching.

[button href='' icon='whatsapp']WhatsApp Button Demo [See At Bottom][/button]

Now scroll at the bottom of the page and see "Wanna Share?" widget. There will be a WhatsApp sharing button by clicking on it; you can share the article. (it will work only if you are on iOS OS) :)

How To Add This WhatsApp Button On Blogger?

Now, let's learn how to add it on 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:-
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
                                <div class='whatsapp'>
<!-- Whatsapp Share Buttons Start -->
<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;//;;h.appendChild(s);}</script>
<!-- Whatsapp Share Buttons End -->
<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'><i class='fa fa-whatsapp'></i> Share</a>
  • You can change the bold text to change the text that will appear on the button.
  • 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 on it. You would probably find three of them. So try with each one!

Note 2: After adding the button, you will only see the button if you're on a mobile device. Or, if you want to see it on the desktop, just add ?m=1 after any posted URL.

Note 3: FontAwesome Icons CSS is required to allow WhatsApp button to show that WhatsApp icon.
[warning headline="This Button is not yet compatible with Android OS"]This is sad but true that, this button is yet not compatible with Android OS, but it's working fine in iOS.[/warning]

Need Help?

If you need any help, then don't hesitate. I am happy to help and will help you. And, now I am completed my work. It's your job now. Just add it and share it or please [tweet url='' text='Now Increase Your Blog Traffic Using WhatsApp Button With Gradient & Hover Effects!' via='BloggerGuiders'/] it in your twitter account. Take care of your family and friends. Thanks!
Sign Up TO BOOST Your Conversions!

Shivansh Verma Blogger

He is an Indian Blogger who has excelled in HTML & CSS. He loves to design & code. He is a high-school student.
Privacy Policy | About Us | Contact Blogger Guider | A Blog Of Shivansh Verma