facebook、twitter、facebook登录、whatsapp分享、微信分享

Posted 2023-02-19

参考技术A

所谓爬虫，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。

对于国外第三方的分享元素图谱，是写在 html 的 head 部分，分为以下几个：

facebook 分享官方英文文档

分享原理：告诉 facebook 你想要分享的 url，facebook 爬虫机器人会主动向这个 url 发起爬虫操作，拿到对应的 html 解析，分别拿到相应的 html 元素图谱。所以，内网，是无法拿到相应的 html 元素图谱的，所以 内网分享不会有图

分享示例：

比如，分享的地址是 https://www.luotuxiu.cn/ ，则设置App Domains 为 luotuxiu.cn

方式 1：超链接分享( 注意 url 需要 encode )

方式 2：接入 facebook sdk（前提是先引入 facebook sdk js，并做初始化）

https://developers.facebook.com/tools/debug/

比如输入我的博客地址，可以看到以下截图：

可以对着上面的表格一一可以看到，facebook 一一解析了 html 的元素

facebook 登录英文文档地址

接入 facebook 登录需要引入 facebook sdk，共计需要 5 个步骤

Valid OAuth Redirect URIs：这个是回调地址，必填。也就是，你想要哪个网址使用 facebook 登录，就填哪个网址，一般来讲，填写通用地址接口，比如填写： https://www.luotuxiu.cn/ 即可，后面文件名可以不用填写。

登录完后，返回的 response 的示例：

一般拿着 accessToken 去做登录态也可以，有一个接口可以校验登录态是否生效

同时也有一个 get 请求可以校验 token 是否生效：

其中，input_token 是你要校验的 token，access_token 是在 facebook 后台对应的这个 app 的 token。如果正确，返回值如下：

分享原理和 facebook 是一样的，通过爬虫获取分享信息

官网文档： https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent

无需带上 appid 即可，注意，&url 对应的 value 值 需要 encode，hashtags 传的是话题（类似微博的话题）

注意，在手机端会自动识别所有元数据，同 facebook 是通过爬虫抓到数据，所以也需要和 facebook 一样设置所有的 title，image 等数据

https://cards-dev.twitter.com/validator

注意，这里和 facebook 一样，可能有 网站更新了但是分享的内容没有及时更新的 bug ，此时用这个工具重新 preview 一下即可，可以手动触发爬虫

分享原理和 facebook 是一样的，通过爬虫获取分享信息

注意，在手机端会自动识别所有元数据，同 facebook 是通过爬虫抓到数据，所以也需要和 facebook 一样设置所有的 title，image 等数据

分享原理是通过发送微信 jssdk api 获取分享信息

官方文档

注意，这里，签名的生成，需要后端去调用微信的 api，然后前端需要访问后端一个接口来返回每次的签名

更多精彩文章可以看 我的博客 ，如有错误，欢迎指正，共同进步