设置Facebook社交一键登录独立站
在这个网络时代,每个人都有很多很多的帐号密码,如果能在自己的跨境独立站上添加社交平台按钮,让用户一键注册并登录你的网站,这是一个相当明智的做法, 在全球无数的社交平台中数Facebook(脸书)最大,今天这篇文章主要是介绍如何通过插件给wordpress+woocommerce独立站添加facebook社交登录按钮。
因为社交登录插件比较多,我主要以Super Socializer为例来说明此方法,至于更多的社交登录插件请参考:6款WordPress+WooCommerce社交登录插件。
首先你需要一个facebook帐号,没有的话就新注册一个,不过你可能会碰到打开facebook网站的时候404,做跨境电商和外贸的都知道,深圳这边做外贸的有专门的解决办法。
1. 创建新的Facebook开发应用(APP)
进入facebook的开发者工具页面:Facebook for Developers,点击菜单中的应用,如果你已经登陆了facebook帐号,会直接跳到你的开发者应用首页,如果没有的那弹出页面登陆或者注册。我是用的中文网页,如果你是用的英文版的话差不多。

在开发者应用页面肯定是空空如也,直接点击创建应用按钮建立新的应用

然后会弹出一个窗口让你选择应用的用途,选择第三种:打造关联体验(Build Connected Experiences),然后点继续。

仍然是在弹窗里面需要你输入一个应用名称,以及应用联系邮箱,还有一个商务管理平台,这个平台是管理的facebook专业和广告的平台,没有的话跳过,点击创建应用。

然后会跳出google的人机验证,

验证好提交,应用创建好了,这时候你在开发者应用首页就会看到一个新的应用。
2. 设置Facebook社交登录应用
创建好的新应用并不能用,还需要设置。点击新建的应用,进入,首页你会看到以下页面:为应用添加产品->Facebook 登录,设置。

接下来的会让你选择一个平台,对于网站的话,选WWW,用于移动APP的话选其他相应的平台。

点击后第一步就是输入你网站的网址,需要到https://,最好不要用http://,没有的话给网站安装SSL证书,国外的http网站基本行不通了。

点击save保存,之后不需要点继续,你点也行,只是这些步骤不适合非IT人员,看看就好了。从面板的左侧设置->基本,你会看到应用编号(即APP ID),已经应用密匙(APP Secret),这两项就是我们需要填到wordpress社交登录插件中的东西,不过还要继续设置,这两项才有效果。往下看。

需要填写的东西如下,而且一样不能少:
- 名称 – 已经自动填入了
- 应用域名 – 如果你用www开头的网站那么没有带www的也要填,如图所示
- 联系邮箱
- 隐私政策页面 – privacy policy
- 服务条款 – terms & conditions, 更多的页面设置请参考此文:一个完整外贸独立站必须要有的页面。
- 用户数据删除 – 有两个选项,一个是说明页面,一个是删除执行页面,这一条是为了配合欧盟区GDPR的,你可以设置一个页面高速用户如何删除他们在你网站的用户资料,然后将此页面填在此处,这些页面一定要有,不然应用建立不成功
- 应用用途 – 选自己
- 跳过验证
- 数据安全联系方式,按实际的填就是,为何我这里显示香港,那是非死不可自己定位IP的
- 输入网址
所有信息填好后,保存更改,如果哪一项没有的话,会保存不成功。 保存好后继续下一步。
3. 添加有效的OAuth重定向URI
从侧边栏的产品->facebook登录->设置进入OAuth客户端授权设置。

这个里面主要是要添加有效的OAuth跳转URI,这里以Super Socializer为例(其他插件这一步请参照插件试用说明),比如你的首页网址是https://example.com,那么在网址后面加上/?SuperSocializerAuth=Facebook,最终需要填入的URI是:https://example.com/?SuperSocializerAuth=Facebook,这里可以不用https,http也可以,然后再强制启动HTTPS这里选是就行了。其他都按照图片设置,保存更改。
4. 开启Facebook社交登录应用
设置基本完成了,但是还要开启应用才有效果,其实你在上文的图片中肯定看到一个开发中的按钮,对就是点击这个按钮激活应用,不过,假如你之前需要填写的隐私政策等页面没有的话,是激活不了的。

激活后,你回到你的应用首页会发现应用按钮已变成绿色。
5.复制应用的ID和密匙到插件,设置插件
回到Wordpress中,打开安装的插件,没有的话,先到插件->Add new中搜索需要的插件安装,或者你有购买其他付费应用的话,上传插件安装激活,6款WordPress+WooCommerce社交登录插件。
仍然以Super Socializer为例,从wordpress左侧Super Socializer->social login->Master Control勾选Enable Social Login,然后会有相关设置显示出来:
Basic Configuration

如上图,选择你需要的社交平台,勾选,然后复制facebook应用中的APP ID和Secret黏贴到相应的位置:

你需要点击显示密匙,然后复制粘贴,保存设置。
Advanced Configuration中主要是设置社交登录按钮摆放的位置,请按照你自己的需求设置,GDPR设置中勾选Enable GDPR opt-in,然后相关内容摆放位置请根据自己需要,其他的需要的页面比如隐私政策,服务条款等等按实际填写即可。所有设置好后点击保存更改。
结语
在wordpress+woocommerce网站上添加Facebook一键登录按钮差不多就是这样了,你可以打开自己的网站然后用你自己的帐号试一下。你在facebook开发页面上添加的应用是适合任何类型的网站的,只是插件或者调用接口不同,如果你的域名以后换成其他类型的网站,你同意可以在第4步这里调整重定向URI来激活Facebook社交登录APP。