100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Facebook Twitter Linkedin分享

Facebook Twitter Linkedin分享

时间:2021-01-22 05:55:42

相关推荐

Facebook Twitter Linkedin分享

项目场景:

要求实现链接分享,分享到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')},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。