HOT!Join Our Community For Exclusive Blogging IdeasClick Here

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 .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,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:hover{background:rgba(37, 210, 102, 0.73)}
@media only screen and (max-width: 768px) {
.share-art .wat-art{display:inline-block;}
}

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='goo-art' expr:href='&quot;https://plus.google.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-google-plus'/><span class='resp_del3'> Google+</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:text='data:post.title'/>
<a class='wat-art' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &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 Templates Yard on July 06, 2017 Rating: 5

40 comments:

  1. Nice tutorial!
    Will it displace the original share buttons

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

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

    ReplyDelete
  4. 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
  5. 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
  6. Note* :- Change the text in blue line with your detail.

    theres no blue line in the code!

    ReplyDelete
    Replies
    1. That is a mistake thanks for pointing out.

      Delete
    2. Its not related to this tutorial.

      Delete
  7. 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
  8. 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
  9. 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
  10. 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
    Replies
    1. There is no use of using it on desktop.

      Delete
  11. 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
  12. 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
  13. 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
  14. 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
  15. after adding the code in desktop showing double solve the issue

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

    ReplyDelete

Powered by Blogger.