网页分享至Facebook，Twitter，LinkedIn，WhatsApp，邮箱总结

最近我们做了个国际业务的项目，里面有个需求是要将网页分享到各大社交平台，Facebook,twitter,linkedin,whatsapp ,还有邮件分享，这些其实没什么难度，只是有点繁琐，要去翻他们每个平台的开发者文档，特此整理一下，以防以后还要用到

<ul>
    <li class="facebook">Facebook</li>
    <li class="twitter">Twitter</li>
    <li class="linkedIn">LinkedIn</li>
    <li class="whats">Whatsapp</li>
    <li class="email">E-mail</li>
</ul>

  <!-- facebook sdk引入 -->
<script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v11.0&appId=你的appid&autoLogAppEvents=1" type="text/javascript">lang: FACKBOOK_LANG[i18n]</script>
  <!-- linkedin sdk引入 -->
<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>

Facebook

facebook是其中相对繁琐一点点的，要先去申请个appid，这部分还是看文档

拿到appid后，就可以像上面那样，直接引入，把appid当做参数拼接在url后面，按道理这样就可以了，但是我在开发中有事会遇到一些报错导致功能不正常，后来查了一些资料才发现是这种引入的方式的缺陷，所以后来又换成了另一种方式:

(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = `https://connect.facebook.net/en_US/sdk.js`;
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'))

FB.init({
    appId            : '',
    autoLogAppEvents : true,
    xfbml            : true,
    version          : 'v12.0'
  });

我们这个项目比较传统，是用jquery写的

    // 分享到facebook
    $('.facebook').click(function() {
        const text = `分享的文案`
        const link = location.href // 分享的页面链接，特别注意这里不需要encode
        FB.ui({
          method: 'share',
          href: link,
          quote: text
        }, function(response){})
      }
    )

Twitter

// 分享到twitter
      $('.twitter').click(function() {
          const text = `分享的文案`
          const link = location.href // 分享的页面
          window.open(`https://twitter.com/intent/tweet?text=` + encodeURIComponent(link)) 
        }
      )

Linkedin

// 分享到linkedin
      $('.linkedIn').click(function() {
          let _href = "https://www.linkedin.com/shareArticle?mini=true";
          const text = `分享的文案`
          const link = location.href // 分享的页面
          _href += "&title=" + text;//分享标题
          _href += "&url=" + encodeURIComponent(link);//分享链接
          window.open(_href);
        }
      )

Whatsapp

      // 分享到whats
      $('.whats').click(function() {
          let _href = "https://api.whatsapp.com/send?";
          const text = `分享的文案`
          const link = location.href // 分享的页面
          _href += "&text=" + text;//标题
          _href += "&url=" + encodeURIComponent(link);//链接
          window.open(_href);
        }
      )

Email

      // 分享到email
      $('.email').click(function() {
          const subject = `分享主题`
          const body = `分享正文`
          window.open(`mailto:?subject=${subject}&body=` + encodeURIComponent(body))
        }
      )

最后附上分享这部分的开发文档，凡是不懂先翻文档哈哈

Facebook

Twitter

Linkedin

Whatsapp

完事~