分享到Facebook

官方文档：https://developers.facebook.com/docs/sharing/webmasters/images/

第一步：在head标签中添加

  <meta property="og:url" content="分享链接的url" /><meta property="og:description" content="分享的description" /><meta property="og:image" content="分享图片的url" /><meta property="og:title" content="分享内容的title" />

第二步：调用下面的js打开分享弹窗

 window.open(`http://www.facebook.com/sharer.php?kid_directed_site=0&u=${分享链接的url}`, `_blank`, `width=600, height=450, toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, top=100,left=350`)

分享结果如图

注意

og:url 中的 url地址禁止携带参数，即 https://list.tmall.com/search_product.htm?key=tool 错误，若确实需要，请将参数放到目录层级中，如https://list.tmall.com/tool/search_product.htm。
og:image 中的url地址只要能满足让爬虫爬取即可，是否携带参数都可以。
分享到Facebook上的图片的最佳比例是1.91：1（矩形图）或1：1（正方形图），最小尺寸是200200，低于此尺寸图片将不显示，推荐尺寸是1200630或600*315。
分享图片无法自己定义显示尺寸，使用og:image:width与og:image:height也不行。
og:title 标签不存在时，则默认读取title标签里的内容作为分享的title。
因为分享的内容采用的是爬虫的形式获取，所以在html页面一开始就要存在og：标签，供爬虫，而不可以动态的通过js脚本追加。
对于动态生成html的情况，当采用的是前后端一体的方式，如.jsp、.asp、haml等形式时,在后端动态生成参数，然后传递给前端页面即可。
对于前后端分离的情况，需要后端配合动态生成html页面。
对于分享的链接能否正常显示，可以通过Facebook分享调试器进行调试，并查看结果。

分享到Twitter

官方文档：https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary
第一步：在head标签中添加

  <meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"><meta name="twitter:description" content="分享的description"><meta name="twitter:image" content="分享图片的url">

第二步：调用下面的js打开分享弹窗

 window.open(`https://twitter.com/share?url=${分享链接的url}`, `_blank`, `width=600, height=450, toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, top=100,left=350`)

分享结果如图

注意

twitter:url 标签可有可无，因为默认采用的是 https://twitter.com/share?url=${分享链接的url} 中的url，url地址禁止携带参数，即 https://list.tmall.com/search_product.htm?key=tool 错误，若确实需要，请将参数放到目录层级中，如https://list.tmall.com/tool/search_product.htm。
twitter:title 标签必须有，否则无法显示分享的内容
twitter:image 中的url地址只要能满足让爬虫爬取即可，是否携带参数都可以。
twitter:card 标签必须有，常用的summary_large_image表示以大图的排版展示，summary以小图的形式排版展示。其他的分享如视频等，请参考官方文档。
因为分享的内容采用的是爬虫的形式获取，所以在html页面一开始就要存在twitter：标签，供爬虫，而不可以动态的通过js脚本追加。
对于动态生成html的情况，当采用的是前后端一体的方式，如.jsp、.asp、haml等形式时,在后端动态生成参数，然后传递给前端页面即可。
对于前后端分离的情况，需要后端配合动态生成html页面。
对于分享的链接能否正常显示，可以通过Twitter分享调试器进行调试，并查看结果。

分享到Pinterest

官方文档：https://developers.pinterest.com/docs/widgets/save/?

在js中通过href打开

 window.open(`https://www.pinterest.com/pin/create/button/?url=${分享链接的url}&media=${分享图片的url}&description=${分享描述}`, `_blank`, `width=750, height=800, toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, top=100,left=350`)

分享结果如图

注意：

url 与 media 的url地址禁止携带参数，若media需要携带参数，则在url中不添加media参数，而采用爬虫的方式进行读取照片。
若分享时不携带media、description参数，则分享内容默认爬取分享页面的内容并展示。
description对应页面的meta中含 title属性的内容，如og:title，读取的是其content的内容，当head中不存在任何 :title 时，读取的是title标签。
media 默认读取的是页面内可读取的第一张照片，注意的是 twitter:image标记的照片无法读取，og:image的可以读取。
当同时存在分享到facebook或twitter时，可以共用他们标签中的数据。此时在js中只需添加url参数即可。

分享图文到Facebook、Twitter、Pinterest相关推荐

Web 网站页面的社交分享（Linkedin, Facebook, Twitter）
公司的web项目中,经常会有社交分享,这里简单说明下,方便后面开发人员理解. 分享的原理社交分享(linkedin, facebook, twitter)的本质就是请求其一个公开的页面.通过参数告诉 ...
国外第三方分享，包括Facebook,twitter,Instagram
1.facebook ,twitter等通过iphone自带的分享,首先导入Social.framework,然后导入 #import <Social/Social.h> 最后通过以下代 ...
android qq空间 sdk,Android中使用腾讯的SDK完成分享图文到qq空间
1.首先在腾讯开放平台中注册APP_ID,下载SDK并导入到应用程序 2.开始分享图文到qq空间 /** * 分享歌曲到qzone */ private void share2qzone() { fi ...
使用Intent完成一键分享图文
使用Intent完成一键分享图文最牛的效果是做到图文都可以发送,如下:: 上面的是用腾讯新闻界面的分享按钮发送的,包含分享.收藏.查看,以及一张封面图.标题和内容文字等布局. 本文并没有做到这个程度 ...
分享网页到FaceBook的问题
分享网页到FaceBook的问题由于项目中需要分享一个网页到社交App中,供C端用户使用.如分享到微信.Facebook.WhatsApp等. 分享到微信时很简单,只需要按照微信提供的分享SDK要求 ...
Cloud Computing：基于无影云电脑利用Python语言实现绘制“可爱小老虎”虎年快乐及无影云电脑简介、应用场景、使用体验(五步快速上手)分享图文教程之详细攻略
Cloud Computing:基于无影云电脑利用Python语言实现绘制"可爱小老虎"虎年快乐及无影云电脑简介.应用场景.使用体验(五步快速上手)分享图文教程之详细攻略目录无 ...
H5微信自定义分享图文链接（设置标题+简介+图片）——附源码
1. 最近突然发现微信"卡片式"分享链接变成了如下形式: 原来的是这样的: 后来也解决了,原来是部署域名换了,微信公众号的相关配置没有改造成的.微信的其他域名都可以写多个,唯独服务 ...
分享google+facebook+twitter(Eclipse)
最近做游戏分享功能,遇到了这3大平台的分享,网上的介绍好多,但也不全,没有做到很详细的分享图片,文字,链接的介绍,所以我结合了一下,自己封装了3大平台的分享. 一,google+分享不需要申请,直接 ...
IOS-海外版授权分享推送统计 Google FaceBook Twitter Instagram
目录备注 Google Google分享 Google推送 FaceBook FaceBook分享 Twitter Twitter分享 Instagram Instagram分享 SDK下载 UIW ...

分享图文到Facebook、Twitter、Pinterest

分享到Facebook

注意

分享到Twitter

注意

分享到Pinterest

注意：

分享图文到Facebook、Twitter、Pinterest相关推荐

最新文章

热门文章