Facebook、Twitter网页分享
Facebook分享
Facebook分享是爬虫页面HTML文件配置的分享内容
Twitter分享
基本同Facebook分享。分享图不可动态修改。
差别:js触发的分享,Twitter可以修改分享文案,Facebook不可以。
HTML head 内配置
<!--twitter分享资料获 start-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="分享标题">
<meta name="twitter:description" content="分享文案">
<meta name="twitter:image" content="分享图片绝对链接">
<!--twitter分享资料获 end--><!--facebook分享资料获 start-->
<meta property="og:url" content="页面正式上线地址">
<meta property="og:title" content="分享标题">
<meta property="og:description" content="分享文案">
<meta property="og:image" content="分享图片绝对链接">
<!--facebook分享资料获 end-->
如果需要点击按钮触发的情况,可以在对应按钮的点击事件中加入以下代码,触发分享页:
// 获取分享配置里面的分享信息
var sharePic = '图片地址'; // 分享图片地址
var shareTxt = '分享内容'; // 分享内容
var shareTitle = '分享标题'; // 分享标题// 分享路径,如果测试环境要测试的话,建议把地址换成测试地址,同样一定要加https和index.html
var url = '分享地址';
// 推特按钮 推特可动态修改分享文案
$(".Jtwitter").on("click", function () {window.open("http://twitter.com/share?url=" + encodeURIComponent(url) + "&text=" + encodeURIComponent(shareTitle +'\n'+ shareTxt) + "&display=popup&ref=plugin&src=share_button", "twitter", "height=500, width=750, top=" + ($(window).height() / 2 - 250) + ", left=" + (document.body.offsetWidth / 2 - 375) + ", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
});
// Facebook按钮 Facebook不可动态修改文案
$(".Jfacebook").on("click", function () {window.open("https://m.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(url) +"&description=" + encodeURIComponent(shareTxt) + "&title=" + encodeURIComponent(shareTitle) + "&display=popup&ref=plugin&src=share_button", "facebook","height=500, width=750, top=" + ($(window).height() / 2 - 250) + ", left=" + (document.body.offsetWidth /2 - 375) + ", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
});
PS:
1、页面的正式上线地址 协议一定要用https和加上index.html。
2、image 分享图片的绝对路径。
3、如果项目是有区分测试环境和正式环境的,在测试环境测试分享的时候,可以先将页面地址跟分享图片地址填成测试环境的地址。
纠错工具:
可用以下工具来测试查看分享或者刷分享缓存。
Facebook:https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Ftest.nie.163.com%2Ftest_html%2Fonmyoji%2Fclient%2Fe5278f48bf3c8c15%2F%23role_id%3D5a84693823e94a4954069d20%26server%3D21001Twitter:https://cards-dev.twitter.com/validator
Facebook、Twitter网页分享相关推荐
- 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, ...
- 前端H5各种qq,微博,fb,whatsapp等网页分享的链接
####前端H5各种qq,微博,fb,whatsapp等网页分享的链接(我用到过的,一点点汇总) 代码链接如下: <a href = "https://sns.qzone.qq.com ...
- web dialog 内嵌 图片_Unity游戏如何在iOS上调用Facebook原生对话框分享图片
原文发表于Unity中国论坛 ,如果对你有帮助请关注我! Unity游戏如何在iOS上调用Facebook原生对话框分享图片 - Unityunity.cn 手头上的一个游戏项目需要实现截屏并分享到 ...
- 微信网页分享(配合微信公众平台)
微信网页分享--配合微信公众平台 一. 准备工作 二. SpringBoot前后端不分离版本 三. SpringBoot+Vue前后端分离版本 源码下载地址 一. 准备工作 准备一个域名(微信分享出去 ...
- 微信公众号网页分享功能开发
现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的 ...
- 网页分享功能 支持 微信二维码 qq空间 qq好友 新浪微博 百度贴吧 豆瓣 人人...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
最新文章
- iOS之NSString类中compare方法的陷阱
- XML的序列化和反序列化 详细介绍
- Go微服务报错protoc-gen-go: unable to determine Go import path for
- YbtOJ#893-带权的图【高斯消元,结论】
- compress()方法
- 源码安装mysql数据库_Linux下源码安装mysql数据库
- 永远不要随便告诉别人自己的工资,工资是职场最大的陷阱
- QQ浏览器11版,中文输入法定位错误
- 遗传算法matlab_三分钟学会遗传算法
- linux服务器生成密钥后无法登陆,securecrt用密钥安全登陆服务器
- 基于聚类的个性化推荐电商案例分析总结
- Matlab之inv函数
- lxr.linux.iso,linux c and asm 同时使用
- 英语文本处理工具库——spaCy
- 牛客网C语言 算学分绩
- 图的一些基本知识:图,邻居,度矩阵,邻接矩阵
- Go Moudle笔记
- JavaSE学习之路:Idea小技巧一键生成标准JavaBean(一键生成构造方法和Setter和Getter方法)
- 数据库设计之概念结构设计---------E-R图详解 (各种各样的实例)
- Automatic differentiation