如何使用JavaScript在网站中添加WhatsApp分享按钮？

WhatsApp是当今最受欢迎的移动消息应用之一。它由Jan Koum和Brian Acton开发，但现在归Facebook所有。最近，它拥有近15亿活跃用户。

由于WhatsApp是一款非常流行的聊天应用，大多数网站都需要在其上设置WhatsApp分享选项。Web开发人员需要满足这一要求，并将其分享选项添加到他们的网站中，以提高用户的效率。

本章将指导您如何使用JavaScript编程语言向网站添加WhatsApp分享链接或按钮。本章将介绍以下方法来为您的网站创建WhatsApp分享选项：

• 创建WhatsApp分享链接
• 创建WhatsApp分享按钮
• 使用图片创建WhatsApp分享图标

为什么需要？

由于WhatsApp是最流行的聊天应用，大多数网站都需要在其上设置WhatsApp分享选项。WhatsApp提供私密分享，这意味着分享是在少数人之间进行的，而不是公开的。

Web开发人员需要满足这一要求，并将其分享选项添加到他们的网站中，以提高用户的效率。这样，用户可以轻松地直接从网站使用该分享选项分享任何信息，而无需复制和粘贴。

添加WhatsApp分享链接的步骤

以下步骤将在网页上创建一个WhatsApp分享链接，通过该链接您可以直接打开WhatsApp并分享网站数据。

注意：这在笔记本电脑和台式机等大屏幕上无效。它在手机上可以完美运行。

对于大屏幕用户，请在JavaScript代码中提供WhatsApp网页版地址或链接。

请按照以下步骤操作

第1步：使用HTML锚点标签<a>设计一个简单的网页，上面有一个超链接。我们将使用此链接作为分享选项。

HTML 代码

第2步：正如我们已经告诉您的，此方法不适用于大屏幕（笔记本电脑/台式机）。因此，我们将添加CSS以在大屏幕上隐藏分享链接。用于隐藏大屏幕上分享链接的CSS代码

为此使用CSS @media查询。

CSS 代码

这段代码将隐藏您使用锚点标签创建的链接，因为我们将屏幕的最小宽度设置为500px。为了测试，您可以将最小宽度增加到1000，并在笔记本电脑上检查输出；它不会隐藏链接。

第3步：现在，将上述两个步骤与JavaScript结合起来，使创建的超链接生效。因此，当您点击此链接时，它将直接从当前网页打开WhatsApp。

JAVASCRIPT 代码

将以下代码添加到HTML代码中手机版的锚点标签<a>内。

完整示例

请看下面创建WhatsApp分享链接的完整代码

在手机上的输出

请在手机上而不是台式机或笔记本电脑上检查并运行以上代码。您将得到如下响应。在这里，点击分享到WhatsApp链接，它将把您重定向到手机上的WhatsApp信使。

当您点击链接时，您的WhatsApp应用程序将在手机上打开，并要求您选择要与之分享文本的联系人。这将分享锚点标签内文本参数中提供的文本（这是WhatsApp分享示例）。

注意：您只有在手机上才能获得以上代码的此输出。

在桌面上的输出

如果您尝试在台式机或笔记本电脑等大屏幕上运行以上代码，您将得到没有WhatsApp分享链接的响应，如下截图所示：

或者，如果您在最小化浏览器屏幕尺寸时获得了WhatsApp分享链接，点击该链接后，您将在浏览器的搜索栏中得到包含文本的空白响应。

创建WhatsApp分享按钮

现在，我们将创建并向网页添加一个WhatsApp分享按钮。基本上，这段代码旨在向网站添加一个按钮，该按钮将引导您进入WhatsApp移动应用。通过点击此按钮，您将被重定向到WhatsApp应用程序，与您的联系人分享一些网页内容。

此方法不需要冗长的代码。它只需要JavaScript的window.open()方法以及WhatsApp的链接和您想分享的数据。

对于手机版WhatsApp

对于桌面版WhatsApp Web

根据您希望打开哪种WhatsApp，将以下代码之一添加到您的最终代码中。

示例

请看在网页/网站上添加WhatsApp分享按钮的手机版代码

复制代码

在手机上的输出

在手机上运行以上代码，它将在网页上显示一个小HTML按钮，如下截图所示：

点击此打开WhatsApp按钮，它将带您到您的WhatsApp应用程序，以选择并与您的联系人分享数据。请看手机截图：

使用图片创建WhatsApp分享图标

在此方法中，我们将通过从互联网上获取一张图片来创建一个WhatsApp图标，并将其添加到网页上，以创建WhatsApp的分享图标。当您点击此图片/图标时，它将把您重定向到WhatsApp应用程序，以与您的联系人分享一些网页内容。

对于手机版WhatsApp

对于WhatsApp网页版

此示例的重要说明

• 在此示例中，我们直接从互联网上获取了WhatsApp图标的图片。因此，我们提供了来自互联网的WhatsApp图片图标的链接，并设置了其高度和宽度。
• 我们分享的是Javatpoint的YouTube视频链接，而不是文本消息。为此，您不需要做任何特殊的事情。您只需将视频链接放在文本的位置，与WhatsApp链接一起提供即可。

例如： 'whatsapp://send?text= https://www.youtube.com/watch?v=ohpCMpderow'

示例

以下代码将帮助您在网站上添加WhatsApp分享图标。请记住 - 以下代码仅适用于WhatsApp移动应用程序。在网页上，它不会显示任何内容。

复制代码

在手机上的输出

在手机上运行以上代码；它会显示一个小的WhatsApp图标。点击此WhatsApp图片图标，看看它将如何响应的输出

点击此WhatsApp图片图标，您将得到如下输出

带用户输入的WhatsApp分享链接

这是创建WhatsApp分享选项的另一个例子，其中包含一个输入字段以接收用户的输入。这意味着我们将通过一个输入字段从用户那里获取他/她想要分享的输入，并通过提供一个分享按钮，使用JavaScript将此消息发送给他们在WhatsApp信使上的联系人。

在此示例中，我们将使用一个输入字段来接收用户的输入，一个按钮来提交用户输入，以及一个WhatsApp分享链接。这将使用JavaScript编程来完成。

请看带有用户输入的WhatsApp分享代码

示例

请看在网页上添加WhatsApp分享图标的完整代码

复制代码

输出

当您在手机上执行以上代码时，它会显示一个文本字段以接收用户的输入和一个按钮，用于将该输入分享到WhatsApp。请看上述程序的手机截图：

在文本字段中提供消息，然后点击分享到WhatsApp按钮。它将把您重定向到您的WhatsApp，与您的WhatsApp联系人分享该消息。