Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Tools
    • Json Beautifier
    • Html Beautifier
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
22 Aug
2022

How to add a WhatsApp share button on a website

by Shubham Batra

3289

For adding the whatsapp share button we just need one anchor tag and then we have to know how to use api.whatsapp.com to share the link. So starting from the beginning you can add this fontawesome css on your page.

To use the Font Awesome icons, add the following line inside your HTML page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Now we will add anchor tag to create share to whatsapp button . So you can copy Code for  WhatsApp share button . You have to specify the url which you want to share in the href tag ,that url will be shared automatically on whatsapp when you will click on that.

        <a class="whts" href="https://api.whatsapp.com/send?text=https://www.code2night.com/" data-action="share/whatsapp/share">
            <i class="fa fa-whatsapp"></i>
        </a>

Now we will just add some styling for whatsapp icon.The style for fa fa-whatsapp icon 

<style>
    .fa-whatsapp {
        color: #fff;
        background: linear-gradient(#25d366,#25d366) 14% 84%/16% 16% no-repeat, radial-gradient(#25d366 60%,transparent 0);
    }

    a.whts {
        font-size: 38px;
        margin: 35px;
        vertical-align: top;
        position: relative;
        top: 2px;
    }
</style>

to share the link on whats app click on the share button then a new window will pop up click on continue with chat then the new popup will open then click on use WhatsApp web then share your message.

In mobile apps it will directly open whatsapp if installed in your system. So this is how to add a WhatsApp share button on a website .

 


  • |
  • How to add whatsapp share button on a website , How to add a WhatsApp share button on a website , apiwhatsappcom , Share to whatsapp

Comments

Follow Us On Social Media - Like Us On Facebook

Best Sellers

product 1

Hand Hug Bracelet For Women Men Cuff Bangle Adjustable Lover Couple Bracelets

Can be given as a gift to your family, relatives, or friends

Buy $15.99
product 1

Teddy bear hug bear plush toy bear cub

Can be given as a gift to your family, relatives, or friends


Buy $49.99

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Thank you for Downloading....!

Subscribe for more tutorials

Support our team

Continue with Downloading

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2023 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier