Skip to main content
FANCYBLOGGERTRICKS

follow us

How To Add Fancy Social Share Buttons With Whatsapp Share Button On Blogger

One of the vital strategies of getting huge traffic nowadays is sharing post on social media networks like Googleplus, Facebook, Twitter, Stumbleupon, LinkedIn and many more but we seem to care less about sharing posts on whatsapp. Whatsapp is one of the most used social media network with huge amount of users even more than facebook. Which makes it a good place to launch a mass outreach to make your blog known by new users but we can't do this without having a whatsapp sharing button. So today we are going to learn how to add fancy social share button with whatsapp share button on blogger



DEMO

In the blogoshere today, Google favours mobile devices over desktops and takes user friendliness as an important factor for ranking. So we are going to drive huge traffic from mobile device users by putting whatsapp share button on the mobile and tablet version of our blog. Kindly follow the below tutorial to get this done. 

STEP 1 : Adding Fontawesome 

The social sharing widget buttons are configured to work with fontawesome because the social media icons are taken from fontawesome and later styled with css.
Now let's firstly install fontawesome on our blog;

Firstly, backup your blogger template before editing to be on the saver side if something goes wrong.
Login to your blogger dashboard >> Template>>Edit Html
In the template codes search for <head> tag and paste the below stylesheet code below it.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>

NOTE : If you have fontawesome installed on your blog already don't bother adding it again. 

STEP 2:  Adding CSS


Firstly,  backup your blogger template before editing to be on the safer side if something goes wrong. 
- Now login to your blogger dashboard >>Template Edit Html
In the template codes search for ]]></b:skin> and paste the below CSS codes just above it.

.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;}
}

We have successfully added the css style of the social sharing buttons. Now let's move forward by adding the html of social share buttons in our blogger template.

STEP 3: Adding HTML

In the template, Copy and paste the below html codes just below <data:post.body/> (this code might appear more than once, the second one works best) 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> 

From Editors Desk

Yoola!!  We have successfully learn how to add fancy social media share buttons with whatsapp share buttons on blogger blog. Hope you successfully install this widget? Leave a comment below if you encounter any difficulties in talking this sharing buttons. Don't forget to use the below buttons and share this on social media. 


Till next next time...... I say Au Revoir!!! 😋(Goodbye in French)

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment