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）标签用于分享内容

Facebook、Twitter、LinkedIn分享按钮总结相关推荐

Web 网站页面的社交分享（Linkedin, Facebook, Twitter）
公司的web项目中,经常会有社交分享,这里简单说明下,方便后面开发人员理解. 分享的原理社交分享(linkedin, facebook, twitter)的本质就是请求其一个公开的页面.通过参数告诉 ...
分享google+facebook+twitter(Eclipse)
最近做游戏分享功能,遇到了这3大平台的分享,网上的介绍好多,但也不全,没有做到很详细的分享图片,文字,链接的介绍,所以我结合了一下,自己封装了3大平台的分享. 一,google+分享不需要申请,直接 ...
facebook，twitter的分享图片功能，facebook分享图片
前端日常踩坑达人如果你FaceBook和twitter的分享机制就知道,当你分享数据到他们的网站,会有爬虫机器人一直在读取并解析你的数据(meta里面的),所以怎么让你的meta数据被抓到? Vue ...
海外社交平台（Facebook Twitter WhatsApp）的分享
海外的社交平台没有像Mob一样的集成sdk,各有各的sdk,掉进几次坑里,在此记录一下.三个平台都可以同时分享图片.链接.文字. Facebook facebook分享的图片需是来自网络的图片url, ...
百度分享--分享按钮的实现
百度分享代码: <%@ page contentType="text/html;charset=UTF-8"%> <div class="bdsh ...
linkedin 分享_如何将您的LinkedIn个人资料添加到WordPress
linkedin 分享 Do you want to add your LinkedIn profile on your WordPress site? LinkedIn is a social ne ...
分享按钮--百度分享
一.概述百度分享代码已升级到2.0,本页将介绍新版百度分享的安装配置方法,请点击左侧列表查看相关章节. 二.代码结构分享代码可以分为三个部分:HTML.设置和js加载,示例如下: 代码结构如下: ...
html添加分享按钮,分享按钮-jQuery之家-自由分享jQuery、html5、css3的插件库
Overview: To list social accounts or share any page with 46 icons. 点击按钮开始分享: 选中下面红色的文字就会出现分享按钮: Hi! ...
9款经典华丽的CSS3分享按钮
如果你经常活跃在一些社交网站上,那么你肯定会看到过很多形式各异的分享按钮,目前由于HTML5和CSS3的普及,很多分享按钮也都应用了CSS3样式,甚至会有很多带有动画的CSS3分享按钮.本文就向大家介 ...

Facebook、Twitter、LinkedIn分享按钮总结

Facebook、Twitter、LinkedIn分享按钮总结相关推荐

最新文章

热门文章