Hire a web Developer and Designer to upgrade and boost your online presence with cutting edge Technologies

Thursday, October 13, 2022

Create WhatsApp Share Button on WebSites

 This tutorial shows how to create WhatsApp share button on WebPages, This example is with HTML and will work of JAVA, JSP, PHP and any HTML Support Platforms.

Just add the below source code in your Webpage to create a share link. You can put image also inside the href Link with a Whatsapp image.

<a href="whatsapp://send?text=https://honeyvig.com/run-command-prompt-cmd-commands-from-java/" data-action="share/whatsapp/share">Share in Whatsapp</a>

This code will create a whatsapp sharer for the link https://chillyfacts.com/run-command-prompt-cmd-commands-from-java/, you can edit it to any link of your need.

Please note that this link will work only in Mobile Environment and wont work on your PC.

2.  Now if you want to hide the sharer link on PC and show in Mobile devices, You can add @media screen in css.

<style type="text/css">
@media screen and (min-width: 600px) {
 #mobile-share {
 visibility: hidden;
 clear: both;
 float: left;
 margin: 10px auto 5px 20px;
 width: 28%;
 display: none;
 }
}
</style>
<div id="mobile-share">
<a href="whatsapp://send?text=https://honeyvig.com/create-whatsapp-share-button-on-websites" data-action="share/whatsapp/share">Share in Whatsapp</a>
</div>

This css will hide the sharer in bigger screens and only show with min width of 600px.

 

No comments:

Post a Comment