web网页动态分享facebook和twitter
介绍
facebook分享 http://www.facebook.com/sharer.php?t=${text}u=encodeURIComponent('静态html')
twitter分享 https://twitter.com/share?text=${text}&url=静态html
原理，通过调用第三方的分享地址，第三方回调你传的url，解析里面的meta信息，来显示标题图片啥的
参数text可以忽略，所以就是要解决静态html的问题
示例静态html
主要的就是图片，标题，描述。
site，url啥的随缘填写。
card和type等都是固定的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- twitter分享 -->
<meta property="twitter:url" content="http://gg.chendahai.cn/static/share/index.html"/>
<meta name="twitter:title" content="This is title"/>
<meta name="twitter:description" content="This is desc"/>
<meta name="twitter:site" content="http://gg.chendahai.cn/static/share/index.html">
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="http://gg.chendahai.cn/static/image/apple.jpg"/>
<!-- facebook分享 -->
<meta property="og:url" content="http://gg.chendahai.cn/static/share/index.html"/>
<meta property="og:title" content="This is my plan,let's play together"/>
<meta property="og:description" content="This is my plan,let's play together"/>
<meta property="og:image" content="http://gg.chendahai.cn/static/image/apple.jpg"/>
<meta property="og:type" content="website"/>
<title>share test</title>
</head>
<body>
</body>
</html>
前提
有域名，端口号须为80，整个二级域名，nginx转发即可
比如java.chendahai.cn(80端口转发到5005端口)
1 server {
2 listen 80;
3 server_name java.chendahai.cn;
4
5 client_max_body_size 20m;
6
7 location / {
8 proxy_set_header X-Real-IP $remote_addr;
9 proxy_set_header Host $http_host;
10 proxy_pass http://0.0.0.0:5005;
11 }
12
13 }
调用后端接口，根据参数动态返回html页面
注意事项
- url编码与解码得梳理清楚
- twitter分享地址有内容限制，所以参数不能太长。所以直接传meta的标签过去是行不通的，当然也会生成xss漏洞
- 先通过静态的页面测试通过之后再一步步往下走
为了保证接口参数的长度问题，接收参数选择用逗号分隔的字符串。
后端代码示例基于SpringMVC
/**
* facebook和twitter通用的动态分享接口
*
* @param meta k,v,k,v 类型的字符串
* @return html页面
*/
@RequestMapping(value = "/share/new", produces = "text/html;charset=utf-8")
public String shareWin(String meta) throws UnsupportedEncodingException {
// twitter的url需要进行url解码处理
meta = URLDecoder.decode(meta, "UTF-8");
String[] split = meta.split(",");
String metaHtml = "";
for (int i = 0; i < split.length; i++) {
metaHtml += "<meta property=\"" + split[i] + "\" name=\"" + split[i] + "\" content=\"" + split[i + 1] + "\"/>\n";
i++;
}
String retHtml = "<!DOCTYPE html>\n"
+ "<html lang=\"en\">\n"
+ "<head>\n"
+ metaHtml
+ "</head>\n"
+ "<body>\n"
+ "<script type=\"text/javascript\">\n"
+ "\twindow.location.href=\"http://java.chendahai.cn/\";\n"
+ "</script>"
+ "</body>\n"
+ "</html>";
System.out.println(retHtml);
return retHtml;
}
postman请求返回html例图
前端示例
let metaArr = [
'og:url', 'http://java.chendahai.cn',
'og:title', 'this is title',
'og:description', 'this is desc',
'og:image', 'http://gg.chendahai.cn/static/image/apple.jpg',
'og:type', 'website'
]
let metaParams = metaArr.toString()
window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(`http://java.chendahai.cn/share/new?meta=${metaParams}`))
let metaArr = [
'twitter:url', 'http://java.chendahai.cn',
'twitter:site', 'http://java.chendahai.cn',
'twitter:title', 'this is title',
'twitter:description', 'this is desc',
'twitter:card', 'summary_large_image',
'twitter:image', 'http://gg.chendahai.cn/static/image/pkq.jpg'
]
let metaParams = metaArr.toString()
// 需要encode两次 因为浏览器会自动decode一次，另一次是服务端会decode
metaParams = encodeURIComponent(encodeURIComponent(metaParams))
window.open(`https://twitter.com/share?text=${title}&url=http://java.chendahai.cn/share/new?meta=${metaParams}`)
web网页动态分享facebook和twitter的更多相关文章
- web网页外部分享到微信、朋友圈、扣扣、微博等功能、自动生成二维码等
1.这里重中之重是分享到微信:web端网页通常是没有权限分享过去的 所以用: weixin://dl/business/?ticket=ta428dhj739hg3efe6e 但是这个ticket真 ...
- 移动端折腾国外分享（facebook、twitter、linkedin）
一.前言 国内做HTML5页面,关注最多就是微信分享了,之前也写过关于微信分享的文章,可以点击查看:分享相关文章 再者,就是国内的其它分享,比如常用的新浪微博.腾讯微博.QQ空间等等,最方便的就是直接 ...
- Android Facebook和Twitter分享
1. 背景 在年初的时候,公司的项目有个新的需求,在英文版的应用中加入Facebook和Twitter分享功能. 2. 完成情况 由于这个项目比较急,所以开发这个功能从预研到接入总共耗时一周.后来,在 ...
- 使用facebook和twitter进行分享经验总结
凤凰涅槃,浴火重生. 在传说当中,凤凰是人世间幸福的使者,每五百年,它就要背负着积累于在人间的所有痛苦和恩怨情仇,投身于熊熊烈火中自焚,以生命和美丽的终结换取人世的祥和与幸福.同样在肉体经受了巨大的痛 ...
- 分享前端Facebook及Twitter第三方登录
最近公司要求做海外的第三方登录:目前只做了Facebook和Twitter;国内百度到的信息太少VPN FQ百度+Google了很久终于弄好了.但是做第三方登录基本上都有个特点就是引入必须的js,设置 ...
- Web网页中动态数据区域的识别与抽取 Dynamical Data Regions Identification and Extraction in Web Pages
Web网页中动态数据区域的识别与抽取 Dynamical Data Regions Identification and Extraction in Web Pages Web网页中动态数据区域的识别 ...
- Android Facebook和Twitter登录和分享完整版
最近公司的软件需要改国际版,需要Facebook和Twitter的登录和分享. 本人先用Umeng的第三方社会化分享实现了该功能,但是后来一想问题来了,经过查证.Umeng只在中国和美国有服务器,那也 ...
- C#开发BIMFACE系列49 Web网页中加载模型与图纸的技术方案
BIMFACE二次开发系列目录 [已更新最新开发文章,点击查看详细] 在BIMFACE二次系列博客中详细介绍了服务器端API的调用方式,如下列表 C#开发BIMFACE系列1 BIMFAC ...
- web网页中使用vlc插件播放相机rtsp流视频
可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 使用vlc进行二次开发做自己的播放器 vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放 ...
随机推荐
- Php-webdriver 的安装与使用教程
Php-webdriver 是 Facebook 开发的基于 PHP 语言实现的 Selenium WebDriver 客户端组件,可以用它来操作浏览器.常见的操作包括:自动化测试.采集数据等. 安装 ...
- 【Spring注解驱动开发】使用@Lazy注解实现懒加载
写在前面 Spring在启动时,默认会将单实例bean进行实例化,并加载到Spring容器中.也就是说,单实例bean默认在Spring容器启动的时候创建对象,并将对象加载到Spring容器中.如果我 ...
- 构造函数，拷贝构造和赋值运算符调用时机，explicit，
#include<iostream> #include <stdio.h> using namespace std; class test{ int mvalue; publi ...
- Nlog打印日志到Influxdb数据库
1.安装和使用Influxdb 安装部分网上资料比较多,也讲的比较详细,请自行百度. 下面大概讲下InfluxDB的写入和读取数据的方法. 我使用了InfluxData.Net包. 工具->Nu ...
- SQL--SQL详解（DDL，DML，DQL，DCL）
SQL--SQL详解(DDL,DML,DQL,DCL) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 什么是SQL? Stru ...
- 【分区】使用 GPT 分区表分区并格式化 (非 FreeBSD 系统)
新购买的 Linux 云服务器,由于数据盘未做分区和格式化,无法使用. 注意: 数据盘中的数据在格式化后将全部被清空.请在格式化之前,确保数据盘中没有数据或已对重要数据进行备份.为避免服务发生异常,格 ...
- OpenSSL & 加密解密
OpenSSL&加密解密(思维导图) 1. 网络通信概述 传输层协议 进程间通信 监听端口 SSL 裸套接字 2. 加密和解密 2.1 加密的方式 对称加密 公钥加密 单向加密 认证加密 2. ...
- 在Centos7中,从主机 Windows 上无法远程访问 Linux 上rabbitmq的解决方法
当在 Linux 上配置好 Rabbitmq服务器后,如果从主机中无法访问到 Linux 中的Rabbitmq服务器时,需要做如下的检查: 1. Rabbitmq是否启动成功 在控制台输入: ps - ...
- foreach 集合又抛经典异常了，这次一定要刨根问底
一:背景 1. 讲故事 最近同事在写一段业务逻辑的时候,程序跑起来总是报:集合已修改:可能无法执行枚举操作,硬是没有找到什么情况下会导致这个异常产生,就让我来找一下bug,其实这个异常在座的每个程序员 ...
- xdoj 2020校赛复盘
平时写东西都不喜欢复盘,这肯定不是一个好习惯,感觉每次花好几个小时甚至好几天写题目然后没写出来也不去看题解是一种很蠢的行为( 花了这么久时间打校赛,虽然水平很low,数据结构也不太会用,还是记录一下自 ...