简介
jquery-shares 是一个基于 jQuery 的社交分享插件，可用于在网站上方便地添加社交分享按钮，方便用户分享内容到社交媒体平台。它支持 Facebook、Twitter、Pinterest、Google+、LinkedIn、Weibo、Renren 等国内外流行的社交媒体平台。
安装
在使用 jquery-shares 之前，需要保证已经安装了 jQuery。可以通过 npm 安装：
npm install jquery-shares
也可以直接下载压缩包并引入相关的 JavaScript、CSS 文件：
<link rel="stylesheet" href="path/to/jquery.shares.css"> <script src="path/to/jquery.js"></script> <script src="path/to/jquery.shares.min.js"></script>
使用
jquery-shares 的使用非常简单，只需要在 HTML 中添加一个容器元素，然后初始化插件即可。以下是示例代码：
-- -------------------- ---- -------
---- ------------------
--------
---------------------
--------- ------------ ---------- ----------- ---------
---- ---------------------
------ -------- -------
------------ -------- -------------
------ ------------------------------
---
---------在上述示例中，我们在一个 id 为 shares 的 div 容器中添加了社交分享按钮，并使用数组 networks 指定了要分享到的社交网络，使用 url、title、description 和 image 分别指定了分享的链接、标题、描述和图片地址。
参数
jquery-shares 支持以下参数：
networks：要分享到的社交网络，可以是一个字符串或一个数组，默认为['facebook', 'twitter', 'linkedin', 'weibo']。url：要分享的链接地址，默认为当前页面的 URL。title：要分享的标题，默认为当前页面的标题。description：要分享的描述，默认为空。image：要分享的图片地址，默认为当前页面中第一个 img 元素的地址。counters：是否显示社交网络的分享计数，默认为true。onClick：点击分享按钮时执行的回调函数，可以用来自定义分享逻辑。className：分享按钮的 CSS 类名，默认为shares__link。popupWidth：分享弹出窗口的宽度，默认为640。popupHeight：分享弹出窗口的高度，默认为480。
高级用法
除了常见的社交分享需求，jquery-shares 还支持以下高级用法：
自定义社交网络
如果 jquery-shares 中没有你想要使用的社交网络，你可以自定义一个社交网络。以下是示例代码：
-- -------------------- ---- -------
------------------------ - ----------------- -
--- --- - ----------- -- ---------------------
--- ----- - ------------- -- ------- ---------
------ -
----- -------------------
----- ---------
----- ----
----------- ----
------------ ----
----- ---------- -
-- ------ ----- ----- ----
-
--
--在上述代码中，我们添加了一个名为 custom 的自定义社交网络，在网站中使用方式和其他社交网络一样：
-- -------------------- ---- -------
---- ------------------
--------
---------------------
--------- ------------ ---------- ----------- ----------
---- ---------------------
------ -------- -------
------------ -------- -------------
------ ------------------------------
---
---------自定义模板
jquery-shares 默认使用 SVG 图标来展示社交分享按钮，如果你需要使用其他的图标，可以自定义模板。以下是示例代码：
var template = '<a href="{link}" target="_blank">' +
'<img src="{icon}" alt="{name}" width="32" height="32">' +
'</a>';
$.shares.templates.default = template;在上述代码中，我们添加了一个名为 default 的自定义模板，其中使用了 img 元素来展示社交分享按钮的图标。
手动触发分享
如果需要手动触发分享，可以使用 $.shares.open 方法。以下是示例代码：
$('#shares .shares__link--facebook').click(function() {
$.shares.open('facebook', {
url: 'http://example.com',
title: 'Example Title',
description: 'Example Description',
image: 'http://example.com/image.jpg'
});
});在上述代码中，我们给 Facebook 的分享按钮添加了一个点击事件，点击按钮时会弹出 Facebook 分享窗口，并分享指定的链接、标题、描述和图片。
结语
jquery-shares 是一个轻量级、简洁易用且高度可定制的社交分享插件，可以帮助网站轻松地实现社交分享功能。在使用 jquery-shares 时，需要注意指定分享信息的正确性以及选择适合网站风格的分享按钮样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa981e8991b448d8312