Facebook、Twitter、LinkedIn分享按钮总结

Facebook、Twitter、LinkedIn都有分享按钮组件，可以通过点击按钮分享当前页面。

点击按钮后社交平台会得到当前页面的URL，然后会调用爬虫来抓取这个URL的信息，

这里有两种情况：

• 使用了Open Graph标签
  
  Facebook以及LinkedIn一般使用如下meta标签

  <meta property="og:title" content="My Shared Article Title" />
    <meta property="og:description" content="Description of shared article" />
    <meta property="og:url" content="http://example.com/my_article.html" />
    <meta property="og:image" content="http://example.com/foo.jpg" />

  Twitter可以使用og标签也可以使用Twitter自定义的标签，一般如下：

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@flickr" />
  <meta name="twitter:title" content="Small Island Developing States Photo Submission" />
  <meta name="twitter:description" content="View the album on Flickr." />
  <meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />

  也可以使用如下标签

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@nytimesbits" />
  <meta name="twitter:creator" content="@nickbilton" />
  <meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
  <meta property="og:title" content="A Twitter for My Sister" />
  <meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
  <meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />

  
  需要注意的地方：
  1、对于Facebook以及LinkedIn，og:image标签的url可以不带协议头，但Twitter必须携带协议头，否则会出现取不到图片的情况。
  2、对于Twitter不论使用以上哪种标签方式twitter:card是必须的，值有两种summary和summary_large_image，展示效果如下，我也很奇怪为什么summary_large_image的图那么小
  3、社交平台抓取到图片后需要将图片转存到他们自己的服务器上，然后才会在分享时出现，所以可能会出现某个链接首次分享时没有图片的情况
  
  
  具体可以参考文档
  Facebook：https://developers.facebook.com/docs/sharing/webmasters#markup
  LinkedIn：https://developer.linkedin.com/docs/share-on-linkedin
  Twitter：https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards
  三个平台分别提供了链接测试工具，可以通过测试工具来检测分享效果
  Facebook：https://developers.facebook.com/tools/debug/
  LinkedIn：https://www.linkedin.com/post-inspector/
  Twitter：https://cards-dev.twitter.com/validator
• 不使用Open Grahp标签
  当不使用标签时，社交平台会按代码从上往下的顺序去抓取img标签，注意是代码顺序，不是页面展示顺序，还会抓取页面的TKD（title、keyword、description）标签用于分享内容