不论是搭建品牌网站、购物网站制作等 ..,有许多类型的网站都需要有会员注册的功能,除了方便后续的购物流程,也能进一步留下访客资料,未来才有机会做再营销。
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.com
demo.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