简单的网页分享按钮代码

最新推荐文章于 2024-05-29 15:41:12 发布

DDOS防御

最新推荐文章于 2024-05-29 15:41:12 发布

阅读量226

点赞数 3

分类专栏：网络技术文章标签：微博

本文链接：https://blog.csdn.net/zhujibcom/article/details/139266621

版权

网络技术专栏收录该内容

126 篇文章 1 订阅

订阅专栏

创建一个网页分享按钮通常涉及到HTML、CSS和JavaScript的组合使用。下面是一个简单的示例代码，展示了如何创建一个包含微博、QQ和QQ空间分享的按钮。请注意，这只是一个前端的实现示例，实际分享功能需要依赖于相应的社交媒体平台提供的API或分享链接。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>分享按钮示例</title>
<style>
  .share-buttons {
    margin: 20px 0;
  }
  .share-button {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 10px;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
  }
  .share-button:hover {
    opacity: 0.9;
  }
  .weibo { background-color: #E6162D; }
  .qq { background-color: #12B7F5; }
  .qqzone { background-color: #FDBE3D; }
</style>
</head>
<body>

<div class="share-buttons">
  <a href="https://service.weibo.com/share/share.php?url=YOUR_URL&title=YOUR_TITLE" class="share-button weibo" target="_blank">微博分享</a>
  <a href="http://connect.qq.com/widget/shareqq/index.html?url=YOUR_URL&title=YOUR_TITLE" class="share-button qq" target="_blank">QQ分享</a>
  <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=YOUR_URL&title=YOUR_TITLE" class="share-button qqzone" target="_blank">QQ空间分享</a>
</div>

<script>
  // JavaScript 可以在这里添加，例如获取当前页面的URL和标题
  function getShareLink(platform) {
    var url = encodeURIComponent(window.location.href);
    var title = encodeURIComponent(document.title);

    switch(platform) {
      case 'weibo':
        return `https://service.weibo.com/share/share.php?url=${url}&title=${title}`;
      case 'qq':
        return `http://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}`;
      case 'qqzone':
        return `http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${url}&title=${title}`;
      default:
        return '#';
    }
  }
</script>

</body>
</html>

请将YOUR_URL和YOUR_TITLE替换成你想要分享的网页的URL和标题。这段代码创建了三个按钮，分别对应微博、QQ和QQ空间的分享链接。点击这些按钮时，它们会打开一个新的浏览器窗口或标签页，并将当前页面的URL和标题作为参数传递给相应的分享服务。

请注意，由于社交媒体平台的政策和API可能会发生变化，上述链接可能需要根据最新的分享API或服务进行更新。此外，确保遵守各个平台的使用条款和隐私政策。

DDOS防御

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的网页分享按钮代码

下面是一个简单的示例代码，展示了如何创建一个包含微博、QQ和QQ空间分享的按钮。请注意，这只是一个前端的实现示例，实际分享功能需要依赖于相应的社交媒体平台提供的API或分享链接。替换成你想要分享的网页的URL和标题。这段代码创建了三个按钮，分别对应微博、QQ和QQ空间的分享链接。点击这些按钮时，它们会打开一个新的浏览器窗口或标签页，并将当前页面的URL和标题作为参数传递给相应的分享服务。请注意，由于社交媒体平台的政策和API可能会发生变化，上述链接可能需要根据最新的分享API或服务进行更新。
复制链接

扫一扫