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

2025年3月17日 | 阅读 8 分钟

WhatsApp如今是最受欢迎的移动消息应用程序之一。它由Jan Koum和Brian Acton开发，但现在它属于Facebook。最近，它拥有近150万活跃用户。鉴于WhatsApp是当前时代非常流行的聊天应用，几乎所有网站都需要WhatsApp分享选项。

大多数网站不仅需要WhatsApp分享按钮，还需要其他社交分享按钮。Web开发人员需要满足这一要求，并在网站上添加其分享选项，以提高用户效率。您在网站上经常看到这类按钮。

How to add a WhatsApp sharing button to a website

本章将指导您通过几个简单的步骤，无需复杂的编程即可在网站上添加WhatsApp分享按钮。在本章中，我们将帮助您在网站上添加社交媒体分享按钮。这将使用户更容易分享您网站上的某些内容。

为什么需要？

由于WhatsApp是非常流行的聊天应用，大多数网站都需要WhatsApp分享选项和其他社交分享按钮。WhatsApp提供私密分享，这意味着分享是在少数人之间进行的，而不是公开的。

您在网站上经常看到这类社交分享按钮。

Web开发人员需要满足这一要求，并在其网站上添加分享选项，以提高访客的效率。这样，用户就可以直接从网站上轻松分享任何信息，而无需复制粘贴分享。

WhatsApp提供私密分享，意味着分享是在少数人之间进行的，而不是公开的。因此，在您的网站上放置社交分享按钮时，您必须记住包含WhatsApp。

在本章中，我们不会手动创建任何代码来添加社交分享按钮。我们将使用Sharethis网站提供的现成代码。

Sharethis是什么？

如果您不想编写任何复杂的代码，请访问Sharethis.com，它通过提供现成的代码帮助您在网站上添加社交分享按钮。Sharethis是一个提供自定义代码来创建和添加社交分享按钮到您的网站的网站。它会为您自定义按钮代码，并最终提供功能齐全的代码。

Web开发人员只需将代码复制并粘贴到网站代码中即可。

您需要按照三个简单的步骤来获取自定义的JavaScript代码，该代码需要添加到您的网站代码中。当您将Sharethis网站提供的代码添加到您的网站代码中时，您将看到您选择的按钮已添加到您的网站。

它不仅允许您添加WhatsApp按钮，还提供另外24个社交分享按钮，您可以从这里选择并添加到您的网站。

使用Sharethis代码的优点

它是免费使用的，并免费提供自定义JavaScript代码。
按钮背后的代码可以通过几次选择和点击轻松自定义。
无需手动编写任何代码行，即可帮助您在网站上添加社交媒体分享按钮。
您无需编写任何代码；只需将代码从这里复制并粘贴，并在您想要使用它的地方与您的网站代码一起使用。
它允许轻松免费地编辑按钮，并提供超过25个社交分享按钮，如WhatsApp、Facebook、Twitter、Email、Pinterest、Tumbler、Skype等。
它提供了多种按钮类型，如内嵌式、粘性式、图片分享按钮、视频分享按钮等。
它提供了更具吸引力的按钮。

添加分享按钮前的简单代码

下面是一个包含几个段落和图片的网页的简单代码，但没有社交分享按钮。请看下面的代码

复制代码

<html> 
<head> 
    <title> Add a WhatsApp sharing button on a website </title>

   //script to perform operation on image click (inserted in webpage)
   <script>
   function openSharethis() {
            //open the sharethis site in a new window on image click
	window.open("https://sharethis.com/");
   }
   </script>
</head> 

<body> 
    <!-- Add heading to the webpage -->
    <h3 style="color:brown"> Simple webpage with content and images </h3> 

    <!-- Paragraph 1 -->
    <p> In this webpage, we will put some images and few sentences to create a simple webpage. </p>

    <!-- Paragraph 2 -->
    <p> If you do not want to write any complex code, go for Sharethis.com to add social sharing button to your website, including WhatsApp. Sharethis is a site that provides customize code to create and add a social sharing button to your website. It customizes the code for buttons on behalf of you and provides the code functional at the end. </p>

    <!-- Paragraph 3 -->
    <p> For this, you just have to follow three simple steps and you will get the JavaScript code, which you need to add to your website code. When you will add the code to your website provided by Sharethis site, you will see that your chosen button will be added to your website. </p>
    <br>
    <div> Click on the image to go to sharethis site </div>

    <!-- Add an image to the webpage -->
    <img src="https://pcdn.sharethis.com/wp-content/uploads/2019/06/ShareThisLogo2x-1.png" onclick="openSharethis()">   
    <br><br>

    <!-- Paragraph 4 -->
    <p> At the end of the webpage, you will see few social sharing buttons including WhatsApp to share website content with them. </p>
    <h4> Following social sharing buttons are added with the help of sharethis site code </h4>

    <!-- Last line on the webpage -->
    <center> 
    <p> We have added inline share buttons to this webpage. </p> 
    </center>
</body>
</html>

立即测试

输出

当您在网页上运行上述代码时，它将显示一个没有分享按钮的简单输出，如下面的屏幕截图所示

这是一个没有社交分享按钮的简单网页。现在，我们将通过添加sharethis网站提供的代码来向此网页添加社交分享按钮。

请按照以下步骤操作

添加WhatsApp按钮到网站的步骤

在此示例中，我们将向本章为我们创建的网页添加四个社交分享按钮，包括WhatsApp。请按照以下步骤操作，无需手动创建复杂的JavaScript代码来添加这些按钮

步骤1：点击以下链接 https://sharethis.com/onboarding/。它将直接将您带到Sharethis网站的入门页面。

这将有两个流行的按钮类型和其他类型的分享按钮。

步骤2：在这里，选择您想添加到网站的按钮类型，例如内嵌式、粘性式或其他。

我们选择了内嵌式分享按钮，它看起来如下面的屏幕截图所示

步骤3：现在，将光标拖到网站底部，然后点击自定义您的内嵌式分享按钮，并从这里选择您想添加到网站的社交分享按钮。

步骤4：在这里，您还可以自定义按钮的形状、颜色和大小。最后，点击页面底部的下一按钮。

不要忘记在网站上注册，以获取用于将社交分享按钮添加到您的网站的代码。

步骤5：如果您未登录，将看到登录/注册页面。使用您的电子邮件ID和密码在Sharethis注册，然后继续。

您将从该网站获得两段代码，需要将这两段代码复制并粘贴到您的网站代码中，以便添加到网站。

步骤6：复制第一段代码（head代码），并将其粘贴到您想在<head>标签内添加按钮的网站页面上。

步骤7：从同一页面复制另一段代码，并将其粘贴到<body>标签内您想粘贴的位置。

步骤8：保存代码文件，并在浏览器中再次执行代码。您将看到按钮已成功添加到您的网页。

我们从Sharethis网站获得了以下代码。

代码 1

<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=5fe0a23e7837a50011a9160a&product=inline-share-buttons" async="async">
</script>

代码 2

添加分享按钮后的网页代码

现在，我们将代码添加到了先前创建的网页中。请看下面的代码

复制代码

<html> 
<head> 
    <title> Add a WhatsApp sharing button on a website </title> 

    //script to add buttons in webpage
    <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5fe0a23e7837a50011a9160a&product=inline-share-buttons' async='async'>
    </script>

    //script to perform operation on image click (inserted in webpage)
    <script>
    function openSharethis() {
            //open the sharethis site in a new window on image click
	window.open("https://sharethis.com/");
    }
    </script>
</head> 

<body> 
    <!-- Add heading to the webpage -->
    <h3 style="color:brown"> Simple webpage with content and images </h3> 

    <!-- Paragraph 1 -->
    <p> In this webpage, we will put some images and few sentences to create a simple webpage. </p>

    <!-- Paragraph 2 -->
    <p> If you do not want to write any complex code, go for Sharethis.com that helps to add social sharing button to your website including WhatsApp. Sharethis is a site that provides customize code to create and add social sharing button to your website. It customizes the code for buttons on behalf of you and provides the code functional at the end. </p>

    <!-- Paragraph 3 -->
    <p> For this, you just have to follow three simple steps and you will get the JavaScript code, which you need to add to your website code. When you will add the code to your website provided by Sharethis site, you will see that your chosen button will be added to your website. </p>
    <br>
    <div> Click on the image to go to sharethis site </div>

    <!-- Add an image to the webpage -->
    <img src="https://pcdn.sharethis.com/wp-content/uploads/2019/06/ShareThisLogo2x-1.png" onclick="openSharethis()">   
     <br><br>

    <!-- Paragraph 4 -->
    <p> At the end of the webpage, you will see few social sharing buttons including WhatsApp to share website content with them. </p>
    <h4> Following social sharing buttons are added with the help of sharethis site code </h4>

    <!-- Add second code provided by sharethis here -->
    <div class="sharethis-inline-share-buttons"></div>

    <center> 
    <!-- Last line on the webpage -->
    <p> We have added inline share buttons to this webpage. </p> 
    </center>
</body>
</html>

立即测试

输出 1

当您在网页上运行上述代码时，它将显示一个包含社交分享按钮的输出，位于浏览器底部，如下面的屏幕截图所示