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.什么是HTML 2.怎么用HTML 网页: 网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示相关特定内容相关的网页集 网页是网站的一页,通常是HTML格式的文件,通过浏览 ...
- 家具类web网页模板分享,前端期末作业,静态页面
一共5页,纯静态页面,没有javascript,带登陆页面 index.html <!DOCTYPE html> <html> <head> <meta ch ...
- 游戏专题类,web网页模板分享,前端期末作业,静态页面,带轮播图,登录页
index.html <html lang="zh" data-hairline="true" data-theme="light"& ...
- 记录一下微信、QQ、微博分享web网页功能
记录一下微信.QQ.微博分享web网页功能 分享至QQ,生成一个二维码,扫码进入网页 const url = "https://www.mi.com/?masid=2701.0318&quo ...
- Facebook、Twitter网页分享
Facebook分享 Facebook分享是爬虫页面HTML文件配置的分享内容 Twitter分享 基本同Facebook分享.分享图不可动态修改. 差别:js触发的分享,Twitter可以修改分享文 ...
- Python分享消息到Twitter、Youtube、Facebook平台
Python分享消息到Twitter.Youtube.Facebook平台 浏览器 概述 第三方登录平台免不了需要登录验证,比起命令行输入账号密码再填充表单,不如直接用浏览器实在 环境配置 运行库 p ...
- html、js实现facebook、twitter分享
html.js实现facebook.twitter分享 分享到facebook: <a class="facebook" href="https://www.fac ...
- 分享图文到Facebook、Twitter、Pinterest
分享到Facebook 官方文档:https://developers.facebook.com/docs/sharing/webmasters/images/ 第一步: 在head标签中添加 < ...
- 好程序员web前端教程分享网页设计需要学那些东西?
好程序员web前端教程分享网页设计需要学那些东西:初次接触或者想要进入网页设计行业的朋友会经常分不清楚web前端与网页设计之间的区别,不知道网页设计要学什么,web前端要学什么,因此感到很迷茫,下面老 ...
最新文章
- 全国首个窄带物联网实验局落户福州 助力智慧城市建设
- iOS UI-IOS开发中Xcode的一些使用技巧
- 读《程序员的SQL金典》[2]--函数
- Revit二次开发示例:HelloRevit
- Dell Latitude D630 无法wubi安装Kubuntu
- linux验证db2安装成功_DB2(Linux 64位)安装教程
- 3.8 以符号常量/字面常量取代魔法数
- 凤凰 Remix android x86,主流 Android x86系统分享
- mysql的casewhen 作用_MySQL数据库之Mysql casewhen的三种用法
- 嵌入式linux指纹识别项目,基于嵌入式应用平台的指纹识别系统设计
- golang switch使用
- 使用easypoi导出excel设置表头样式
- 大汉诡辩达人陆贾的公关策略cathy荷塘月色新浪博客
- 简单粗暴搞定网易云音乐限制!找回失去的灰色快乐
- python怎么保留整数输出_python怎么保留整数
- 文件上传 webshell 各类型 一句话木马 图片马 制作 教程
- 今日头条自媒体怎么提高推荐量
- android电子书小程序,小程序安卓手机无法打开pdf(解决)
- 米赛尔java火_山地自行车推荐 这几款山地自行车值得入手
- php懈垢windows通用上传缺陷
热门文章
- 危险进程集粹(附说明)
- 欧拉函数定理及其性质
- 解决:RuntimeError: CUDA error: device-side assert triggered
- IntelliJ IDEA如何修改版权信息
- 驱动程序开发:基于ICM20608六轴传感器 --- 使用Regmap API 的 SPI 读取数据 之 IIO驱动
- android mmm 编译指令,mm和mmm编译说明
- 互联网快讯:极米投影仪获用户青睐;粉笔科技创新OMO模式谋突围;华虹半导体拟科创板上市
- CART分类与回归树的原理与实现
- 【架构分析】Weston Inside - 基础数据结构详解
- fcitx输入法代码分析总结