在现代 Web 开发中，社交媒体分享功能日益重要，而 shariff 是一个开源的解决方案，它可以轻松地集成到网站中，同时尊重访问者的隐私。本文将介绍如何使用 npm 包 shariff 实现社交媒体分享功能。
安装
首先需要安装 shariff 的 npm 包：
npm install shariff --save
安装完成后，我们就可以在项目中引入 shariff 了。
使用
为了向访问者提供社交媒体分享功能，我们需要在 HTML 中添加以下代码：
<div class="shariff" data-url="https://example.com"></div>
其中 data-url 属性是当前页面的 URL。在页面中添加此标记后，我们需要初始化 shariff，以便它能够正常工作。我们可以通过以下代码来实现初始化：
var Shariff = require('shariff');
new Shariff('.shariff');这里我们使用了 CommonJS 的 require() 方法来加载 shariff 模块，并使用其构造函数来创建一个新的 shariff 实例。注意，我们需要传递 jQuery 选择器字符串作为参数，以便 shariff 找到我们在 HTML 中定义的标记。
现在，当访问者点击某个社交媒体按钮时，shariff 将显示一个弹出窗口，要求用户进行身份验证（如果需要），然后显示一个包含分享链接的新窗口。
配置
shariff 允许我们通过传递一个选项对象来配置其行为。以下是一些常用的选项：
new Shariff('.shariff', {
services: ['facebook', 'twitter'],
backendUrl: '/shariff-backend',
lang: 'zh'
});services：指定要显示的社交媒体服务，可以是字符串数组或函数。默认情况下，shariff 显示 Facebook、Twitter 和 Google+。backendUrl：指定 shariff 后端的 URL，该后端负责与社交媒体 API 交互以获取分享计数。默认情况下，使用开发人员自己的后端。lang：指定用于显示按钮标签和提示信息的语言代码。默认情况下，使用用户的浏览器设置。
示例代码
以下是一个完整的 HTML 示例，演示如何在网页中使用 shariff：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----------
---- -- ------ ---
------- ------------------------------------------------------------
---- -- ----------- ---
----- ---------------- -----------------------------------------------------------
-------
------
----------- -------
--------- ------- --------
---- --------------- -------------------------------------
---- -- ---------- ---
------- ------------------------------------------------------------------
--------
--- ------- - -------------------
--- ------------------- -
--------- ------------ -----------
----------- -------------------
----- ----
---
---------
-------
-------在这个示例中，我们首先引入了 jQuery 和 shariff.css，然后使用一个包含 data-url 属性的标记来指定当前页面的 URL。最后，我们引入了 shariff.js，并使用其构造函数来创建一个新的 shariff 实例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35486