How to add social sharing widget with WhatsApp sharing button in blogspot

How to add social sharing widget with WhatsApp sharing button in blogspot

There are a number of social media sites you can share your content on today, including Facebook, Twitter, Gplus, Linkedin, Instagram, Pinterest, etc. 

Yet we didn't consider whats app. Did you know that WhatsApp is the most popular social network, with more users than Facebook? 

Today, we'll show you how to add a social sharing widget to your blogger site along with the WhatsApp sharing button. 

As Google increasingly emphasizes mobile devices over personal computers, we'll show you how to add that social sharing button. 

You will be able to increase your traffic very quickly by putting a social widget with an option to share via Whatsapp.

Let's move on to learning how to add a Whatsapp sharing button to a social sharing widget in Blogger.

Important Notice: The WhatsApp share button can only be seen on mobile devices or tablets (768px screen size) 

Also, backup your blog theme so that in case anything goes wrong you can easily restore your blog to its former state.

Steps to add Social widgets on blogger or HTML sites

There are two ways to add the social widget on your blog, and they are:

1. Adding CSS

The first step is to go to your blogger dashboard, click on Theme

Then click on the drop-down icon to open other options


Then click on the Edit HTML button 


After the HTML of your blog is completely opened tap the ctrl+F key together to open a search box on your theme. The search for ]]></b:skin>  

Just above it paste the below code there

/* ######## Social Sharing Widget By Southblog.com.ng ######################### */ .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;} }{code}

Step 2

Adding the HTML

The below HTML code should be added to the exact place you want the social share button widget to appear. 

In the theme, search for <data:post.body/> tag and paste the below HTML code. In case you theme does not have the <data:post.body/> tag search for the <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, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;" rel="nofollow" target="_blank"><i class="fa fa-facebook"><span class="resp_del"> Facebook</span></i></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, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;" rel="nofollow" target="_blank"><i class="fa fa-twitter"><span class="resp_del2"> Twitter</span></i></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, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;" rel="nofollow" target="_blank"><i class="fa fa-pinterest"><span class="resp_del4"> Pinterest</span></i></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, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;" rel="nofollow" target="_blank"><i class="fa fa-linkedin-square"><span class="resp_del5"> Linkedin</span></i></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></i></a>  

{codeBox}

<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></i></a>
</whatsapp></div>
         </div>
                 
      <div style="clear: both;"> 
</div></b:if>{code}

Step 3

Adding  Fontawesome code 

This SOcial share button widget uses Fontawesome icons, so to make it display on your blog you must include the below code on your blog.

To add the code, in your theme search for the </head> tag and paste the code right above it

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

Conclusion: 

Congrats for adding the WhatsApp share button on your blogger blog and I hope you have learned how to add a social sharing widget with a WhatsApp sharing button in blogger blogs.

 Hopefully, this will enable you to increase your traffic. We encourage you to subscribe to the SouthBlog Reporters newsletter to enable us to update you when we publish new posts.

Please Subscribe to my YouTube Channel by clicking on the Video icon below.


Southblog Copyright/Disclaimer.

All rights reserved. All health posts, and other content on this website, are written for educational purposes and are not intended to replace your Doctor's advice or prescription. Therefore, the contents should not be reproduced (published, broadcast, rewritten, or redistributed in whole or in part) without prior express written permission from Southblog Editor.

Post a Comment

Previous Post Next Post

Subscribe

Get email notifications

SouthBlog App

Get the SouthBlog App Now!.