Blogger

[Updated] Add Custom Social Share Buttons with WhatsApp Sharing in Blogger (Mobile View)

This is a tutorial post about how you can add a better sharing button than default Blogger’s share in the mobile version of Blog. One benefit of using the custom share button on your mobile version of the blog is that it looks beautiful and it will increase your blog respect for other users because they might haven’t seen the mobile share button on any other Blogspot blog. This is an updated version of the social sharing button which includes WhatsApp sharing also.

Here is a snapshot of the Social Sharing Buttons for Mobile version(Blogger platform only):
There is a separate need of the WhatsApp Sharing Code for the mobile view because of its structured API which is different for WA web and mobile. 

So here are the steps to be followed:

There are two main steps 1st is to add CSS and 2nd step to add the code.

1: Adding CSS Code

Open your blogger dashboard and move to Template> Edit HTML> 1 click anywhere in the template.
Press ctrl+f to open search box and search for following code: ]]></b:skin>  and paste the below code above the ]]></b:skin>

#share-this{overflow:hidden;margin:20px auto 0 auto;line-height:1.4em;display:table;text-align:center}
#share-this h4{position:relative;overflow:hidden;margin:0 0 10px;letter-spacing:1px;font-size:120%;font-weight:700;padding:0 8px;text-align:center;transition:all 0.5s ease-out}
#share-this h4:before,#share-this h4:after{position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:&#39;a0&#39;;background-color:#ddd}
#share-this h4:before{margin-left:-50%;text-align:right;}
#share-this span{position:relative;display:inline-block;padding:0 10px;margin:auto;}
#share-this a{float:left;display:block;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:12px}
#share-this a.this-fb{background:#395796;}
#share-this a.this-tw{background:#4cb0ea;}
#share-this a.this-pi{background:#de3425;text-align:center;overflow:hidden}#share-this a.this-pi i{width:22px; height:18px;text-align:center;padding:0}
#share-this a.this-li{background:#316dce;text-align:center;overflow:hidden}#share-this a.this-li i{width:22px; height:18px;text-align:center;padding:0}
#share-this a.this-wa{background:#3d9610;text-align:center;overflow:hidden}#share-this a.this-wa i{width:22px; height:18px;text-align:center;padding:0}
#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-wa:hover,#share-this a.this-li:hover,#share-this a.this-pi:hover {opacity:.9}#share-this i{background-size: contain;display:inline-block;margin:-3px 0px 0 0}
.this-fb i{background:url(https://1.bp.blogspot.com/-FXuxNLq0-pE/Xq7_-BY6cjI/AAAAAAAAHfs/plEbUYlXSwMnhQbc3sDb-1J0bnNRjbViwCLcBGAsYHQ/s1600/fb.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-tw i{background:url(https://1.bp.blogspot.com/-c1kA9WTLeVo/Xq7_-h4ZK0I/AAAAAAAAHf4/DgT1uy0WBywM3pq9Y5FMp1zkILT5H3iQwCLcBGAsYHQ/s1600/tw.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-li i{background:url(https://1.bp.blogspot.com/-mrNWuYwN4k4/Xq7_-PXwGTI/AAAAAAAAHfw/BAUHwSAZKgIfJkLqIx2NAkxPhS7dBeZzwCLcBGAsYHQ/s1600/lin.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-pi i{background:url(https://1.bp.blogspot.com/–t7TpHohk7Y/Xq7_-SBzQLI/AAAAAAAAHf0/11Iy305XT_EjxrHxgUWWBA6s_ByEXprJwCLcBGAsYHQ/s1600/pi.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-wa i{background:url(https://1.bp.blogspot.com/-CjXHJTWxnlQ/Xq7_-26ObvI/AAAAAAAAHf8/gfi7xCKeGrQSgfB3YUtJEmjjlq-NMPDQwCLcBGAsYHQ/s1600/wa.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.notpay {font-size:13px;line-height: 22px;border:2px #df3f2a solid;padding:3px 15px;text-align:center;margin:0 0 25px;}.pay {font-size:13px;line-height: 22px;border:2px #5973b0 solid;padding:3px 15px;text-align:center;margin:0 0 25px;}

2: Adding the main Code 

Search again for this code <span class=’post-comment-link’> and go to end of this div tag and paste below code. for example, see the above picture.

<b:if cond=’data:blog.pageType == &quot;item&quot;’><div class=’shr-btn-scl’>
<div align=’center’>
<div id=’share-this’>
<h4><span>Share this Post Via:</span></h4>

<a class=’this-fb’ expr:href=’&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url’ onclick=’window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;’ rel=’nofollow’ target=’_blank’ title=’Facebook’><i class=’fb-1’/></a>
  <a class=’this-tw’ expr:href=’&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;’ onclick=’window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;’ rel=’nofollow’ target=’_blank’ title=’Twitter’><i class=’tw-2’/></a>
<a class=’this-pi’ expr:href=’&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title’ onclick=’window.open(this.href, &apos;windowName&apos;, &apos;width=735, height=750, left=24, top=24, scrollbars, resizable&apos;); return false;’ rel=’nofollow’ target=’_blank’ title=’Pinterest’><i class=’tw-2’/></a>
  <a class=’this-li’ expr:href=’&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url’ onclick=’window.open(this.href, &apos;windowName&apos;, &apos;width=950, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;’ rel=’nofollow’ target=’_blank’ title=’LinkedIn’><i class=’tw-2’/></a>
  <a class=’this-wa’ expr:href=’&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url’ rel=’nofollow’ target=’_blank’ title=’Whatsapp’><i class=’tw-2’/></a>
  </div></div></div>  </b:if>


Now You are done!!! Enjoy blogging if there is any problem then you can ask in comments. 

Article written by:

Satyendra is a Biotechnologist from the city of Nawabs, Lucknow. Apart from blogging, his other interests are Indian rap knowledge, affiliate marketing, poetry, and basically anything nerdy.

You May Also Like

Articles2Read

Sharpen Your Mind With These Top 5 Mobile Games

June 24, 2021
Articles2Read

5 Reasons To Buy Asus Zenfone Max Pro M1 6 GB RAM Variant Over Redmi Note 5 Pro

July 18, 2018
Articles2Read

3 Tips for Finding the Most Engaging Kids Racing Games

September 21, 2019
Blogger Tutorials

How to Get Widget ID of Any Widget In Blogger or Any Blogs

December 30, 2014
Blogger Tutorials

How To Add Free HTTPS (SSL Certificate) to Any Blogger Custom Domain [Solved]

October 11, 2017

Join the discussion

  2. Satyendra Maurya

    Welcome Raaxada For Using Techno Geek Zone.

  3. DP

    Satyendra bhai how to show whatsapp button plz share html

  4. Satyendra Maurya

    @Dinesh I tried my best efforts to implement the code for whatsapp button but failed to do so…However there are many third party apps which provides whatsapp button for mobile blogs such as addthis.

  5. Anonymous

    Thank you! Greetings from Greece 🙂

  6. Satyendra Maurya

    Welcome 🙂

  7. Unknown

    I tried.But didnt work.I couldnt see the sharing buttons in mobile version.PS-the buttons are available in desktop version.

  8. Online Apps Free

    Excellent! Thank you! It's working in my site mobile view. Keep it up!

  9. Judy H

    Thank you. It works !

  10. WisProf

    Than you a lot this post has really helped me. i blog at wizprof.com

  13. Judy H

    It works perfect. Thank you so much! Do you know how to show Like button after each post on the mobile view? The iFrame code generated from https://developers.facebook.com/ only works on desktop view.

  14. Susan Lu

    This codes actually works. Thanks for the awesome post.

    http://basketballhooplab.com/

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

back to top