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
<https://developers.facebook.com/docs/sharing/webmasters#markup>
LinkedIn：https://developer.linkedin.com/docs/share-on-linkedin
<https://developer.linkedin.com/docs/share-on-linkedin>
Twitter：
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards

<https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards>
三个平台分别提供了链接测试工具，可以通过测试工具来检测分享效果
Facebook：https://developers.facebook.com/tools/debug/
<https://developers.facebook.com/tools/debug/>
LinkedIn：https://www.linkedin.com/post-inspector/
<https://www.linkedin.com/post-inspector/>
Twitter：https://cards-dev.twitter.com/validator
<https://cards-dev.twitter.com/validator>
* 不使用Open Grahp标签
当不使用标签时，社交平台会按代码从上往下的顺序去抓取img标签
，注意是代码顺序，不是页面展示顺序，还会抓取页面的TKD（title、keyword、description）标签用于分享内容

热门工具换一换