npm 包 social-media-sharing 使用教程

随着社交媒体的普及，分享到社交媒体平台已经成为网站开发的基本需求之一。社交媒体分享的功能，由于不同社交媒体平台提供的 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 安装即可：

npm install social-media-sharing

引入 social-media-sharing：

import SocialMediaSharing from 'social-media-sharing';

使用社交媒体分享

社交媒体分享组件在使用时，只需要根据平台的 API，设置相应的分享参数就可以了，而组件目前需要提供的参数包括三种：url、title 和 image，具体说明参加下表：

接下来，举例介绍如何使用 social-media-sharing 实现各个平台的分享功能。

Facebook 分享

Facebook 分享比较简单，下面就是一个简单实例：

<SocialMediaSharing.Facebook
  url="https://www.example.com"
  title="这是一篇很棒的文章"
  image="https://www.example.com/your-image.jpg"
/>

Twitter 分享

Twitter 分享也比较简单，下面是一个简单的例子：

<SocialMediaSharing.Twitter
  url="https://www.example.com"
  title="这是一篇很棒的文章"
  image="https://www.example.com/your-image.jpg"
/>

LinkedIn 分享

LinkedIn 分享的配置稍稍复杂一点，但也并不是特别困难：

<SocialMediaSharing.LinkedIn
  url="https://www.example.com"
  title="这是一篇很棒的文章"
  image="https://www.example.com/your-image.jpg"
  summary="分享的描述文字"
/>

Reddit 分享

Reddit 分享也不难配置，这里给出一个简单的实例：

<SocialMediaSharing.Reddit
  url="https://www.example.com"
  title="这是一篇很棒的文章"
  subreddit="分享到的板块（subreddit）名称"
/>

自定义分享平台

除了顶部介绍的这些社交媒体平台，social-media-sharing 还支持自定义分享平台，下面是一个自定义分享平台的例子：

-- -------------------- ---- -------
--------------------------
  -----------------------------
  -----------------
  ----------------------------------------------
  ----------- -- -
    ----------------------
  --
  -----------------------
-
  -------
----------------------------

上述代码中，在参数中传入 onClick 和 className 属性即可自定义分享平台的样式和功能。

总结

社交媒体分享是当前网站开发中基本需求之一，采用社交媒体分享 npm 包社交媒体分享就可以大大缩短繁杂的开发时间，提高开发效率。本文以 npm 包 social-media-sharing 为例，介绍了如何快速使用它来实现各大平台的分享功能。希望本文对您的开发工作有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630b81e8991b448e0e4f