前端日常踩坑达人
如果你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标签抓取不到,那我们换一种思路,我们可以生成静态页面,我们去抓这个动态的页面,这样我们不就可以完成了。

独立生成静态页面的方式

  1. 正常流程是我们先获取到数据
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效果
在这里插入图片描述

在这里插入图片描述
这里只是一种解决方案,各位如果有更好的方法可以一起交流分享!

Logo

前往低代码交流专区

更多推荐