Web 网站页面的社交分享 (Linkedin, Facebook, Twitter)
公司的web项目中,经常会有社交分享,这里简单说明下,方便后面开发人员理解。
分享的原理
社交分享(linkedin, facebook, twitter)的本质就是请求其一个公开的页面。通过参数告诉社交网站你需要分享的网页的网址,然后社交网站的爬虫会去爬取这个网址。显然,你分享的网页必须是可以匿名从公网访问的;爬虫爬取和谷歌,百度的爬虫是一个道理,只是各自算法不一样。
常用的社交网站的分享链接如下:
- Linkedin http://www.linkedin.com/shareArticle?url=https://www.okchem.com/instant-quote
- Facebook http://www.facebook.com/sharer.php?u= https://www.okchem.com/instant-quote
- Twitter http://twitter.com/share?url=https://www.okchem.com/instant-quote
更多参数可以参考相关文档,但是基本上这个参数就行了
分享内容定制
一般情况下,类似谷歌和百度的爬虫,会爬取title description (和SEO中的一样)还有图片等作为缩略展示。 因为各自算法的原因,并不是100%能保证你的title和description就会被展示出来;也不能保证你想要出现的图片就以一定会出现在缩略中。
如果想告知爬虫你的网页的title description和图片等,可以通过Open Graph Meta Tags 来指引爬虫。 具体可以参考http://ogp.me/, 详情请去百度和google。
示例:
<meta property="og:title" content="[Hot Item] Ce Approved Superfine Synthetic Graphite Spheroidization Grinding Mill"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://leap-tech.en.made-in-china.com/product/gBvQXLzMCKcJ/China-Ce-Approved-Superfine-Synthetic-Graphite-Spheroidization-Grinding-Mill.html"/>
<meta property="og:image" content="http://image.made-in-china.com/2f0j00sJdQPUDMngkI/Ce-Approved-Superfine-Synthetic-Graphite-Spheroidization-Grinding-Mill.jpg"/>
<meta property="og:site_name" content="Made-in-China.com"/>
<meta property="og:description" content="This site would be your best choice when sourcing from China. Their buyer service is professional and it offers third party transaction service to protect your money"/>
摘自网站http://leap-tech.en.made-in-china.com/product/gBvQXLzMCKcJ/China-Ce-Approved-Superfine-Synthetic-Graphite-Spheroidization-Grinding-Mill.html 通过og标签分别告知爬虫这个页面的title, url, image, description。 当页面有很多图片,可以通过og:image来告知社交网站采用哪张图片做缩略显示。
前面的描述中,都用了告知,引导。 就像谷歌爬虫一样,社交网站的爬虫也只是尊重你的页面的设置,但是他们更依赖自己的算法。所以并不会100% follow。
注意事项
在测试的时候很容易碰见,分享的时候没有看见缩略图,内容没更新等等问题。很可能和各自的缓存有关,也可能是你的页面的内容不对。
Facebook有调试工具:https://developers.facebook.com/tools/debug/sharing
Linked in 的分享说明参考:https://developer.linkedin.com/docs/share-on-linkedin# 注意最后提到的缓存。
Twitter的工具参考:https://cards-dev.twitter.com/validator
Web 网站页面的社交分享 (Linkedin, Facebook, Twitter)相关推荐
- web网站页面性能优化
Web前端的本质是:将信息快速并友好的展示给用户并能够与用户进行交互. 雅虎网站页面性能优化的34条黄金守则 http://www.mamicode.com/info-detail-139010.ht ...
- 海外社交平台(Facebook Twitter WhatsApp)的分享
海外的社交平台没有像Mob一样的集成sdk,各有各的sdk,掉进几次坑里,在此记录一下.三个平台都可以同时分享图片.链接.文字. Facebook facebook分享的图片需是来自网络的图片url, ...
- 分享google+facebook+twitter(Eclipse)
最近做游戏分享功能,遇到了这3大平台的分享,网上的介绍好多,但也不全,没有做到很详细的分享图片,文字,链接的介绍,所以我结合了一下,自己封装了3大平台的分享. 一,google+分享 不需要申请,直接 ...
- 为什么 Twitter 和 Facebook 的网站页面变得越来越像?
Twitter和Facebook这两个社交媒体平台在不同的领域取得了巨大的成功.Twitter以其独特的推文形式而闻名,而Facebook则以其广泛的社交网络和内容分享功能而著称. 然而,近年来,这两 ...
- axure 点击按钮弹出框_Axure 教程:web网站原型设计技巧的分享
分享个人在绘制PC端web网站交互原型中一些设计技巧,enjoy~ 技巧一:搭建导航框架页面 当自己还是一个小白时,开始着手设计web界面时,最容易犯的一个错误就是:基本每一个页面的绘制都是顶部导航. ...
- java8生成jsp页面内容组装到jsp中_JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署...
接上篇<JAVA WEB快速入门之环境搭建>,在完成了环境搭建后(JDK.Tomcat.IDE),现在是万事具备,就差写代码了,今天就来从编写一个JSP WEB网站了解JSP WEB网站的 ...
- ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理(15)之前台网站页面
源码下载地址:http://www.yealuo.com/Sccnn/Detail?KeyValue=c891ffae-7441-4afb-9a75-c5fe000e3d1c 本项目主要是一个素材的分 ...
- 手机端 html 怎么分享到朋友圈,【Web前端问题】移动web页面如何实现分享到微信、QQ等分享功能?...
移动web页面(浏览器打开的web应用,非App内置的Web页面)内有分享按钮,点击可分享到朋友圈,微信好友,QQ...... 据说是使用相关插件,求指导! 回答: 如果不是app内置web页面,只能 ...
- web应用程序和web网站_Web应用程序和移动应用程序的基本启动清单
web应用程序和web网站 by Ben Cheng 通过本诚 Web应用程序和移动应用程序的基本启动清单 (The Essential Launch Checklist for Web Apps a ...
最新文章
- unity中使用自定义shader进行光照贴图烘培无法出现透明度的坑爹问题
- Spring mvc集成log4j2
- Python中strip()、lstrip()、rstrip()用法详解
- “云智一体“全场景智能视频技术与应用解析白皮书下载申请
- CCPC秦皇岛gym102361A. Angle Beats
- 美团开源 Logan Web:前端日志在 Web 端的实现
- Color类提供的颜色
- 自己用as3实现的以多边形等几何模型为基础的碰撞系统 - 例子A
- Jquery 提交 乱码的问题
- SpringBoot系列(6)——使用AOP处理请求
- ibm x5服务器系统重装,IBM 3850 X5 Server安装Windows 2003步骤说明
- 周跃计算机网络安全基础,华图网校金领名师模块班:计算机基础知识
- 2022年湖北师范大学招生简章--成人高等教育高起专、专升本学历提升
- 中国电信物联网平台物理模型创建
- python产品管理系统_python实现超市商品销售管理系统
- 【归纳】对于S3C2440A芯片的认知和使用理论再学习
- PDF如何修改编辑文字?两种简单的方法分享给大家
- 5G发展的五大动力和四大挑战
- C++ 如何保留两位小数
- 微服务架构下的服务关联图