随着社交媒体的普及，分享到社交媒体平台已经成为网站开发的基本需求之一。社交媒体分享的功能，由于不同社交媒体平台提供的 API 确实略有不同，因此一般需要借助一些第三方库来简化开发。如今，有很多优秀的第三方库都已经被打包成为 npm 包，社交媒体分享也有不少基于 npm 的开源工具库，该文将为大家介绍其中比较常用和好用的 npm 包 social-media-sharing 的使用教程。
社交媒体分享原理
在分享前，先简单介绍一下社交媒体分享的实现原理。通常可以通过引入各大社交媒体平台提供的 js 插件，或是直接使用他们的 API 接口进行分享操作。由于第一种方式并不能提供完整的 API 功能，所以一般不建议使用。而第二种方式则相对直接，只需要通过填写分享的 url、文本、图片等基本信息，并请求相应的 API 接口即可实现。从 API 的使用层面上讲，社交媒体分享的实现只需要掌握每个平台的 API 使用方法即可，其余的就是 js 的相关操作和布局特效的实现。
社交媒体分享 npm 包 social-media-sharing
npm 中最常用的社交媒体分享第三方库就是 social-media-sharing。social-media-sharing 集成了大部分人常用的社交媒体平台的分享功能，包括 Facebook、Twitter、LinkedIn、Reddit 等等，也支持自定义的分享平台。使用 social-media-sharing，我们只需要传入分享内容的参数，即可快速生成各大社交媒体平台的在线分享链接，缩短了繁琐的开发过程。
安装和引入
社交媒体分享 npm 包 social-media-sharing 的安装非常简单，在项目中使用 npm 或 yarn 安装即可：
--- ------- --------------------
引入 social-media-sharing：
------ ------------------ ---- -----------------------
使用社交媒体分享
社交媒体分享组件在使用时，只需要根据平台的 API，设置相应的分享参数就可以了，而组件目前需要提供的参数包括三种：url、title 和 image，具体说明参加下表：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | string | 是 | 分享链接 |
| title | string | 否 | 分享标题 |
| image | string | 否 | 分享图片链接 |
接下来，举例介绍如何使用 social-media-sharing 实现各个平台的分享功能。
Facebook 分享
Facebook 分享比较简单，下面就是一个简单实例：
---------------------------- ----------------------------- ----------------- ---------------------------------------------- --
Twitter 分享
Twitter 分享也比较简单，下面是一个简单的例子：
--------------------------- ----------------------------- ----------------- ---------------------------------------------- --
LinkedIn 分享
LinkedIn 分享的配置稍稍复杂一点，但也并不是特别困难：
---------------------------- ----------------------------- ----------------- ---------------------------------------------- ----------------- --
Reddit 分享
Reddit 分享也不难配置，这里给出一个简单的实例：
-------------------------- ----------------------------- ----------------- ------------------------------- --
自定义分享平台
除了顶部介绍的这些社交媒体平台，social-media-sharing 还支持自定义分享平台，下面是一个自定义分享平台的例子：
--------------------------
-----------------------------
-----------------
----------------------------------------------
----------- -- -
----------------------
--
-----------------------
-
-------
----------------------------上述代码中，在参数中传入 onClick 和 className 属性即可自定义分享平台的样式和功能。
总结
社交媒体分享是当前网站开发中基本需求之一，采用社交媒体分享 npm 包社交媒体分享就可以大大缩短繁杂的开发时间，提高开发效率。本文以 npm 包 social-media-sharing 为例，介绍了如何快速使用它来实现各大平台的分享功能。希望本文对您的开发工作有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005630b81e8991b448e0e4f