如何在网站上添加whatsapp分享按钮？

WhatsApp 是最受欢迎的消息应用程序。本文介绍了如何在您的网站中添加 WhatsApp 分享按钮。

注意：这仅在安装了 WhatsApp 的移动设备中打开网站时才有效。

第 1 步：设计一个带有超链接的简单网页。当用户单击此链接时，将完成共享。

HTML

  

    
  
    

  

    
Whatsapp sharing
  
    Share to whatsapp

  

第 2 步：这在桌面\笔记本电脑上不起作用，所以让我们添加 CSS 以将其隐藏在大屏幕上。为此，使用 CSS @media 查询。

例1：本例是通过以上两步实现的。请注意 href 属性指定位置，并且此请求将发送到 WhatsApp 应用程序。

句法：

href="whatsapp://send?text=Your message here"

HTML

  

    
    
  
    
  
    

  

    
Whatsapp sharing
  
    
        Share to whatsapp
    

  

保存此文件并在手机中打开。

输出：

示例 2：在此示例中，我们将从用户获取输入并使用 JavaScript 发送该消息。在这个例子中，我们定义了一个类来仅在移动设备上显示内容。

HTML

  

    
  
    
  
    
        How to add whatsapp share 
        button on website?
    
  
    
  
        /* To show on small size screen only */
        @media screen and (min-width: 500px) {
            .mobileShow {
                display: none
            }
        }
    

  

    Whatsapp sharing
  
    
    
        Share to whatsapp
    
  
    
    
      
    
          
        // Function to share on whatsapp
        function share() {
  
            // Getting user input
            var message = $("input[name=message]").val();
  
            // Opening URL
            window.open(
                "whatsapp://send?text=" + message,
  
                // This is what makes it 
                // open in a new window.
                '_blank' 
            );
        }
    

  

输出：

HTML 是网页的基础，用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。

CSS 是网页的基础，用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。