项目场景:
要求实现链接分享,分享到facebook,twitter,linkedin,whatsapp,instagram
问题描述:
直接分享链接出现无图片或链接报错的问题
whatsapp,instagram 均为手机版,whatsapp 无法注册测试,暂时放弃。instagram在网上搜索的结果为无法分享,也暂时放弃。
原因分析:
分享的链接要经过处理,否则会因为特殊字符的问题而报错。
无图片是因为大部分时候取的是分享链接的第一张可见图片,或者从meta中取的标签链接。
解决方案:
首先需要在对应的页面头部加上相应的meta(这里参考了其他的分享成功的网站的头部)
例如:How to Build a Website in : Complete Step-by-Step Guide
<meta name="twitter:card" content="summary" /><meta name="twitter:site" content="@nytimesbits" /><meta name="twitter:creator" content="@nickbilton" /><meta name="twitter:image" content="图片链接"><meta property="og:url" content="分享链接" /><meta property="og:title" content="标题" /><meta property="og:description" content="描述" /><meta property="og:image" content="图片链接" />
分享网站测试链接
ps: 如果发现还是无图,可以用分享网站测试一下(好像会重新获取缓存图片)
Facebook:/tools/debug/?q=
Linkedin:Post Inspector
Twitter:https://cards-/validator(twitter的测试是内部的卡片制作,所以要登录)
PC分享
// 点击分享 TITLE URL SITE_URL SUMMARY SOURCE DESCRIPTION IMAGE SUBHEADhandleShare (index) {let item = this.iconList[index]let {TITLE, URL, SITE_URL, SUMMARY, SOURCE, DESCRIPTION, IMAGE, SUBHEAD} = this.urlParamlet template = {linkedin: `/shareArticle?mini=true&ro=true&title=${TITLE}&url=${URL}&summary=${SUMMARY}&source=${SOURCE}&armin=armin`,facebook: `/sharer/sharer.php?u=${URL}&title=${TITLE}&description=${DESCRIPTION}&caption=${SUBHEAD}&link=${URL}&picture=${IMAGE}`,twitter: `/intent/tweet?text=${TITLE}&url=${URL}&via=${SITE_URL}`}let url = template[item.name]return window.open(url, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no')},
H5分享
// 点击分享 TITLE URL SITE_URL SUMMARY SOURCE DESCRIPTION IMAGE SUBHEADhandleShare (index) {let item = this.iconList[index]let {TITLE, URL, SITE_URL, SUMMARY, SOURCE, IMAGE} = this.urlParamlet template = {linkedin: `/shareArticle?mini=true&ro=true&title=${TITLE}&url=${URL}&summary=${SUMMARY}&source=${SOURCE}&armin=armin`,facebook: `/sharer/sharer.php?kid_directed_site=0&sdk=joey&u=${URL}&picture=${IMAGE}&display=popup&ref=plugin&src=share_button`,twitter: `/intent/tweet?text=${TITLE}&url=${URL}&via=${SITE_URL}`,// whatsApp: `whatsapp://send?text=${URL}`,// instagram: `instagram://app`}let url = template[item.name]window.open(url, '_blank')},