当前位置：极客笔记 > CSS > CSS 精选笔记 > 如何使用HTML和CSS创建具有不同社交媒体句柄的分享按钮

如何使用HTML和CSS创建具有不同社交媒体句柄的分享按钮

如何使用HTML和CSS创建具有不同社交媒体句柄的分享按钮

在当今数字时代，社交媒体已成为我们生活中不可或缺的一部分。无论是个人还是专业用途，我们都希望与世界分享我们的内容。这就是社交分享按钮的用处，它们可以让用户快速轻松地在他们喜爱的社交媒体平台上分享内容。

在本文中，我们将探讨如何使用HTML和CSS创建一个具有不同社交句柄的分享按钮。

创建具有不同社交句柄的分享按钮

我们将逐步介绍如何创建一个具有多个社交媒体选项的分享按钮，包括Facebook、Twitter、LinkedIn等。阅读完本文后，您将掌握创建自定义分享按钮的技巧，帮助您的受众更轻松地在不同的社交媒体平台上分享您的内容。

示例Html

以下示例演示了为所有热门社交媒体句柄创建分享按钮。

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

  • 在body部分包含一个class为share-buttons的div元素，其中包含多个class为share-button的button元素，分别对应特定的社交媒体平台名称（如facebook、twitter、linkedin）。

  • 每个按钮都包含一个class为fab的i元素（表示Font Awesome图标）和特定的图标名称（如fa-facebook-f、fa-twitter、fa-linkedin-in）。

  • 使用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）。当用户点击其中一个按钮时，会打开一个新窗口，其中包含当前页面的相应分享链接。

  • 首先，代码使用 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 ‘）指定在新标签页中打开新窗口。

// Get all share buttons
const shareButtons = document.querySelectorAll('.share-button');

// Add click event listener to each button
shareButtons.forEach(button => {
   button.addEventListener('click', () => {
      // Get the URL of the current page
      const url = window.location.href;

      // Get the social media platform from the button's class name
      const platform = button.classList[1];

      // Set the URL to share based on the social media platform
      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');
   });
});

完整示例

<!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>
      // Get all share buttons
      const shareButtons = document.querySelectorAll('.share-button');
      // Add click event listener to each button
      shareButtons.forEach(button => {
         button.addEventListener('click', () => {
            // Get the URL of the current page
            const url = window.location.href;
            // Get the social media platform from the button's class name
            const platform = button.classList[1];
            // Set the URL to share based on the social media platform
            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>

结论

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

在当今数字时代，社交媒体在内容分发和参与方面起着至关重要的作用。因此，在您的网站或网络应用程序中加入分享按钮是必不可少的。通过本文中概述的步骤，您可以使用HTML，CSS和JavaScript创建具有不同社交媒体账号的分享按钮，并使您的受众更容易在其首选的社交媒体平台上分享您的内容。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

CSS 精选笔记