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

前端日常踩坑达人
如果你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;         //生成静态页面idlet 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效果

这里只是一种解决方案，各位如果有更好的方法可以一起交流分享！

facebook，twitter的分享图片功能，facebook分享图片相关推荐

html怎么把按钮做成可以百度,网站网页中加入各种分享按钮功能百度分享
对网页加入分享到各大网站按钮功能,网页中加入分享按钮,用户点击即可分享收藏到对应网站去.不管哪个页面都能记录分享此时情况.DIVCS5推荐使用百度分享分享按钮功能截图一.分享按钮形式 - ...
网站网页中加入各种分享按钮功能百度分享
1.效果如下: 实例代码: <html><head></head><body><div></div><div id=&qu ...
android裁剪图片功能,Android实现图片区域裁剪功能
今天做的就是关于实现图片的区域裁剪功能.由于项目功能的需要笔者需要实现PDF文档的阅读,并且就某个页面实现"图片"裁剪(一个页面理解为一张图片).笔者对着方面是一点儿也不熟悉,因此 ...
vue旋转图片功能，旋转放大图片功能；vue旋转放大div元素
需求:可以旋转.放大.颠倒图片. html: <div class="imgtop"><img class="imgboxele" id=&q ...
php 微信转发朋友圈,php实现的微信分享到朋友圈并记录分享次数功能的讲解
这篇文章主要介绍了php实现的微信分享到朋友圈并记录分享次数功能,结合实例形式分析了php微信分享功能接口调用及分享次数统计具体操作技巧,需要的朋友可以参考下本文实例讲述了php实现的微信分享到朋友 ...
php判断朋友圈是否分享,php实现的微信分享到朋友圈并记录分享次数功能
本文实例讲述了php实现的微信分享到朋友圈并记录分享次数功能.分享给大家供大家参考,具体如下: 1.引入js文件 2.通过config接口注入权限验证配置 3.通过ready接口处理成功验证 4.通过 ...
php图片转字符程序,PHP文字转图片功能原理与实现方法分析
本文实例讲述了PHP文字转图片功能.分享给大家供大家参考,具体如下: 这项功能主要用于对邮箱地址.手机等可能被网络爬虫抓取的重要信息的处理.将文字转化为图片绝对是个好注意.验证码的基本生成原理也与此差 ...
python爬取贴吧所有帖子-Python实现的爬取百度贴吧图片功能完整示例
本文实例讲述了Python实现的爬取百度贴吧图片功能.分享给大家供大家参考,具体如下: #coding:utf-8 import requests import urllib2 import urll ...
ubuntu下使用python将ppt转成图片_Ubuntu下使用Python实现游戏制作中的切分图片功能...
本文实例讲述了Ubuntu下使用Python实现游戏制作中的切分图片功能.分享给大家供大家参考,具体如下: why 拿到一个人物行走的素材,要用TexturePacker打包.TexturePacke ...
java压缩图片比例quality_Java实现的上传并压缩图片功能【可等比例压缩或原尺寸压缩】...
本文实例讲述了java实现的上传并压缩图片功能.分享给大家供大家参考,具体如下: 先看效果: 原图:1.33M 处理后:27.4kb 关键代码: package codeGenerate.util; ...

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

facebook，twitter的分享图片功能，facebook分享图片相关推荐

最新文章

热门文章