facebook-share(分享)

Facebook-分享

Open Graph Protocol

og是一种新的HTTP头部标记,即Open Graph Protocol:

The Open Graph Protocol enables any web page to become a rich object in a social graph.

这种协议可以让网页成为一个“富媒体对象”。用了Meta Property=og标签,就是你同意了网页内容可以被其他社会化网站引用等,目前这种协议被SNS网站如Fackbook、 renren采用。SNS已经成为网络上的一大热门应用,优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率,2010年F8会 议上Facebook公布了一套开放内容协议(Open Graph Protocol),任何网页只要遵守该协议,SNS就能从页面上提取最有效的信息,并呈现给用户*。*

Facebook 和 Twitter 上的分享

Facebook提供给开发人员很多选择,可以根据网站内容来设置一个分享的网页如何显示在它的时间轴上。除非特别说明,否则每个网站会被默认成一个“网站website”。

Twitter同样有很多的方式格式化分享的网页并显示。

每个分享的网页都有几个突出的属性:

  • 一个突出的图像
  • 一个突出的标题
  • 一段简短描述
  • 一个网站域名

专有的 Tags

我们怎么指定这些属性? 用 tags 。当一个链接被分享的时候, Facebook 和 Twitter都会先获取到相关的网页,读取它的 tags 来展现指定的信息。

Facebook利用Open Graph协议使用tags,这是一个网页的分类系统,扩展自已经被定义在了HTML5中的tags。你可以在 Open Graph 网站中查看到tags 的一个完整的列表。这么多选择可能会有点吓人,但是实际上只有4个是必需的:

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm"> 

Twitter有自己的tags,和 Open Graph 协议很相似, 但是使用了“twitter”前缀取代了“og”。至于Facebook, 只有一些是被要求的。我们从Twitter上请求的显示格式的类型也要被定义:

<meta name="twitter:title" content="European Travel Destinations ">
<meta name="twitter:description" content=" Offering tour packages for individuals or groups.">
<meta name="twitter:image" content=" http://euro-travel-example.com/thumbnail.jpg">
<meta name="twitter:card" content="summary_large_image"> 

Facebook标准对象属性

名称描述必需
og:url对象的URL,用作规范URL。通常与放置属性标记的页面相同的URL。它不应包含任何会话变量,用户标识参数或计数器。始终使用此标记的规范网址,或者喜欢和分享将分布在网址的所有变体中。
og:title对象的标题,标题或名称。
og:description对象的简短描述或摘要。
og:image对象图像的URL(标准的URL)。它应该至少为600x315像素,但最好是1200x630或更大(最多5MB)。保持接近1.91:1的宽高比以避免裁剪(不按照这个比例,图片会变裁剪)。游戏图标应为方形,至少600x600像素。og:image如果您有多个可用分辨率,则可以包含多个标记。如果在发布后更新映像,请使用新URL,因为映像是基于URL缓存的,否则可能不会更新。
fb:app_id该网站应用的Facebook应用ID。
og:type在App Dashboard 的Action Type部分中找出对象的类型。选择对象并og:type在“ **高级”**下找到它。一旦对象在故事中发布,其类型就无法更改。
og:locale对象属性使用的语言区域设置。默认值为en_US。
og:video对象的视频的URL。如果指定多个og:video,则og:video:type每个视频都需要。要使视频在线播放,请参阅视频类型参考。视频需要og:image在新闻Feed中显示标记。
og:determiner出现在故事中对象之前的单词(例如“煎蛋”)。该值应该是一个字符串,它是Enum {a,an,the,“”,auto}的成员。当选择“自动”时,Facebook将在“a”或“an”之间进行选择。默认为空。

Twitter卡片属性

名称描述必需
twitter:card必须设置为“摘要”的值
twitter:siteTwitter @username卡应归功于。
twitter:title相关内容的简明标题。平台特定行为:iOS,Android:在时间轴和扩展的Tweet中截断为两行;Web:在时间轴中截断一行并展开Tweet
twitter:description简要概述内容以适合在推文中呈现的描述。您不应该重复使用标题作为描述,或使用此字段来描述网站提供的一般服务。平台特定行为:iOS,Android:不显示;Web:在时间轴中截断三行并展开Tweet
twitter:image表示页面内容的唯一图像的URL(标准的URL)。您不应使用通用图像,例如您的网站徽标,作者照片或跨越多个页面的其他图像。此卡的图像支持1:1的宽高比,最小尺寸为144x144或最大为4096x4096像素。图像大小必须小于5MB。图像将在所有平台上裁剪为正方形。支持JPG,PNG,WEBP和GIF格式。仅使用动画GIF的第一帧。不支持SVG
twitter:image:alt图像的文本描述,向视力受损的用户传达图像的基本性质。最多420个字符。

协调Tags

虽然有很多多余的Tags并没有什么危害。 但是为了我们的目的, 而且为了简洁起见, 我们可以利用这个事实:Twitter允许我们使用它自己的Tags替代 Open Graph。所以,除了有必要指定显示格式, Twitter自定义的Tags其实并不需要。以下可以被认为是能满足让网页在社交媒体中被分享所需的最少的Tags

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image"> 

协调图像的准则还是很简单的: 遵从Facebook的建议,最小尺寸 600x315 像素,宽高比 1.91:1, 但是还要遵守Twitter规定的文件大小不超过5MB的要求,不支持SVG格式。

验证 Tags有效性

如果你对削减成这五个标签的合法性表示怀疑的话,我们可以使用Facebook分享调试器 和 Twitter卡片校验器。这两个工具都会获取部署到Tags相关的公共服务器上的网页,并且显示它被分享后的样子,也会列出一些错误和提供修改建议。

PS:另一个Facebook分享调试器(个人感觉更好用)

额外Tags补充说明

Facebook 文档推荐了一个额外的Tags,尽管这不是必需的。这个Tags指示了被分享网页所属的网站的名字:

<meta name="og:site_name" content="European Travel, Inc.">

Twitter也推荐了另外一个Tags ,同样也不是必需的:

<meta name="twitter:image:alt" content="Alt text for image">

这个标签为视觉障碍患者提供了替代的图片描述。

Tags最后标注

要重申的是,当你看Facebook 和 Twitter 关于分享网页的文档时,会有很多其他的Tags用来指定不同类型的内容。但是一般来说,以下这些就够用了:

<!--  必需的 META Tags -->

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">

<!--  非必需,但是推荐的 -->

<meta name="og:site_name" content="European Travel, Inc.">
<meta name="twitter:image:alt" content="Alt text for image">

<!--  非必需,但是分析要用的 -->

<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@website-username"> 

###Facebook share example

1、Timeline(时间线)-分享链接

格式:https://www.facebook.com/sharer/sharer.php?u=分享地址(建议这种格式)

example:

<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.baidu.com" target="_blank">share-facebook</a>
window.open("https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.baidu.com","_blank");

2、Timeline(时间线)-分享链接

格式:https://www.facebook.com/dialog/feed/?app_id=应用的app_id&link=分享地址

example:

<a href="https://www.facebook.com/dialog/feed/?app_id=166193257232747&link=https%3A%2F%2Fwww.baidu.com" target="_blank">share-facebook</a>
window.open("https://www.facebook.com/dialog/feed/?app_id=166193257232747&link=https%3A%2F%2Fwww.baidu.com","_blank");

3、Timeline(时间线)-分享图片

example:

<a href="https://www.facebook.com/dialog/feed/?app_id=166193257232747&link=&name=&picture=https%3A%2F%2Fimages-na.ssl-images-amazon.com%2Fimages%2FI%2F41t3LIY%2BWbL.jpg" target="_blank">share-facebook-messenger</a>
window.open("https://www.facebook.com/dialog/feed/?app_id=166193257232747&link=&name=&picture=https%3A%2F%2Fimages-na.ssl-images-amazon.com%2Fimages%2FI%2F41t3LIY%2BWbL.jpg","_blank");

4、Facebook Messenger(消息分享)

example

<a href="https://www.facebook.com/dialog/send?app_id=166193257232747&link=https%3A%2F%2Fwww.baidu.com&redirect_uri=https%3A%2F%2Fwww.baidu.com" target="_blank">share-facebook-messenger</a>
window.open("https://www.facebook.com/dialog/send?app_id=166193257232747&link=https%3A%2F%2Fwww.baidu.com&redirect_uri=https%3A%2F%2Fwww.baidu.com","_blank");

5、Facebook Messenger(消息分享)-URL Scheme

<a href="fb-messenger://share/?link=https%3A%2F%2Fwww.baidu.com" target="_blank">share-facebook-messenger</a>

Twitter share example

1、Tweet(发推)

格式:https://twitter.com/intent/tweet?url=分享地址&via=分享人(可以@)&text=分享内容

example:

<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.baidu.com&text=Hello%20world" target="_blank">share-twitter</a>
window.open("https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.baidu.com&text=Hello%20world","_blank");

2、Direct Messages(私信)

格式:https://twitter.com/messages/compose?recipient_id=接收者的推特ID&text=分享内容

example:

<a href="https://twitter.com/messages/compose?recipient_id=3805104374&text=Hello%20world" target="_blank">Twitter Message @furni</a>
window.open("https://twitter.com/messages/compose?recipient_id=3805104374&text=Hello%20world","_blank");
<a href="https://twitter.com/messages/compose?text=Hello%20world" target="_blank">Twitter Message</a>
window.open("https://twitter.com/messages/compose?text=Hello%20world","_blank");

3、Tweet(发推)-URL Scheme

<a href="twitter://post?text=Hello%20world" target="_blank">share-twitter</a>

4、Direct Messages(私信)-URL Scheme

<a href="twitter://messages/compose?recipient_id=3805104374&text=Hello%20world" target="_blank">Twitter Message @furni</a>
<a href="twitter://messages/compose?text=Hello%20world" target="_blank">Twitter Message </a>

特别注意:

  1. 以上分享需要在分享的页面上进行相应分享信息的配置
  2. 同时分享链接中的分享地址和文本必须是URL编码的。

参考:

  1. https://www.zcfy.cc/article/the-essential-meta-tags-for-social-media-css-tricks-658.html
  2. css-tricks.com
  3. Facebook分享调试器:https://developers.facebook.com/tools/debug/sharing/
  4. Facebook分享调试器:https://developers.facebook.com/tools/debug/og/object/
  5. Twitter卡片校验器:https://cards-dev.twitter.com/validator
  6. Facebook对象属性:https://developers.facebook.com/docs/sharing/opengraph/object-properties
  7. Twitter卡片属性:https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值