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:'\a0';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
<b:if cond='data:blog.pageType == "item"'><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='"https://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/></a>
<a class='this-tw' expr:href='"https://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/></a>
<a class='this-pi' expr:href='"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.featuredImage + "&description=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=735, height=750, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='Pinterest'><i class='tw-2'/></a>
<a class='this-li' expr:href='"https://www.linkedin.com/shareArticle?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=950, height=650, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='LinkedIn'><i class='tw-2'/></a>
<a class='this-wa' expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + " | " + 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.
17 Comments
tank you for this code http://www.ajakiz.com/
ReplyDeleteWelcome Raaxada For Using Techno Geek Zone.
DeleteSatyendra bhai how to show whatsapp button plz share html
ReplyDelete@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.
DeleteThank you! Greetings from Greece :)
ReplyDeleteWelcome :)
DeleteI tried.But didnt work.I couldnt see the sharing buttons in mobile version.PS-the buttons are available in desktop version.
ReplyDeleteExcellent! Thank you! It's working in my site mobile view. Keep it up!
ReplyDeleteThank you. It works !
ReplyDeleteThan you a lot this post has really helped me. i blog at wizprof.com
ReplyDeleteExcellent post
ReplyDeletehttps://videographybloginfo.wordpress.com/
Innovative idea.
ReplyDeletehttps://mdasdrne7.wixsite.com/mysite
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.
ReplyDeleteThis codes actually works. Thanks for the awesome post.
ReplyDeletehttp://basketballhooplab.com/
This was very helpful. Thanks.
ReplyDeletewww.healthostyle.blogspot.com
Thank you, nice updated.... http://globallords.blogspot.com
ReplyDeletethanks for this post, it will help my blog, https://www.onlinejewelryart.com/
ReplyDeleteAlthough every comment is appreciated, Keep in mind that any link or keyword in the comments may be the reason for the deletion of your comment. Thanks for understanding!