在前端开发过程中，常常需要添加分享按钮来方便用户分享页面或内容。Sharer.js 是一个轻量级的社交分享库，它允许你通过简单的 HTML 属性将社交分享按钮添加到网站上。本文将介绍 Sharer.js 的使用方法，以及如何将其应用于自己的项目中。
安装
安装 Sharer.js 可以使用 npm 命令：
npm install sharer.js --save
引入
在你的 HTML 文件中引入 Sharer.js：
<script src="node_modules/sharer.js/sharer.min.js"></script>
用法
添加属性
在想要添加分享按钮的元素上添加 data-sharer 属性，并指定分享链接和相应的社交媒体平台。
例如，要在 Twitter 上分享当前页面，可以添加以下代码：
<a href="#" data-sharer="twitter" data-title="标题" data-hashtags="标签">分享到 Twitter</a>
可以通过添加不同的 data-sharer 值来实现分享到不同的社交媒体平台。
自定义选项
可以通过设置 data-* 属性来自定义分享选项。例如，在分享到 Twitter 时，可以设置分享的标题、URL 和 hashtags：
<a href="#" data-sharer="twitter" data-url="http://example.com" data-title="Example Title" data-hashtags="example, share"> 分享到 Twitter </a>
JavaScript 调用
可以使用 JavaScript 来动态添加分享按钮。首先，创建一个新的 Sharer 实例：
var sharer = new Sharer({
url: 'http://example.com',
title: 'Example Title',
hashtags: ['example', 'share']
});然后，可以使用 createLink 方法创建一个新的分享链接：
var link = sharer.createLink('twitter');全局选项
可以通过设置全局选项来更改默认的分享选项。
Sharer.defaults.url = 'http://example.com'; Sharer.defaults.title = 'Example Title'; Sharer.defaults.hashtags = ['example', 'share'];
示例代码
以下是一个完整的 HTML 文件，其中包含两个示例分享按钮。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Sharer.js 示例</title>
<meta charset="UTF-8">
<script src="node_modules/sharer.js/sharer.min.js"></script>
</head>
<body>
<h1>Sharer.js 示例</h1>
<p>分享到 Twitter:</p>
<a href="#" data-sharer="twitter" data-title="标题" data-hashtags="标签">分享到 Twitter</a>
<p>分享到 Facebook:</p>
<a href="#" data-sharer="facebook" data-url="http://example.com">分享到 Facebook</a>
<script>
var sharer = new Sharer({
url: 'http://example.com',
title: 'Example Title',
hashtags: ['example', 'share']
});
var link = sharer.createLink('twitter');
console.log(link); // 打印 Twitter 分享链接
</script>
</body>
</html>结论
Sharer.js 是一个简单易用的社交分享库，可以轻松地将分享按钮添加到你的网站上。通过本文的介绍，你已经了解了如何使用 Sharer.js，并可以根据需要自定义分享选项。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/35297