Facebook,Twitter,Linkedin分享

项目场景：

要求实现链接分享，分享到facebook,twitter,linkedin,whatsapp,instagram

问题描述：

直接分享链接出现无图片或链接报错的问题

whatsapp,instagram 均为手机版，whatsapp 无法注册测试，暂时放弃。instagram在网上搜索的结果为无法分享，也暂时放弃。

原因分析：

分享的链接要经过处理，否则会因为特殊字符的问题而报错。

无图片是因为大部分时候取的是分享链接的第一张可见图片，或者从meta中取的标签链接。

解决方案：

首先需要在对应的页面头部加上相应的meta（这里参考了其他的分享成功的网站的头部）

例如： How to Build a Website in 2021: 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: https://developers.facebook.com/tools/debug/?q=

Linkedin: Post Inspector

Twitter: https://cards-dev.twitter.com/validator (twitter的测试是内部的卡片制作，所以要登录)

PC分享

// 点击分享 TITLE URL SITE_URL SUMMARY SOURCE DESCRIPTION IMAGE SUBHEAD
    handleShare (index) {
      let item = this.iconList[index]
      let {TITLE, URL, SITE_URL, SUMMARY, SOURCE, DESCRIPTION, IMAGE, SUBHEAD} = this.urlParam
      let template = {
        linkedin: `http://www.linkedin.com/shareArticle?mini=true&ro=true&title=${TITLE}&url=${URL}&summary=${SUMMARY}&source=${SOURCE}&armin=armin`,
        facebook: `https://www.facebook.com/sharer/sharer.php?u=${URL}&title=${TITLE}&description=${DESCRIPTION}&caption=${SUBHEAD}&link=${URL}&picture=${IMAGE}`,
        twitter: `https://twitter.com/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 SUBHEAD
    handleShare (index) {
      let item = this.iconList[index]
      let {TITLE, URL, SITE_URL, SUMMARY, SOURCE, IMAGE} = this.urlParam
      let template = {
        linkedin: `http://www.linkedin.com/shareArticle?mini=true&ro=true&title=${TITLE}&url=${URL}&summary=${SUMMARY}&source=${SOURCE}&armin=armin`,
        facebook: `https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&sdk=joey&u=${URL}&picture=${IMAGE}&display=popup&ref=plugin&src=share_button`,
        twitter: `https://twitter.com/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')
    },