Add WhatsApp Share button in Blogger

Hello My Dear Users,

In these days, WhatsApp become more popular with the everyone in this world. WhatsApp is the second most active users from Facebook. So everyone want to share their blog post and articles with them to make their post viral.

But Blogger doesn't have any option or widget in their widget list. But don't worry, We have the solution for it.

Lets make some changes in your blog HTML and it become WhatsApp sharing site.

WhatsApp share button is like this -

(This is only the demo of WhatsApp button. WhatsApp button only show in mobile devices, So please test your site on mobile)

So let's get started >

Step 1 - (Add CSS)

Before editing the HTML content of your site, We recommend to make backup of your site design So you never lose your work if anything goes wrong.
 First of all, You have to login in your blogger account and select your site Template and then Click on Edit HTML and then you have to search for a skin tag ]]></b:skin>  and above that you have to paste this code-

/* ######## Whatsapp 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; float:left; } .share-art { float: left; 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:hover{color:#fff} .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 - (Add HTML)

In the template, Search for a data post tag <data:post.body/> 
and just below it , You have to paste this HTML code. In some cases If you are unable to find the code <data:post.body/> then you have to <div class='post-footer'> or <div class='post-footer-line post-footer-line-1'></div> and paste the code below.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='share-box'> <h8 class='share-title'>Share This:</h8> <div class='share-art'> <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 WhatsApp button in your homepage or every page of your website then remove the above lines which marked with Red.

Step 3 - (Add Fontawesome)

This widget will only work with Fontawesome . So you have to install fontawesome in your blog.

In the template, You have to make a search for </head> tag and paste the code above it.

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

Congratulation !! You added WhatsApp share button in your blog successfully on your own.

I hope you like this post. Please make comment if you having any problem.