HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

如何使用 HTML 和 CSS 创建带有不同社交账号的分享按钮?

htmlcssweb developmentfront end technology更新于 2024/5/14 18:20:17

在当今的数字时代，社交媒体已成为我们生活中不可或缺的一部分。无论是个人用途还是工作用途，我们都希望与世界分享我们的内容。这时，社交分享按钮就派上用场了，它允许用户在自己喜欢的社交媒体平台上快速轻松地分享内容。

在本文中，我们将探讨如何使用 HTML 和 CSS 创建带有不同社交账号的分享按钮。

创建带有不同社交账号的分享按钮

我们将逐步指导您如何创建带有多个社交媒体选项的分享按钮，包括 Facebook、Twitter、LinkedIn 等。读完本文后，您将掌握创建自定义分享按钮的技能，让您的受众更轻松地在各种社交媒体平台上分享您的内容。

HTML 示例

以下示例演示了如何为所有热门社交媒体账号创建分享按钮。

创建一个 HTML 文件，其中包含对外部样式表 (style.css) 的引用和两个 JavaScript 文件(index.js 和 https://kit.fontawesome.com/704ff50790.js)，并包含一个带有 share-buttons 类的 <div> 元素。

  • <body> 部分包含一个类名为 share-buttons 的 <div> 元素，该元素又包含多个类名为 share-button 且带有特定社交媒体平台名称(例如 facebook、twitter、linkedin)的 <button> 元素。

  • 每个按钮都包含一个类名为 fab(表示 Font Awesome 图标)且带有特定图标名称(例如 fa-facebook-f、fa-twitter、fa-linkedin-in)的 <i> 元素。

  • 使用 CSS 设置分享按钮的样式。

  • 使用 JavaScript 为所有分享按钮添加点击事件监听器。

<html>
   <head>
      <link rel="stylesheet" href="style.css">
      <script src="https://kit.fontawesome.com/704ff50790.js" 
         crossorigin="anonymous">
      </script>
      <script src="index.js"></script>
   </head> 
   <body>
      <div class="share-buttons">
         <button class="share-button facebook">
            <i class="fab fa-facebook-f"></i>
         </button>
         <button class="share-button twitter">
            <i class="fab fa-twitter"></i>
         </button>
         <button class="share-button linkedin">
            <i class="fab fa-linkedin-in"></i>
         </button>
         <button class="share-button pinterest">
            <i class="fab fa-pinterest"></i>
         </button>
         <button class="share-button reddit">
            <i class="fab fa-reddit-alien"></i>
         </button>
         <button class="share-button whatsapp">
            <i class="fab fa-whatsapp"></i>
         </button>
      </div>
   </body>
</html>

示例 CSS

以下是我们示例的 CSS 代码。这里我们创建了 4 条规则 -

  • 第一条规则 .share-buttons 应用 display:flex 和 gap:10px 来水平排列按钮，按钮之间间隔 10 像素。

  • 第二条规则 .share-button 为所有按钮应用了一组通用样式，例如 border:none、border-radius:5px、color:#fff、cursor:pointer、font-size:16px 和 padding:8px 16px。

  • 后续规则 .facebook、.twitter、.linkedin、.pinterest、.reddit 和 .whatsapp 为每个按钮定义了特定的背景颜色，与相应的社交媒体平台相对应。

这些规则共同定义了一组社交媒体分享按钮的外观。按钮具有一致的样式和颜色。

.share-buttons {
   display: flex;
   gap: 10px;
}
.share-button {
   border: none;
   border-radius: 5px;
   color: #fff;
   cursor: pointer;
   font-size: 16px;
   padding: 8px 16px;
}
.facebook {
   background-color: #3b5998;
}
.twitter {
   background-color: #1da1f2;
}
.linkedin {
   background-color: #0077b5;
}
.pinterest {
   background-color: #bd081c;
}
.reddit {
   background-color: #ff4500;
}
.whatsapp {
   background-color: #25d366;
}

JavaScript 示例

以下代码为一组分享按钮添加了点击事件监听器，每个按钮代表一个社交媒体平台(Facebook、Twitter、LinkedIn、Pinterest、Reddit、WhatsApp)。当用户点击其中一个按钮时，会打开一个新窗口，其中包含当前页面对应的分享 URL。

  • 代码首先使用 document.querySelectorAll 方法选择页面上的所有分享按钮，并将它们保存到名为 shareButtons 的变量中。

  • 然后，代码使用 forEach 方法为每个分享按钮添加一个点击事件监听器。在事件监听器中，代码使用 window.location.href 获取当前页面的 URL，并使用 button.classList[1] 从按钮的类名中获取社交媒体平台。

  • 接下来，代码使用 switch 语句根据社交媒体平台设置要分享的 URL。例如，如果平台是 Facebook，代码会将分享 URL 设置为 https://www.facebook.com/sharer/sharer.php?u=，后跟使用 encodeURIComponent 方法编码的当前页面 URL。

最后，代码使用 window.open 方法打开一个包含分享 URL 的新窗口。第二个参数 ('_blank') 指定新窗口应在新标签页中打开。

// 获取所有分享按钮
const shareButtons = document.querySelectorAll('.share-button');

// 为每个按钮添加点击事件监听器
shareButtons.forEach(button => {
   button.addEventListener('click', () => {
       // 获取当前页面的 URL
      const url = window.location.href;
        
      // 根据按钮的类名获取社交媒体平台
      const platform = button.classList[1];
        
      // 根据社交媒体平台设置要分享的 URL
      let shareUrl;
      switch (platform) {
         case 'facebook':
         shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
         break;
         case 'twitter':
         shareUrl = `https://twitter.com/share?url=${encodeURIComponent(url)}`;
         break;
         case 'linkedin':
         shareUrl = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(url)}`;
         break;
         case 'pinterest':
         shareUrl = `https://pinterest.com/pin/create/button/?url=${encodeURIComponent(url)}`;
         break;
         case 'reddit':
         shareUrl = `https://reddit.com/submit?url=${encodeURIComponent(url)}`;
         break;
         case 'whatsapp':
         shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(url)}`;
         break;
      }

      v
      window.open(shareUrl, '_blank');
   });
});

完整示例

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="style.css">
   <script src="https://kit.fontawesome.com/704ff50790.js" crossorigin="anonymous"></script>
   <script src="index.js"></script>
   <style>
      .share-buttons {
         display: flex;
         gap: 10px;
      }
      .share-button {
         border: none;
         border-radius: 5px;
         color: #fff;
         cursor: pointer;
         font-size: 16px;
         padding: 8px 16px;
      }
      .facebook {
         background-color: #3b5998;
      }
      .twitter {
         background-color: #1da1f2;
      }
      .linkedin {
         background-color: #0077b5;
      }
      .pinterest {
         background-color: #bd081c;
      }
      .reddit {
         background-color: #ff4500;
      }
      .whatsapp {
         background-color: #25d366;
      }
   </style>
   <script>
      // 获取所有分享按钮
      const shareButtons = document.querySelectorAll('.share-button');
      // 为每个按钮添加点击事件监听器
      shareButtons.forEach(button => {
         button.addEventListener('click', () => {
            // 获取当前页面的 URL
            const url = window.location.href;
            // 根据按钮的类名获取社交媒体平台
            const platform = button.classList[1];
            // 根据社交媒体平台设置要分享的 URL
            let shareUrl;
            switch (platform) {
               case 'facebook':
               shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
               break;
               case 'twitter':
               shareUrl = `https://twitter.com/share?url=${encodeURIComponent(url)}`;
               break;
               case 'linkedin':
               shareUrl = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(url)}`;
               break;
               case 'pinterest':
               shareUrl = `https://pinterest.com/pin/create/button/?url=${encodeURIComponent(url)}`;
               break;
               case 'reddit':
               shareUrl = `https://reddit.com/submit?url=${encodeURIComponent(url)}`;
               break;
               case 'whatsapp':
               shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(url)}`;
               break;
            }
            // Open a new window to share the URL
            window.open(shareUrl, '_blank');
         });
      });
   </script>
</head>
<body>
   <div class="share-buttons">
      <button class="share-button facebook">
         <i class="fab fa-facebook-f"></i>
      </button>
      <button class="share-button twitter">
         <i class="fab fa-twitter"></i>
      </button>
      <button class="share-button linkedin">
         <i class="fab fa-linkedin-in"></i>
      </button>
      <button class="share-button pinterest">
         <i class="fab fa-pinterest"></i>
      </button>
      <button class="share-button reddit">
         <i class="fab fa-reddit-alien"></i>
      </button>
      <button class="share-button whatsapp">
         <i class="fab fa-whatsapp"></i>
      </button>
   </div>
</body>
</html>

结论

总而言之，在网站或 Web 应用程序中添加社交媒体分享按钮是提升互动度并增加内容流量的简单方法。通过使用 HTML 和 CSS，您可以创建视觉上吸引人的按钮，让访问者轻松地在各种社交媒体平台上分享您的内容。此外，通过添加 JavaScript，您可以使按钮具备功能，并根据当前页面的 URL 动态生成分享 URL。

在当今的数字时代，社交媒体在内容分发和互动方面发挥着至关重要的作用。因此，在您的网站或 Web 应用程序中加入分享按钮至关重要。按照本文概述的步骤，您可以使用 HTML、CSS 和 JavaScript 创建带有不同社交名称的分享按钮，让您的受众更轻松地在他们喜欢的社交媒体平台上分享您的内容。

相关文章

有用资源

打印 下一节:使用 HTML 和 CSS 显示霓虹灯文本 ❯❮ 上一节:如何使用 HTML 和 CSS 通过拖放填充颜色来更改图像颜色?