目录大纲
- 背景需求
- 一个示例
- 相关概念(开放图谱,分享调试器)
- 各种分享的注意事项
背景需求
将活动链接以及关键字分享到主流社交媒介,是推广活动的一种有效方式
如何定制化分享卡片【重点】
示例
在项目的入口html文件加入以下meta元素
这谢保证了本网站能够被分享的时候,爬虫爬到信息去定制化卡片1
2
3
4
5
6
7
8
9
10
11
12<!-- facebook, whatsapp, messenger, Linkedin-->
<meta property="fb:app_id" content="654251068316377" />
<meta property="og:url" content="http://if-sit-src.zatech.com/if/html-template-file/share/share.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="title haha" />
<meta property="og:description" content="description haha" />
<meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">
<meta name="twitter:title" content="my twitter title" />
<meta name="twitter:description" content="my twitter description" />
<meta name="twitter:image" content="@ViewBag.ShareImg" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="当前分享的链接--可要可不要" />在需要分享的按钮写点击事件
1
2
3
4
5
6// <button onClick={handleShare}>Facebook分享</button> ,以这个为例子,其他类似,只是不同分享途径的链接不同
// shareLink 是你想要分享的站点地址
function handleShare () {
let jumpLink = 'https://www.facebook.com/sharer.php?u=' + encodeURIComponent(shareLink)
window.open(jumpLink, '_blank')
}
原理和探索
开放图谱
Open Graph是一套由Facebook定义的mata协议,主要放在HTML的meta标签里,目前也可以在iOS和Android系统中使用。Open Graph想实现的目的也非常的简单,主要是期望使用人将互联网的各种事物联系起来。
开放图谱对象包含属性。属性是指以不同方式描述对象的元素,这些元素由开放图谱标签表示,或在使用对象 API 创建的对象中赋予属性。
facebook, whatsapp, messenger, Linkedin
1 | <!-- facebook, whatsapp, messenger, Linkedin--> |
1 | <!-- 推特 --> |
分享调试器
【Facebook】:https://developers.facebook.com/tools/debug/sharing/
【领英】:https://www.linkedin.com/post-inspector/inspect/
【微信】:微信开发者工具
示例: Facebook调试器结果(http://if-sit-src.zatech.com/if/html-template-file/share/share.html)
- 可以预览分享结果
- 可以看查看分享的配置警告
- 可以主动重新爬虫抓取
具体分享方式以及存在问题
链接:’https://www.facebook.com/sharer.php?u=‘ + encodeURIComponent(link)
图片抓取原则
- 无论是用网址分享还是调用sdk弹出分享框, 都会优先取所分享的网址的meta定制的信息;
- 所分享的网页如果没有相关的meta,那么则会用自己抓取符合的图片作为分享的logo
图片显示问题
如果图片过小,则预览时显示错误的图片,或不显示, 或显示正确设定的图片(不稳定)
解决:图片不小于200*200, 且比例最好是1.9 :1 [官方文档]
- 缓存问题
如果网站更换想要展示的缩略图,再次分享可能不起作用,展示的还是原来的图片
原因: facebook默认会有1个月的缓存期,在一个月内若没有重新爬取,则会显示旧的。所以当网站有变更缩略图,需要主动去调试工具重新抓取1次即可。
- 第1个分享的人,会看不到缩略图
因为爬虫需要先看到1次数据,所以默认第一次都不会显示定义的图片等
解决: 可以自己先进行一次分享(作为第1次分享)
- 如果是SDk调用, 需要在facebook开发平台做配置(添加分享网址…),以及发布开发平台上的项目
1 | window.fbAsyncInit = function() { |
messenger [打开app分享]
Step1: 定义og的开放图谱
Step2: fb-messenger协议调起系统应用:
‘fb-messenger://share?link=’ + encodeURIComponent(link) + ‘&app_id=1234’
注意: 图片大小和facebook规则一致
所分享的link需要编码
whatsapp [打开app分享]
Step1: 定义og的开放图谱
Step2: 协议,’whatsapp://send?text=’ + encodeURIComponent(link)
注意: 图片小于300kb,
**图片大于300 * 200 像素**
缓存问题,重试需要重启whatsapp应用
复制链接分享
利用浏览器可以复制表单元素,制造表单元素,将需要复制的链接作为value
1 | handleCopy (text, cbSuccess, cbError) { |
二维码
将所需要分享的链接生成二维码即可
- 开放图谱
1 | <!-- 推特 --> |
- 链接: ‘http://twitter.com/share?url=‘ + link
链接形式: og开放图谱 + 链接
'[http://www.linkedin.com/shareArticle?url=](http://www.linkedin.com/shareArticle?url=)' + link
SDK: 发起POST 请求, 官方有配置参数说明https://api.linkedin.com/v2/ugcPosts
两种形式均可实现定制化
表现形式:在pc自动调起网页
在h5自动调起App
使用: <script>脚本 + 链接
脚本: <script type="text/javascript" async src="[//assets.pinterest.com/js/pinit.js](notion://assets.pinterest.com/js/pinit.js)"></script>
链接:'[https://www.pinterest.com/pin/create/button/?url=](https://www.pinterest.com/pin/create/button/?url=)' + link
新浪微博
链接: '[http://v.t.sina.com.cn/share/share.php?appkey=4120396272&title=](http://v.t.sina.com.cn/share/share.php?appkey=4120396272&title=)' + encodeURIComponent(jumpTitle)+ '&url=' + encodeURIComponent(link)
暂时缩略图无效
qq空间
注意: 需要在跳转链接后面直接加配置参数, 不识别og开放图谱
**title, pics, summary 参数 来实现定制化功能**
链接: ‘https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + link + ‘?sharesource=qzone&title=haha&pics=’ + imgLink + ‘&summary=desc’
break;
Tumblr
可以读开放图谱设置定制化分享信息
jumpLink = ‘http://tumblr.com/widgets/share/tool?canonicalUrl=‘ + encodeURIComponent(link)
可配置官方按钮+分享计数
参考官方链接: https://www.tumblr.com/docs/zh/share_button
不支持开放图谱
需要在链接后面配置参数:resubmit && title
不支持图片,仅分享标题和链接
jumpLink = ‘https://www.reddit.com/r/gaming/submit?url=‘ + encodeURIComponent(link) + ‘&resubmit=true&title=’ + ‘hello, test title’
微信 / 朋友圈 /qq
分享的链接必须是js安全域名里中所包含
Step1: 需要企业号,需确保已获得使用对应JS接口的权限
Step2: 配置可访问的域名
Step3: 代码层面
1,引入微信JS-SKD
2,定义分享卡片参数 //参考微信公众平台
3,wx.config({}) //配置微信公众平台的必填参数
4,wx.ready(function(){ // wx.调用对应的方法 }) // 参考微信公众平台
1 | wechat (link) { |
总结
在各种分享中可能会遇到以下问题:
- 定制化图片不显示
- 缓存机制导致更新定制化内容再次分享没有更新效果
- 链接分享和SDK之间的选择
- SDK权限问题
- 一定要使用分享调试器去进行调试,或者更新后的重新抓取
参考
【facebook】https://developers.facebook.com/docs/sharing
【微信】http://caibaojian.com/wxshare-config.html