家庭数据中心系列 使用Sassy Social Share插件为WordPress添加社交分享按钮

1 前言

最近在浏览一些网站的时候,看到别人都提供了分享网站内容到主流社交软件的按钮,我一琢磨,感觉这个还是有用处的:有人愿意分享你的文章,结果还需要让别人去浏览器地址栏手动复制文章的地址链接才行,说不定这一步操作就直接打消了人家愿意分享的念头呢?想了一下,感觉还是应该给我的博客也添加上主流社交媒体的分享按钮。

大概的搜索了一下,WordPress上可用的提供社交媒体分享按钮的插件很多,有些插件集成了社交媒体分享功能之外,还包含了其他一堆功能,比如 Jetpack,这个插件虽然功能丰富,但也比较臃肿,加载的资源较多,可能会影响网站的加载速度。而另一些插件则专注于社交分享功能,比如 Sassy Social Share,这类插件功能更简洁,专注于提供轻量的社交分享按钮。

由于我不愿意轻易在 WordPress 里安装插件,尤其是那些功能繁杂、可能拖慢加载速度的”重”插件,所以在选择社交媒体分享插件时我格外谨慎:一方面希望功能够用,能提供主流社交平台的分享按钮;另一方面又希望尽量轻量,不对网站性能造成明显影响。

起初我也考虑过一些更极简的插件,比如 Simple Social Icons 等,但相关资料较少、定制能力有限,最终我选择了知名度更高、功能更完善的 Sassy Social Share 插件。

2 为什么选择Sassy Social Share插件?

以下对市面上一些常见的提供社交媒体按钮分享功能的插件做一个简单的对比:

1、Sassy Social Share

  • 功能:专注于提供社交媒体分享按钮,支持多个主流平台(如 Facebook、Twitter、LinkedIn 等)。简单易用,不包含冗余功能。
  • 自定义按钮位置:支持灵活的按钮位置设置,可以选择顶部、底部或侧边栏。
  • 社交平台支持:支持 Facebook、Twitter、Pinterest、LinkedIn 等主流平台。
  • 免费版功能:免费版功能丰富,支持所有主流社交平台的分享按钮。
  • 优点:简洁、易用、性能优化好。支持大部分主流社交平台,加载速度快。
  • 缺点:功能较为基础,不如一些插件那样提供过多的自定义选项和花哨的效果。

2、Jetpack by WordPress.com

  • 功能:除了社交分享按钮,还包含网站统计、网站加速、评论系统等其他功能。社交按钮只是其中的一部分。
  • 自定义按钮位置:自定义选项较少,按钮样式和位置不如 Sassy Social Share 灵活。
  • 社交平台支持:支持 Facebook、Twitter、LinkedIn 等常见社交平台。
  • 免费版功能:免费版包含基本的社交分享功能,但一些高级功能需要付费。
  • 优点:集成度高,功能多,适合需要多种功能的站长。
  • 缺点:功能繁多,可能会对网站性能产生一定影响,加载速度较慢。

3、Simple Social Icons

  • 功能:非常简单的社交分享插件,专注于提供分享按钮,没有过多的功能和设置。
  • 自定义按钮位置:按钮位置设置相对简单,但不能像 Sassy Social Share 那样灵活。
  • 社交平台支持:支持 Facebook、Twitter 等主流平台,但社交平台支持的数量较少。
  • 免费版功能:完全免费,提供基础的社交分享按钮。
  • 优点:极简主义,插件体积小,加载速度快。
  • 缺点:功能非常有限,不支持很多主流平台,无法进行复杂的自定义。

4、AddToAny Share Buttons

  • 功能:提供多种社交平台的分享按钮,并支持多种自定义选项,功能较为全面。
  • 自定义按钮位置:可以灵活设置按钮的显示位置,支持顶部、底部和浮动按钮。
  • 社交平台支持:支持超过 100 种社交平台,包括 Facebook、Twitter、Reddit、WhatsApp 等。
  • 免费版功能:免费版提供大部分社交分享功能,付费版提供额外的分析和定制功能。
  • 优点:平台支持非常全面,功能选项丰富。
  • 缺点:插件较重,可能会影响网站的加载速度。

5、ShareThis

  • 功能:提供社交分享按钮和流量分析功能,支持自定义按钮样式。
  • 自定义按钮位置:提供简单的自定义选项,但不如 Sassy Social Share 那样灵活。
  • 社交平台支持:支持 Facebook、Twitter、WhatsApp、Pinterest 等主流平台,并有一些地区性社交平台。
  • 免费版功能:免费版提供基本的社交分享按钮,付费版提供更多的自定义功能和分析工具。
  • 优点:支持的社交平台众多,功能较为全面,还包含流量分析。
  • 缺点:可能会对网站性能产生影响,且界面设计不如 Sassy Social Share 清爽。

6、Social Warfare

  • 功能:提供高质量的社交分享按钮,支持分享计数显示、按钮样式自定义等高级功能。
  • 自定义按钮位置:支持丰富的自定义选项,按钮位置、样式、动画等都可以精细调整。
  • 社交平台支持:支持 Facebook、Twitter、LinkedIn、Pinterest 等主要平台,还支持一些其他社交网络。
  • 免费版功能:免费版提供基本的社交分享按钮,付费版提供更多自定义选项、分享计数等功能。
  • 优点:按钮样式美观,支持分享计数,提供很多自定义选项。
  • 缺点:免费版功能有限,付费版价格较高,可能对小型站长不太友好。

为什么最终选择Sassy Social Share? 

综合比较下来,虽然 ShareThisAddToAny 插件在功能上更加全面,支持的平台也很多,甚至包括一些小众社交平台,但它们的 功能模块较多、脚本较重,可能会对网站加载速度造成影响。对我这种注重性能优化的用户来说,并不理想。

Simple Social Icons 插件虽然轻量、界面简洁,但功能相对基础,不支持自动嵌入到文章内容中,仅适合放在侧边栏展示,并且可分享的平台也非常有限,难以满足更丰富的分享场景。

Jetpack 插件虽然内置了社交媒体分享功能,但本身是一个“全家桶”式的插件,包含了很多我并不需要的功能,从而显得过于庞大。如果只是为了添加分享按钮而安装 Jetpack,性价比并不高。

Social Warfare 则是一款专注于分享按钮美观与数据统计的插件,支持位置灵活配置、点击计数等高级功能,但它的免费版限制较多,很多核心功能只在付费版本中开放,门槛略高。

综合这些因素后,我最终选择了 Sassy Social Share 插件。它不仅提供了丰富的社交平台支持,且功能单一聚焦、配置简单、性能影响可控。对于我这种追求 轻量化但不牺牲基本功能 的用户来说,Sassy Social Share 是一个非常均衡、实用的选择。

3 扩展知识1:GDPR(通用数据保护条例)

大家可能经常遇到一个现象:在第一次访问一些国外网站的时候,刚打开页面,就弹出一个 cookie 同意弹窗,提醒用户并获取他们的同意。很多朋友不理解为什么这些网站会有这看起来多此一举的行为,其实这是因为,随着全球隐私保护法规的不断严格,特别是欧盟的”GDPR”(通用数据保护条例)和类似的隐私法律,网站在收集和使用用户数据时,必须先获得用户的明确同意。

这些法律要求网站必须告知用户它们会如何使用 cookies(cookie是一种存储在用户浏览器中的小型文本文件,网站通常用它来跟踪访问者的行为、提供个性化内容或广告,甚至进行分析),并且在执行任何可能影响用户隐私的操作前,必须明确征得用户同意。没有用户同意,这些操作就可能违反隐私法,尤其是在欧盟地区。

不仅仅是 GDPR,很多其他国家和地区也出台了类似的隐私保护规定,比如 美国加州的《消费者隐私法案》(CCPA)、巴西的《通用数据保护法》(LGPD),以及一些亚太地区国家的隐私保护条例。为了遵守这些法规,网站必须在用户进入网站时提供一个明确的“cookie 同意”机制。

那么,为什么一定要弹出这个提示呢?

这个弹窗的作用是明确告知用户该网站使用了 cookies 并且可能会收集某些信息,用户必须在了解这些信息后主动同意才行。通常,弹窗中会有两个按钮:“接受”和”拒绝”或”设置”。如果用户选择接受,网站会存储相关 cookies 并允许网站根据这些数据进行个性化展示;如果拒绝,网站则可能限制某些功能,或者只存储非常基础的 cookies(例如,语言设置、会话 ID 等)。

虽然这看起来有些麻烦,但这些措施其实是为了保护用户隐私并增强数据透明度。 随着互联网数据泄露事件的频发,越来越多的用户也开始关注自己的个人信息和隐私保护,因此这类措施对于提升网站的信任度和合规性是非常重要的。对于站长而言,遵守这些规定不仅是法律要求,还能为用户带来更好的体验和信任,也有助于避免因合规问题而面临的罚款和法律风险(如果只是面向国内用户的网站就不用在意这些了)。

总的来说,cookie 同意弹窗并非多余,而是为了确保网站在收集用户数据时,遵循法律规定,保护用户隐私,避免不必要的法律风险。虽然有些用户可能觉得它打扰了浏览体验,但从长远来看,这种透明化的做法对所有人都是有益的。


那么,为什么我要在一篇讲如何添加社交媒体分享按钮的文章中,特意提到 GDPR和CCPA呢?这是因为看似简单的分享功能,往往会伴随着对用户 Cookie 的处理,比如加载 Facebook、Twitter、LinkedIn 等社交平台的追踪脚本,它们可能会在用户不知情的情况下收集浏览行为甚至个人信息。

这种行为,在欧盟国家或美国加州等地区,属于需要用户明确同意的个人数据处理行为。如果网站未经过用户授权就提前加载这些脚本,就可能存在合规性风险。而像 Google Analytics 4、广告脚本或 Facebook Like Box 等功能,本质上也属于这类”在未获授权前收集数据”的典型代表,因此都被 GDPR 和 CCPA 等法规严格监管。

而在网站合规性方面,Sassy Social Share 插件提供了对 GDPR 的良好支持:它不会在用户未同意的情况下自动加载第三方的社交媒体追踪脚本,只有当用户点击分享按钮时,才会触发社交平台的交互。这种做法有效地避免了在用户未授权的情况下进行数据收集,符合欧盟 GDPR 的要求。

此外,Sassy Social Share 插件也会提醒站长更新隐私政策(在隐私政策中加上如下一句话”本网站使用 Sassy Social Share 插件提供社交媒体分享功能。此插件允许用户分享内容至社交平台,可能会触发社交平台对用户的某些数据收集。具体数据处理详情,请参阅相应社交平台的隐私政策。”即可),明确说明社交分享按钮可能会涉及将用户数据传输到第三方平台。对于那些重视合规性的站长来说,这种”被动合规”的方式提供了更大的灵活性,同时又能保证网站在数据处理上的透明度

注:对于个人博客而言,这些都是无所谓的事,不过如果有,是不是立马感觉高大上了很多?而对于一些外贸站点来说,GDPR,CCPA类的规定就是必须遵守的了。


4 扩展知识2:Cookie Consent类的插件

接下来,如果你希望进一步强化网站的隐私合规性,尤其是在涉及 cookies 和追踪脚本时,Cookie Consent类的插件无疑是一个强有力的工具:它不仅能帮助你管理网站上所有 cookie 的使用,还能在用户访问网站时弹出同意窗口,确保用户在数据收集前明确同意。

这类插件也有很多,市面上常见的插件大致可以分为两类:一类是更加复杂的、集成了更全面的合规性管理功能的插件;另一类是功能相对简洁、直接提供 cookie 提示的插件。

而对于一些希望更高层次合规性的站长,或者那些面向欧盟(GDPR)或加利福尼亚(CCPA)等地区的访客的站点,可能需要更多功能强大的插件,如 ComplianzCookiebot。这些插件不仅提供 cookie 提示,还能帮助站长自动扫描网站上的所有 cookies,并生成相应的合规报告,确保每一项 cookie 都符合隐私政策,并且能够记录用户的同意历史。这些插件还具备一些高级功能,如根据访客的地理位置自动展示不同的隐私声明、支持多语言翻译、提供详细的同意日志等,尤其适合那些需要处理大流量或者涉及更多法律合规需求的站点。

而对于访问量较小的个人博客来说,并不需要像那些商业网站一样保留网站对访客cookie操作的合规性证据,所以,只需要使用一些更简洁、更轻量的插件来实现基本的 cookie 同意通知即可,例如 Simple Cookie NoticeCookie Notice for GDPR & CCPA,这些插件可以轻松集成到网站中,提供明确的 cookie 提示,并支持基本的隐私声明设置,确保你的博客在用户访问时能够遵守隐私法律法规的基本要求。

基于以上考虑,我最终选择了 “Simple Cookie Notice” 这个插件,因为它不仅 易于设置

image.png

而且 界面简洁直观

image.png

相比于一些功能过于复杂的插件,如 ComplianzCookie Notice & Compliance for GDPR / CCPA,这款插件无需依赖额外的注册账号,也不需要承担每月的访问次数限制或报告功能,安装完之后就能顺利运行,且不会对网站的加载速度和用户体验造成负担。对于我这样一个对 网站性能操作简便性 有较高要求的博客站长来说,Simple Cookie Notice 提供的功能足够而且轻量,完全符合我的需求。

5 Sassy Social Share插件的安装及配置

5.1 插件安装

直接在WordPress后台的插件市场中搜索”Sassy Social Share”即可,然后安装并启用:

image.png

5.2 Theme Selection

这部分就是设置分享按钮(分为标准接口和浮动接口两种)图标的样式。标准接口图标和浮动接口图标在Theme Selection部分的设置是分开的,以下是标准接口图标的设置:

image.png

浮动接口图标的设置,和标准工具栏是一样的设置项,我就不多说了:
image.png

5.3 Standard Interface

这部分是设置标准接口分享栏在页面的摆放位置、分享媒社交体图标的数量、摆放顺序等内容。

标准分享栏是位于实际展示内容的顶部(可以位于左、中、右)或者底部(可以位于左、中、右),以通常的博客文章为例,位于顶部:

image.png

位于底部:
image.png

位于底部的标准分享栏是我目前采用的方式,因为我觉得这种方式不影响网站整体的风格和访客的浏览体验,至于为什么放在底部,是因为这样方便访客在阅读之后再决定是否分享:用户看完觉得文章有价值,自然更有动力去点击分享;放在顶部的话,别人看都没看就分享?很不合理嘛。

具体的设置项如下:

image.png

image.png

5.4 Floating Interface

至于浮动分享栏,有2个位置可以选择,作为整个页面的左侧或者右侧:

image.png

image.png

我感觉都很难看,而且还影响整个博客的总体展示风格,所以就放弃了,需要的朋友可以自己考虑,不适合我,未必不适合你,其实选项还是很多的:

image.png

image.png


标准接口分享栏和浮动接口分享栏部分都提供了分享计数器的选项,不过我并没有启用这项功能:一方面,这类计数器通常依赖第三方平台的实时数据更新,属于动态内容,不排除有些实现方式会将分享数直接渲染进 HTML 页面,进而影响像 APO(Automatic Platform Optimization))这样的页面缓存机制的命中率;另一方面,我个人并不太在意每篇文章具体被分享了多少次,所以就干脆关闭了这个功能,保持页面尽可能简洁和可缓存。


5.5 Miscellaneous

在 Sassy Social Share 插件的 Miscellaneous 设置部分,可以找到许多用于优化外观、功能表现和加载方式的附加选项,比如是否在移动端显示按钮、是否启用缩略图抓取、是否异步加载样式脚本、是否显示分享按钮的分享计数等等。这些设置虽然不影响插件的核心分享功能,但对于希望微调展示效果、提高加载效率的用户来说非常有用。

不过需要注意的是,这一部分中有些功能会被标记为需要”解锁”才能使用。所谓”解锁”,并不是要求付费购买 Pro 版,而是通过支持插件作者(比如给插件评分、发送一封推荐邮件等)来免费获取完整功能。完成这些操作后,大多数受限功能都会开放使用,是一种相对友好的授权方式。对于像我这样的个人博客站长而言,默认功能其实已经足够使用,但如果你对细节控制有要求,也可以考虑通过解锁来开启更多自定义能力。

由于选项太多,我就不一一截图了,就截一张意思一下:

image.png

6 总结

原本我以为,给博客加个社交媒体分享按钮这事儿,顶多就是装个插件、点几下设置、搞定收工。没想到真正开始操作后才发现,事情远比想象中复杂——插件种类多到眼花缭乱,各种功能五花八门,有的插件功能堆得像做一桌满汉全席,分享按钮反倒成了配菜;有的轻得像片叶子但啥功能都没有,还有的干脆就像个社交平台的”超级入口”,动不动就要你开通开发者账户,绑 API、填密钥,看得我一脸问号。

好不容易选定了 Sassy Social Share,本以为总算能省点心,结果一看设置界面,选项也不少,而且部分功能还得”解锁”,解锁方式虽然不复杂,但初看一眼真有点像手游那种”下一步请付费”的套路感(当然它是免费的,只是要你安装配套插件)。

更”惊喜”的是,原本只是想让访客方便地分享到 Facebook 或 Twitter,结果在研究路途中,一头就扎进了 GDPR 合规 的深坑里。我开始思考:万一有访客在欧盟呢?我是不是得弹个 cookie 提醒?要不要记录访客的同意?要不要搞个合规性账户?虽然我这个博客流量小得可怜,但从”看着像是很正规”的角度,似乎加个 Cookie 提示也不赖~。

不过反过来想,正是因为个人博客很少涉及这些(一般都是有外贸向的独立站或者商贸公司网站才有这些需求),我更应该把自己踩过的坑记录下来。这篇文章不是写给那些日 IP 上千的网站站长的,而是给跟我一样,自己搭建博客、认真琢磨每个插件配置、希望网站不臃肿但功能也不缺的普通站长参考的。

所以这一次,我从插件对比、功能选择、合规性思考再到轻量部署,花了不少时间梳理出一个适合”注重实用但不想折腾太狠”的方案。希望有相同需求的朋友看完后能省去一些试错时间,也能理解为什么我最终选择了 Sassy Social Share + Simple Cookie Notice 的组合——不为炫技,不为极致性能优化,只是为了:好用、稳妥、适度,足矣。

分享这篇文章
博客内容均系原创,转载请注明出处!更多博客文章,可以移步至网站地图了解。博客的RSS地址为:https://blog.tangwudi.com/feed,欢迎订阅;如有需要,可以加入Telegram群一起讨论问题。

评论

  1. Linux Chrome 135.0.0.0
    2 周前
    2025-4-21 10:22:27

    最开始我还在研究为啥没看到分享按钮,然后想起来我给AdGuard开了社交媒体过滤器……

    • 博主
      秋风于渭水
      Macintosh Chrome 135.0.0.0
      2 周前
      2025-4-21 10:41:00

      这个乌龙搞大了~

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇
       
error:
zh_CN