How to add Whatsapp, Facebook Sharing buttons in Blogger 2021

In this article i am going to tell the easiest process to add social media sharing buttons in blogger or  blogspot which helps you to boost your website traffic.

How to Add Social Media Sharing Buttons in Blogger and Blogspot

How to add Social Media Sharing buttons in Blogger

Websites become popular if they are shared on social media platforms and we get more views too. And the best way to share your blogger posts on social media sites is to embed a social sharing buttons in every post, so that every visitor can share your post from their social accounts.

Steps to add Social Sharing buttons in Blogger

  • Step-1: Login in to Blogger.com Dashboard.
  • Step-2: Go to the Theme Section >> Edit HTML
  • Step-3: Search for ]]></b:skin> by pressing Ctrl+F
  • Step-4: Now Paste the below code just above ]]></b:skin>
.post-sharing{display:flex; display:inline-block; flex-wrap:nowrap; align-items:center; background-color:#fff; padding:1px 0px 0px; position:absolute bottom:0px; z-index:1;}
.post-sharing svg{width:25px; height:25px; vertical-align:-4px;}
.post-sharing svg path{fill:#ffffff; transition:all .33s ease;}
.post-sharing .total{display:inline-block; display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; width:100%; font-size:16px; font-weight:500; color:#005af0; padding:10.8px 0px; border-top:3px solid #005af0; cursor:not-allowed;}
.post-sharing .total i{font-style:normal; white-space:nowrap;}
.post-sharing .total svg {margin-right:3px;}
.post-sharing .total svg path{fill:#005af0;}
.post-sharing a {width:100%; padding:10px 0px; border-top-width:3px; border-top-style:solid; text-align:center; box-shadow:none; transition:all .3s ease;}
.post-sharing a:hover svg path {fill:#fff !important;}
.post-sharing a.whatsapp {border-color:#4dc246;}
.post-sharing a.whatsapp:hover {background-color:#4dc246;}
.post-sharing a.whatsapp svg path{fill:#4dc246;}
.post-sharing a.facebook{border-color:#3a569a;}
.post-sharing a.facebook:hover {background-color:#3a569a;}
.post-sharing a.facebook svg path {fill:#3a569a;}
.post-sharing a.messenger {border-color:#448AFE;}
.post-sharing a.messenger:hover {background-color:#448AFF;}
.post-sharing a.messenger svg path {fill:#448AFE;}
.post-sharing a.twitter {border-color:#00abf0;}
.post-sharing a.twitter:hover {background-color:#00abf0;}
.post-sharing a.twitter svg path {fill:#00abf0;}
.post-sharing a.pinterest {border-color:#cd1c1e;}
.post-sharing a.pinterest:hover {background-color:#cd1c1e;}
.post-sharing a.pinterest svg path {fill:#cd1c1e;}
.post-sharing a.linkedin {border-color:#2553BF;}
.post-sharing a.linkedin:hover {background-color:#2553BF;}
.post-sharing a.linkedin svg path {fill:#2553BF;}
.post-sharing a.tumblr {border-color:#314257;}
.post-sharing a.tumblr:hover {background-color:#314257;}
.post-sharing a.tumblr svg path {fill:#314257;}

Step-4: Now Search for <data:post.body/> and paste the below code just above this tag.

<b:if cond='data:view.isPost'>
<div class='post-sharing'>
<span class='total'><svg viewBox='0 0 24 24'><path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z'/></svg><i><b>SHARE</b></i></span>
<a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' onclick='window.open(this.href,&quot;sharer&quot;,&quot; toolbar=0,status=0,width=626,height=436&quot;);return false;' rel='nofollow' title='Share to Facebook'><svg viewBox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg></a>
<b:if cond='data:blog.isMobileRequest'>
<a class='messenger' expr:href='&quot;fb-messenger://share?link=&quot; + data:post.title + &quot; - &quot; + data:post.url.canonical' rel='nofollow' title='Share to WhatsApp'><svg viewBox='0 0 24 24'><path d='M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z'/></svg></a>
<a class='whatsapp' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; - &quot; + data:post.url.canonical' rel='nofollow' title='Share to WhatsApp'><svg viewBox='0 0 24 24'><path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/></svg></a>
</b:if>
<a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title + &quot; (by: @username) &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow' title='Share to Twitter'><svg viewBox='0 0 24 24'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg></a>
<a class='linkedin' expr:href='&quot;https://www.linkedin.com/sharing/share-offsite/?url=&quot; + data:post.url.canonical + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot;toolbar=0,status=0,width=626,height=500&quot;); return false;' rel='nofollow' title='Share to Linkedin'><svg viewBox='0 0 24 24'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'/></svg></a>
<a class='pinterest' data-pin-config='beside' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url.canonical + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow' title='Share to Pinterest'><svg viewBox='0 0 24 24'><path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/></svg></a>
<a class='tumblr' data-notes='right' expr:href='&quot;https://www.tumblr.com/share/link?url=&quot; + data:post.url.canonical' onclick='window.open(this.href,&quot; sharer&quot; ,&quot;toolbar=0,status=0,width=626,height=500&quot;); return false;' rel='nofollow' title='Share to Tumblr'><svg viewBox='0 0 24 24'><path d='M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17'/></svg></a>
</div>
</b:if>

Also Read:  How to Add Stylish Alert Box in Blogger

Leave a Comment