facebook,twitter的分享图片功能,facebook分享图片

开发工作中我们可能会遇到一种需求把网页的内容分享到别的社交网站上去带着指定的图片和文字,微信,qq,新浪,facebook,twitter等社交平台中去,这里墙内的分享方法我就不说了,圈内肯定有很多大佬,这里给大家分享一个FaceBook,Twitter的图文分享功能。

分享是核心思想就是创建meta标签让爬虫去抓,但是我用Vue写的前端,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效果
在这里插入图片描述

在这里插入图片描述

完美收工,有问题,欢迎留言.

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页