不论是搭建品牌网站、购物网站制作等 ..，有许多类型的网站都需要有会员注册的功能，除了方便后续的购物流程，也能进一步留下访客资料，未来才有机会做再营销。
WordPress 虽有许多社群快速注册插件，但通常免费版一来是有许多限制，二来是能显示的地方不够多。
以 WooCommerce 电商 为例子，如果要在 结账表单流程，要放上一个社群登入功能，这对于许多社群登入插件，通常是进阶版才有的。
这篇文章，会和大家分享 Super Socializer 插件，它的免费版功能就很完整，整合了「 会员快速登录 / 注册（Facebook+Google） 」、「 社群分享 」、「 社群评论 」这三大项功能。
假如这些都是你想要的功能，那只需安装这款插件就能一次满足，但如果你只需要其中某一项功能，也能针对单一功能开启。 更多开启 Line 快速登录功能。
好啰，那我们就开始吧！
- 1. Super Socializer 是什么？
- 2. Social Login 社群登入（Facebook）
- 3. Social Login 社群登入（Google）
- 4. Social Sharing 社区分享
- 5. Social Commenting 社区留言
- 6. 社群小工具（含社群追踪）
- 常见问题
- WordPress 学习资源
1. Super Socializer 是什么？
Super Socializer 是一款优质的社群插件，主要包含三大功能，分别是「社交登录 」、「 社交分享 」、「 社交评论 」，一款插件就能搞定这些事情，简单利落。 更多 Super Socializer 完整教程。
Super Socializer 有几个很棒的功能&特色，挑选出来跟大家分享。
- 支持多种社群快速注册+登入功能（像是 Facebook、Google、Line .. ）。 更多 Line 快速登入功能。
- 可在 WordPress 登入、注册、评论表单 ..，启用社群登录功能。
- 可在 WooCommerce 结帐页面、客户登录表单上，启用社群登录功能。
- 超过 100 种社交软件的分享，且支持计数功能。
- 社群共享按钮的样式调整（像是形状、大小、颜色、显示顺序、水平或垂直浮动显示 .. ）。
- 可自定义登录、注册后的网址重定向。
- 启用社群留言功能，像是Facebook、Disqus。
- 多站点兼容。
- 支持启用 HTTPS 的网站。
下图就是基本款的使用社群登录到 WordPress 后台（社群登录还能放在很多页面，这只是其中一种）。
另外的就是社群分享功能（有超过 100 种社群集合）。
由于 Super Socializer 是个社群集成插件，你也能依照自己需求，挑选特定功能插件安装即可，这样可降低网站负担。
- 如果全部功能都要用，就直接安装 Super Socializer。
- 如果只想用社群登录&注册功能，你只需安装 Heateor Social Login。
- 如果只想用 Facebook 社群留言，你只需安装 Fancy Comments。
- 如果只想用社交分享功能，你只需安装 Sassy Social Share。
2. Social Login 社群登入（Facebook）
这章节，来进行 Super Socializer 插件安装，示范常用的 Facebook 社群快速登入 / 注册功能，简单分成 3 步骤来处理（也能参考 官方流程）。
Step1：插件安装+社群登入设定
首先，前往 WordPress 插件 > 安装插件，搜寻 Super Socializer 然后安装+启用。
把 Enable Social Login 社群登入打勾，选择 Facebook 社群登入，然后到 Facebook for Developers 激活社群登入功能（下面有 FB 社群登入，申请流程教程）。
设定完毕后，再把App ID（账号）&App Secret（密钥）贴入到相对应的字段，就能正常启用！
再来，切换到Advanced Configuration进阶设定，帮社群登录取个标题。
开启 WooCommerce 登录 / 注册 / 结账页面的社群登录功能，还有可设定登录 / 注册成功后，网址要导向到哪里。
- Enable at WooCommerce Customer Login Form：在 WooCommerce 登录表单，开启社群快速登录。
- Enable at WooCommerce Customer Register Form：在 WooCommerce 注册表单，开启社群快速登入。
- Enable at WooCommerce Checkout Page：在 WooCommerce 结帐表单，开启社群快速登入。
- Login redirection：登入后导向的位置，可依照自己需求选择。 有提供 4 种选项，分别是 Same page where user logged in（登入后停留在当前页面）、Homepage（前往首页）、Account dashboard（会员专区）、Custom Url（客制化网址）。
- Registration redirection：注册后导向的位置，可依照自己需求选择，其他同上。
Super Socializer 社群登录设置完成后，下面就来申请 FB 快速登录功能啦！
Step2：申请 FB 快速登录 / 注册功能
前往 Facebook for Developers，如果是第一次使用，右上角应该会有类似开始的按钮，让自己能顺利前往应用程序即可。
因为我已经有申请过，就用目前的接口操作示范，点选「我的应用程序」。
前往“ 创建应用程序 ” 。
选择消费者应用程序类型，然后下一步。
自定义应用程序名称、设定信箱，完成后下一步。
选择使用 Facebook 登入。
选择 www（网站类型）。
输入自己网站的域，并进行储存。 然后，前往设定>基本资料。
整体字段输入，大致上可直接参考下图，内容记得改成自己的。
应用程序编号&密钥是最重要的，目前所做的设定都是为了让这个凭证申效，这里先记得就好，设定完成后再把它们复制起来。
- 应用程序域：填入你的网站网域。 举例：必须同时输入和 这两种域版本（demo.com 需改为自己的域）。
www.demo.comdemo.com - 隐私政策网址：输入隐私权页面网址，如果网站没有此页面的话，需自行新增。
- 服务条款网址：同上。
- 用户数据删除： Facebook 新增的审核字段，填入自己的域名即可。
- 类别：由于是示范购物网站，所以选购物。
- 应用程序图标：可放自己的网站 Logo。
- 应用程序用途：网站是自己的选「你自己或你的商家」，帮客户建立的选「 客户 」。
接着输入网站网址，然后「储存」。
前往 Facebook 登录 > 设置，在“ 有效的 OAuth 重新导向 URI ”输入 。 （需把 demo.com 改为自己的域）https://demo.com/?SuperSocializerAuth=Facebook
完成后，就进行储存。
备注 ：
如果使用 Super Socializer 插件，上图域需输入 。
https://demo.com/?SuperSocializerAuth=Facebook如果使用 Heateor Social Login 插件，上图域需输入 。
https://demo.com/?HeateorSlAuth=Facebook
都搞定后，前往「设置 > 基本资料」，把模式切换成「 上线 」，然后把应用程序编号&密钥复制起来。
Step3：FB 凭证贴上&浏览成果
前往 WordPress 后台，回到 Super Socializer > Social Login 社群登入，将 Facebook 的 App ID & Secret 分别填上，然后储存。
前往 WordPress 前台的会员登入&注册页面，就会发现 Facebook 快速登入功能，已经出现啦！
除此之外，在结账流程也会出现社群登入功能，这也是许多电商主爱用的功能之一。
好啰，以上是演示 Super Socializer 的 FB 社群登录功能。
额外教程：如果要想让网站加上 FB 线上即时聊天功能，也能参考 这篇文章。
3. Social Login 社群登入（Google）
刚刚示范了激活 FB 社群登录功能，这章节会跟大家分享，如何启用 Super Socializer 的 Google 快速登录功能（也能参考 官方流程）。
这里主要会分享如何申请 Google 快速登入，至于进阶功能设定，刚在上一章节都有提到，这边就不重复说明。
Step1：开启 Google 快速登录功能
前往 Super Socializer > Social Login，把 Google 快速登入打勾。
接下来需前往 Google API 控制台，申请快速登入功能，申请完毕后，再把凭证帐密输入即可（下面有流程教程）。
Step2：申请 Google 快速登录 / 注册功能
前往 Google API 控制台，点击“ 创建工程 ” 。
帮项目取个名字，然后“ 建立 ” 。
确认自己是在刚新建的项目底下，前往「API 和服务 > OAuth 同意画面 」。
User Type 选择“ 外部 ”，然后点“ 创建 。
设定应用程序名称、电子邮件、标志等 ..。
参考下图输入自己的网站网址，有关隐私权&服务条款页面，如果网站上没有此页面，就自行新增然后再来这边输入即可。
授权网域就输入自己的网站网址。
前往“ 证书 ”，点击“ 创建证书 > OAuth 客户端 ID 。
依照下图进行输入（下面有细部说明），完成后“ 创建 。
- 应用程序类型：选择「网页应用程序」。
- 名称：可输入你的网站名称或是公司名称。
- 已授权的重新导向 URI：输入网站域，需包含 http:// 或 https:// 开头。 网域尾端不需要尾端斜槓。 输入网址后，记得直接按 Enter，否则不会保存。
最后就会看到 Google 的凭证帐号&密码啰，分别复制起来。
Step3：Google 凭证贴上&浏览成果
前往 WordPress 后台，回到 Super Socializer > Social Login 社群登录，将 Google 的 Client ID & Secret 分别填上，然后储存。
前往 WordPress 前台的会员登入&注册页面，就会发现 Google 快速登录功能，已经出现啦！
这样访客就能使用 Google，快速注册会员啰。
以上的登录、注册页面是 WooCommerce 默认提供的版型，如果你有用页面编辑器像是 Elementor，自行定制设计登录、注册页面，也可参考 Elementor 表单设计 相关章节。
好啰，以上就是使用 Google 社群登录 / 注册功能，详细流程教程。
4. Social Sharing 社区分享
Super Socializer 还有整合社群分享功能，有超过 100 种社群软件分享，以来说常看到的 Facebook、Line 分享等 .. 都有涵盖在里面。
这章节，来教大家使用这项功能。
首先，前往 Super Socializer > Social Sharing（社群分享），将 Enable Social Sharing 社群分享功能打开。
Theme Selection 样式设定
这里有分为 Standard interface theme（一般接口）、Floating interface theme（浮动界面）这两种的样式调整。
可调整社群分享Icon的形状、尺寸、颜色、计数显示位置等..。
Standard Interface 一般接口
Standard interface（一般界面）的社群分享位置，通常就是在文章、页面的头部或尾部，所出现的分享功能。
这里就是相关设定的地方。
- Enable Standard sharing interface：是否开启社群分享功能（一般接口）。
- Target Url：点击分享后，会分享哪一个页面。 用默认值即可，是分享当前页面。
- Title：是否帮分享功能取个名字。
下图红色框内的社群，是实际会在网站上显示的分享按钮，也能拖曳进行排序，只需勾选自己想要的社群即可。
至于 Select Sharing Services，这是类似按赞的功能，因为这我比较少用，所以就没勾选。
可调整显示位置、在哪一些页面显示、是否显示分享数量等 ..。
- Position with respect to content：社群分享的显示位置，在网站上方 or 下方（这会搭配下面的 Placement 动作）。
- Placement：设定哪些地方会显示分享按钮。 上图我是勾选 Posts（文章）、Category Archives（分类列表）、WooCommerce Product Page（单一商品页），会显示分享按钮。
- Show share counts：显示单一社群分享数量。
- Show total shares：显示全社群加总分享数量。
- Enable ‘More’ icon：显示更多分享的按钮。
好啰，来看其中一页的成果（还有其他上面有勾选的页面，也会显示），果然在单一商品页面，出现了社群分享按钮！ 太棒了！
Floating Interface 浮动接口
Floating Interface （浮动界面）的社群分享位置，是在网站侧边栏显示。
这里比较重要的是，Enable Floating sharing interface 为是否开启社群分享功能（浮动界面），如果需要就打勾，反之就关闭。
我这边贴上自己的相关设定，但实际设定还是以个人需求为主（下图）。
我主要是在 Homepage（首页）、Pages（页面），这两个地方显示浮动式的社群分享。 因为在其他地方，大致都已经使用一般式的社群分享显示，就不用再重复出现。 更多 文章和页面差别。
完成后，记得储存嘿，就可以到 WordPress 前台浏览成果啦~
再来，比较特别是社群分享（浮动界面）在电脑版时，会在网站侧边栏显示，反之在手机版时会出现在网页底端，这是良好的设计，比较符合用户习惯。
另外看到的是手机版的社群分享界面。 好啰，这样就大功告成了！
5. Social Commenting 社区留言
Super Socializer 还提供了一个 Social Commenting 社群留言 功能，让访客不只能用 WordPress 默认的留言方式，也能使用社群留言方式，像是常看到的 Facebook 留言。
前往 Super Socializer > Social Commenting，把 Enable Social Commenting 开启，就能使用社群评论功能了。
- Order of tabs in commenting interface：留言类型排序。 支持 WordPress 默认留言、FB 留言、Disqus 留言，要优先显示的就放前面，用「 ， 」进行区分，也可只输入单一值。
- Comment area label：评论区块的标题。
- Enable Social Commenting at：允许在哪显示社群留言功能。 支持 Posts 文章、Page 页面、Product 商品等 ..。
- Labels：可设定中文，方便辨认。
除此之外，当页还能做 Facebook 留言表单的样式调整，有需要再调整即可。
另外，如果想在网站加上联络表单等 ..，增加访客互动率，可参考 WordPress 表单制作 插件。
6. 社群小工具（含社群追踪）
Super Socializer 有提供多种网站小工具可用，像是社群追踪、社群登录、社群分享等 ..，都能放入侧边栏使用。 更多 WordPress 后台教程。
前往 WordPress 外观 > 小工具，有 Super Socializer 开头的工具都是。
如此一来，网站的整体社群功能，就变得更加强大啦！
常见问题
Super Socializer 是什么？
Super Socializer 是一款优质的社群插件，主要包含三大功能，分别是「社交登录 」、「 社交分享 」、「 社交评论 」，一款插件就能搞定这些事情，简单利落！
Super Socializer 插件有什么特色呢？
1. 支持多种社群快速注册+登入功能（像是 Facebook、Google、Line .. ）。 更多开启 Line 快速登入。
2. 可在 WordPress 登入、注册、评论表单 ..，启用社群登录功能。 更多 如何强制访客导向注册/登录页面。
3. 可在 WooCommerce 结帐页面、客户登录表单上，启用社群登录功能。
4. 超过 100 种社群软件的分享，且支持计数功能。
5. 还有更多 ..
Super Socializer 有支持 WooCommerce 电商吗？
是的。 Super Socializer 不论社群快速登入、社群分享等 ..，在电商页面都可看到它的发挥。
原文链接：https://www.itaoda.cn/blog/11441.html，转载请注明出处。
评论0