HOT!Buy Ready-Made Authority WebsitesClick Here

Making Blogger Professional, Important Updates !!

Hello SoraBloggingTips Readers, If you are reading this, then we would like to appreciate your efforts for being supportive. We know its har...

How To Add Social Sharing Widget With Whatsapp Sharing Button In Blogger


These days you can share your content in any social media site like facebook, twitter, gplus, linkedin, instagram, pinterest etc. But we never thought about whats app, Do you know whats app is the most used social network and it has more users than facebook. so today we will help you to spread your content to that huge audience and will learn How to add social sharing widget with whatsapp sharing button in blogger, now days google is more focusing on mobile devices instead of pc's. So putting a social widget which has whatsapp sharing option in it, will help you to boost your traffic very quickly.
Lets move further and see How to add social sharing widget with whatsapp sharing button in blogger. You can check a live preview of the widget just below.


Note :- The actual button will only appear in mobile and tablets(768px screen size). We have shown the button just for demo in desktop.

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.

/* ######## Social 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;
}
.share-art {
float: right;
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 span {
    display: none;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}
.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>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-box'>
 
          <h8 class='share-title'>Share This:</h8>
               <div class='share-art'> 
<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>

<a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>

<a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>  

<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>

<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 social sharing widget with whatsapp shaing 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. Arrivederci !! (Goodbye in Italian).
How To Add Social Sharing Widget With Whatsapp Sharing Button In Blogger How To Add Social Sharing Widget With Whatsapp Sharing Button In Blogger Reviewed by TemplatesYard on July 06, 2017 Rating: 5

47 comments:

  1. nice share bro useful post

    ReplyDelete
  2. Nice tutorial!
    Will it displace the original share buttons

    ReplyDelete
  3. Doesn't work at Replay Theme, why?

    ReplyDelete
    Replies
    1. It doesn't depends on theme's, it will work with any blogger template, please provide your blog url.

      Delete
    2. not working,, please check
      http://military-choice.blogspot.com

      Delete
    3. You will find lots of in your code, paste the widget code below everyone to check where it is working.

      Delete
    4. check again please.
      http://military-choice.blogspot.com
      whatsapp widget appears but on sharing, only blog title is shared not the link.
      pls help, i think it is some mistake by me, please correct

      Delete
    5. https://military-choice.blogspot.com/?m=1
      Military Choice - AFCAT | CDS | NDA | SSB | Helping Material

      Please check, icon is now available but it doesn't share link along with title

      Delete
    6. We hope that you undertand the fact that it is related to whatsapp app, that means it will only work with tablets and smartphones. Won't work on desktop or laptop.

      Delete
  4. Nice one. Was looking for it from a very long time. Please add more and more cool widgets in future. Thanks a lot !

    ReplyDelete
  5. I have the other ones I only need the whatsapp button to display with the other ones

    ReplyDelete
    Replies
    1. Where to locate the former codes

      Delete
    2. Delete the other one's from the codes above just copy the codes related to whatsapp.

      Delete
  6. did't work on mine, https://automatenaija.blogspot.com.ng

    ReplyDelete
    Replies
    1. it only appears in mobile devices, please disable the mobile template.

      Delete
  7. Note* :- Change the text in blue line with your detail.

    theres no blue line in the code!

    ReplyDelete
  8. and what to add for whatsapp? whatsapp number or group chat invite link?

    ReplyDelete
    Replies
    1. Will you be more specific about the issue.

      Delete
  9. Is it whatsapp number or group chat invite link am I gonna paste there?

    ReplyDelete
    Replies
    1. You have to mention recipent whether its person or group.

      Delete
  10. i have a problem related to my blog which has flow template installed.
    On the homepage the right side bar is showing properly,but when any post is opened the right sidebar shifts to the bottom of the page and theres empty space on the place of right side bar.
    heres the link of homepage- https://www.goldmods21.tk/
    heres the link of the post- https://www.goldmods21.tk/2017/07/eset-mobile-antivirus-lifetime.html

    please help me fix it.

    ReplyDelete
    Replies
    1. Your post has HTML errors, solve them to fix the issues.

      Delete
  11. whatsapp doesnt work

    ReplyDelete
  12. Thank you, it really helpful. But it works only on the mobile not desktop. please how do i activate the desktop version. thank you.

    ReplyDelete
  13. Whatsapp Button is not showing.

    ReplyDelete
  14. Hello, please where does one replace your facebook,whatsapp link or twitter link in your script, highlight where the link will be placed, that could be where the error others are facing may come out from.
    Thanks

    ReplyDelete
    Replies
    1. It is a sharing widge, so you don't have to replace links.

      Delete
  15. it doesn't appear on my blog :( can you help me please .. mine is ngampungdolan[dot]com

    thanks

    ReplyDelete
    Replies
    1. You will find lots of <data:post.body/> in your code, paste the widget code below everyone to check where it is working.

      Delete
  16. Hiiii ...
    omggg thank youuu .. it work now! I change my mobile device setting into custom! yeaay now I can share on whatsapp .. thank you!! xoxo

    ReplyDelete
  17. i tried using your this tutorial fixing whatsapp sharing in sora seo but its not working

    ReplyDelete
    Replies
    1. You will find lots of <data:post.body/> in your code, paste the widget code below everyone to check where it is working.

      Delete
  18. after adding the code in desktop showing double solve the issue

    ReplyDelete
  19. hi i wnt a new script for my theme can you provide me please??

    ReplyDelete
  20. sir i past all HTML code but not show whatsapp

    ReplyDelete
  21. just wanna say thankyouu soo much for this tutorial 🙏🏻🙏🏻

    ReplyDelete

Note : -We have stopped giving support to free version users, please read this article Making Blogger Professional, Important Updates !!. If You Are Facing Any Problem While Setting Up The Free Theme, Then We Recommend You To Read Our FAQ(Frequently Asked Question) Page.