所有分类
  • 所有分类
  • WP插件Pro
  • HTML模板
  • 微信小程序模板
  • 源码

如何使用WooCommerce 会员快速登录 / 注册+社群分享

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

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 是什么?

WordPress 社群登录注册: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 证书帐号&密码

前往 WordPress 前台的会员登入&注册页面,就会发现 Facebook 快速登入功能,已经出现啦!

FB 社群登录功能显示

除此之外,在结账流程也会出现社群登入功能,这也是许多电商主爱用的功能之一。

好啰,以上是演示 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 控制台,点击“ 创建工程 ” 。

新增 Google 项目

帮项目取个名字,然后“ 建立 ” 。

项目命名+建立

确认自己是在刚新建的项目底下,前往「API 和服务 > OAuth 同意画面 」。

Google 快速登入 / 注册,申请流程

User Type 选择“ 外部 ”,然后点“ 创建 。

Google 快速登入 / 注册,申请流程

设定应用程序名称、电子邮件、标志等 ..。

Google 快速登入 / 注册,申请流程

参考下图输入自己的网站网址,有关隐私权&服务条款页面,如果网站上没有此页面,就自行新增然后再来这边输入即可。

授权网域就输入自己的网站网址。

Google 应用程序,注册/ 申请

前往“ 证书 ”,点击“ 创建证书 > OAuth 客户端 ID 。

Google 应用程序,注册/ 申请

依照下图进行输入(下面有细部说明),完成后“ 创建 。

Google 应用程序,注册/ 申请
  • 应用程序类型:选择「网页应用程序」。
  • 名称:可输入你的网站名称或是公司名称。
  • 已授权的重新导向 URI:输入网站域,需包含 http:// 或 https:// 开头。 网域尾端不需要尾端斜槓。 输入网址后,记得直接按 Enter,否则不会保存。

最后就会看到 Google 的凭证帐号&密码啰,分别复制起来。

复制 Google 登入凭证

Step3:Google 凭证贴上&浏览成果

前往 WordPress 后台,回到 Super Socializer > Social Login 社群登录,将 Google 的 Client ID & Secret 分别填上,然后储存。

WordPress 社群登录注册 :填上 Google 证书帐密

前往 WordPress 前台的会员登入&注册页面,就会发现 Google 快速登录功能,已经出现啦!

这样访客就能使用 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的形状、尺寸、颜色、计数显示位置等..。

WordPress 设置社区共享功能(仅部分截图)

Standard Interface 一般接口

Standard interface(一般界面)的社群分享位置,通常就是在文章、页面的头部或尾部,所出现的分享功能。

这里就是相关设定的地方。

Standard interface theme 标准接口,相关设定
  • Enable Standard sharing interface:是否开启社群分享功能(一般接口)。
  • Target Url:点击分享后,会分享哪一个页面。 用默认值即可,是分享当前页面。
  • Title:是否帮分享功能取个名字。

下图红色框内的社群,是实际会在网站上显示的分享按钮,也能拖曳进行排序,只需勾选自己想要的社群即可。

至于 Select Sharing Services,这是类似按赞的功能,因为这我比较少用,所以就没勾选。

WordPress 多个社交分享功能

可调整显示位置、在哪一些页面显示、是否显示分享数量等 ..。

WordPress 社群分享,相关设定
  • Position with respect to content:社群分享的显示位置,在网站上方 or 下方(这会搭配下面的 Placement 动作)。
  • Placement:设定哪些地方会显示分享按钮。 上图我是勾选 Posts(文章)、Category Archives(分类列表)、WooCommerce Product Page(单一商品页),会显示分享按钮。
  • Show share counts:显示单一社群分享数量。
  • Show total shares:显示全社群加总分享数量。
  • Enable ‘More’ icon:显示更多分享的按钮。

好啰,来看其中一页的成果(还有其他上面有勾选的页面,也会显示),果然在单一商品页面,出现了社群分享按钮! 太棒了!

WooCommerce 商品分享功能,出现啰!

Floating Interface 浮动接口

Floating Interface (浮动界面)的社群分享位置,是在网站侧边栏显示。

这里比较重要的是,Enable Floating sharing interface 为是否开启社群分享功能(浮动界面),如果需要就打勾,反之就关闭。

WordPress 社群分享,设定浮动界面

我这边贴上自己的相关设定,但实际设定还是以个人需求为主(下图)。

我主要是在 Homepage(首页)、Pages(页面),这两个地方显示浮动式的社群分享。 因为在其他地方,大致都已经使用一般式的社群分享显示,就不用再重复出现。 更多 文章和页面差别。

Floating Interface 社群分享(浮动界面),相关设定

完成后,记得储存嘿,就可以到 WordPress 前台浏览成果啦~

再来,比较特别是社群分享(浮动界面)在电脑版时,会在网站侧边栏显示,反之在手机版时会出现在网页底端,这是良好的设计,比较符合用户习惯。

WooCommerce 社群共享,浮动界面(电脑版显示)

另外看到的是手机版的社群分享界面。 好啰,这样就大功告成了!

WooCommerce 社群分享,浮动界面(手机版显示)

5. Social Commenting 社区留言

Super Socializer 还提供了一个 Social Commenting 社群留言 功能,让访客不只能用 WordPress 默认的留言方式,也能使用社群留言方式,像是常看到的 Facebook 留言。

前往 Super Socializer > Social Commenting,把 Enable Social Commenting 开启,就能使用社群评论功能了。

设定 Social 社群评论功能
  • 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 是一款优质的社群插件,主要包含三大功能,分别是「社交登录 」、「 社交分享 」、「 社交评论 」,一款插件就能搞定这些事情,简单利落!

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
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

本站所发布的部分内容自网络,该部分内容限用于学习和研究目,有版权问题的,下载后的24个小时之内,从您的电脑中彻底删除。且不得将用于商业或者非法用途,否则,一切后果请用户自负,与本站无关。

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

× 发送
微信扫一扫

海量独立站商城

本站拥有海量商城独立站模版,涉及各行各业产品,提供免费安装部署,免费对接支付,提供物流发货解决方案,支持多语言、多币种。更多帮助,请直接在右下角联系客服

禁止将网站用于含诈骗、赌博、色情、木马、病毒等违法违规业务,本站将暂停一切售后。

温性提示

演示站服务器在国外,网站打开速度有点慢,请耐心等待

多功能、多行业外贸商城 wordpress商城WOOCOMMERCE

23+
行业模板