Share Link To Facebook & Twitter

对于分享到 facebook / twitter 的 link ，我们希望它的呈现方式更加 rich 一些

分享到 facebook 的 link

facebook 提供了一些特殊的 meta 标签供开发者使用：网站管理员 - 分享 - 文档 - Facebook for Developers

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

将这些标签加入到 web 页面中，设置其中的 content 为你需要的内容

当这个页面被分享到 facebook 时，就会显示「缩略图」、「标题」、「描述文字」

分享到 twitter

twitter 允许你将 link 显示为一个 card: Summary with large image — Twitter Developers

开发者可以根据自己的需要在 overview 里选择特定的 card 类型

例如我们使用 Summary Card With Large Image

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

注意：第一行里 twitter:card 的 content 是 summary_large_image

经过这样的设置之后，分享到 twitter 里的 link 会有一个「较大的缩略图」、「标题」、「描述」

体验小程序「简易记账」

关注公众号「特想学英语」

Share Link To Facebook & Twitter

分享到 facebook 的 link

分享到 twitter

为您推荐