facebook，twitter的分享图片功能，facebook分享图片
前端工作中我们经常会遇到把网页的内容分享到别的社交网站上去，微信，qq，新浪，facebook，twitter等社交中去，这里墙内的分享方法我就不说了，圈内肯定有很多大佬，我给大家分享一个FaceBook,Twitter的图文分享（认真看完相信对你有收获。网上的例子大多包括Facebook官网上的例子是用在页面上创建meta来做分享，但是我用Vue写的前端，测是不行，并不能抓取到页面他们只是把Fa
前端日常踩坑达人
如果你FaceBook和twitter的分享机制就知道，当你分享数据到他们的网站，会有爬虫机器人一直在读取并解析你的数据（meta里面的），所以怎么让你的meta数据被抓到？
Vue的页面公用一个HTML，所以动态的meta标签就不行了，而且FaceBook官网已经声明，页面动态创建的meta是抓取不成功的 ，所以怎么动态生成数据，并让FaceBook或者Twitter抓到呢，这里给大家提供一种方法，并且实际项目中已经在跑了。
首先说一下的普通分享以FaceBook为例（twitter同理方法也一样）
faceBook的分享
<a href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(document.location.href)+'&t='+encodeURIComponent(document.title),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)"> <i class="fa fa-facebook" aria-hidden="true"></i> Share </a>
//encodeURIComponent(document.location.href) 是你分享的url并且这个
Twitter的分享
<a href="javascript:window.open('http://twitter.com/home?status='+encodeURIComponent(document.location.href)+' '+encodeURIComponent(document.title),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)"> <i class="fa fa-twitter" aria-hidden="true"></i> Share </a>
如果你测的话会发现只能会基本信息带过去，但是图片什么的没有，如果你不要图片的话，上面的链接基本上可以满足你的需求。
图文分享
FaceBook的图文分享（twitter同理方法也一样）
正如上面提到的一样，有些小伙伴在想Vue页面只有一个html页面，在页面上动态创建Meta标签不就可以了？****
下面是创建meta的部分测试代码，meta标签确实能在页面上创建，但是facebook的抓包工具却抓不到，亲测不行（FaceBook官网已经指出，不能抓取到动态创建的meta，可以看一下他们的官方说明）。
既然我们动态生成的的meta标签抓取不到，那我们换一种思路，我们可以生成静态页面，我们去抓这个动态的页面，这样我们不就可以完成了。
独立生成静态页面的方式
- 正常流程是我们先获取到数据
shareFacebook() {
let postTitle = this.detailData.postTitle; //生成静态页面标题
let postId = this.detailData.postId; //生成静态页面id
let imgUrl = this.$store.state.baseUrl + this.detailData.imageUrl; // 动态的图片链接
// 这是要生成的图片的代码（可以让后端直接写(前段写的话会有安全问题,**比如别人会用postman加上别的网站网址跳转,很危险**)，****因为vue中的script标签写在methods里面打包的时候会报错，所以有一个延时跳转的方法是写了后端****）
// 踩坑日记 1 og:image里的content的url必须和og:url里面保持一致， 域名，端口，或者ip+端口，后面的参数可以动态的。
// 踩坑日记 2 og:image里的content的url和og:url里面 尽量不要有中文，中文被识别可能会被转码，抓取到的几率很低。
let html = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta property="fb:app_id" content="你在Facebook注册的id">
<meta property="og:image" content="${imgUrl}">
<meta property="og:url" content="${
this.$store.state.baseUrl
}/html/${postId}postfacebook.html">
<title>${postTitle}</title>
</head>
<body>
<div class="resume_preview_page" style="margin:0 auto;width:1200px">
Page jumping...
</div>
// 下面应该有部分代码跳转到你的页面，值你应该传给后端，让他拼一下，如果不是用vue写的，自己可以写完，就是一个简单的延时跳转，小弟就不卖弄了.
//这个是生成静态页面的接口，数据就是我自己详情页面的数据， 换成你自己的即可
setShareHtml({
htmlStr: html,
id: postId,
flag: "post",
}).then(res => {
console.log(res); // 这里是你的静态页面的数据地址等等
var _uri =
"http://www.facebook.com/sharer.php?u=" +
encodeURIComponent(res.data) +
"&t=" +
encodeURIComponent(postTitle);
// 简单做了一下兼容（手机上safri浏览器的新开窗口是不生效的，所以判断窗口视图，如果在手机端就直接打开分享窗口，PC就新开窗口,都是为了体验）。
if (this.clientWidth > 750) {
window.open(
_uri,
"",
"width=600, height=500, left=" + this.shareBoxLeft + ", top=150"
);
} else {
location.href = _uri;
}
上面的我们用到了生成短连接的方式（客户要求）但是不影响分享，真实分享的时候，他们会提示一个redirect的url，虽然代码不多，但是里面涉及的内容是十分绕，含泪踩坑啊。（twitter同理）
顺便提一下FaceBook的SDK好不容易看到他们说用SDK的share方法可以了，但是后来他们这个方法官方说废弃了。爆炸ing；
这里附上Twitter和Facebook的抓包工具
Twitter抓包测试工具
https://cards-dev.twitter.com/validator
Facebook抓包测试工具
https://developers.facebook.com/tools/
最后附上实际效果图；
Facebook的账号测试的时候被封了;没法看了
Twitter效果
这里只是一种解决方案，各位如果有更好的方法可以一起交流分享！
前往低代码交流专区
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)