web網頁動態分享facebook和twitter
阿新 • • 發佈：2020-07-08
介紹
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>
<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 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: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}`)
