Friday, March 4, 2016

How To Add Facebook Like WhatsApp Sharing Button In Blogger?

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 look like the Facebook button, have a clean icon with a gradient effect and hover effect. So of course, it is eye-catching.

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'>
                                  <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>
                                  <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'>
  • 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 below 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 post URL.

Note 3: FontAwesome Icons CSS is required to allow WhatsApp button to show that WhatsApp icon.

Credits to BloggersGuider


No comments:

Post a Comment