微信分享带缩略图的小技巧

分类: 互联网相关, 技术分享   |  标签: 分享, 微信, 缩略图   |  共有: 1,060 次浏览 , 1 条评论

大家在微信朋友圈中看到分享网页内容的时候，都会在边上有一个缩略图，这虽然看起来是一个很简单的东西，但实际上实现起来并不容易。最早的时候，微信会自动获取页面中第一个大于300像素的图片，自行缩放比例以后作为缩略图，但是去年的时候，微信上了新的JS-SDK来规范分享图片的定义。如果你是一个在国内正常备案的网站，那么去申请SDK认证就可以，但是像我这种主机丢在国外懒得备案什么的，就没有办法了。

如果不使用JS-SDK，在默认的情况下，你分享出来的网页的缩略图将会是一个默认的断链的图片，是不是感觉挫爆了~ 如果你只是通过Safari来分享页面，那么Open graph Metadata能帮你解决一些问题。将下面的代码加入到你的页面顶部meta定义中，然后你从Safari分享的时候，就能取到一个指定的图片了。

<meta property=”og:type” content=”website” />

<meta property=”og:title” content=”页面标题”>

<meta property=”og:description” content=”页面描述”>

<meta property=”og:image” content=”https://axmemo.com/axicon.png“>

<meta property=”og:url” content=”https://axmemo.com/“>

不过因为Meta定义的局限性，只能指定固定图片，否则写代码会比较麻烦（因为你要提前去获取当前页面的特色图片），所以看来我们还需要寻找更好的解决方案。后来，我发现用QQ浏览器或者用QQ进行分享的时候，浏览器会根据页面生成一张网页缩略图放在这里，这似乎可以有一个取巧的方法。

首先，你必须从Wordpress中取到特色图片，这个应该没有太大的难度对吧，然后呢，你需要把这张图片放置到页面顶部，然后通过CSS设置成全屏宽度的正方形图片。然后，你把页面拖动到顶部的时候，再通过QQ来分享，系统就会自动截取顶部这部分页面，来生成缩略图。要说明的是，你需要在页面顶部再预留50px左右的高度，因为貌似QQ截图的时候，是扣除了顶部的一定像素高度。

我们实现了缩略图的截取和生成，但是这样对于访问者来说，太恶心了，因为顶部多了这么一个大图片。所以，我就在页面加载过程中，加入了一个自动滚动的脚本，等页面下载完成之后自动跳转到正常的顶部位置，除非用户向上拖动，才知道顶上藏了一个图片。

因为这张图片完全就是为了让QQ截图分享而使用的，所以对于其他浏览器和用户来说，这是一个没用的东西，为了避免对其他用户的影响，我在Wordpress中加入了对访问浏览器的识别，也就意味着，只有通过QQ打开这个页面的时候，才会加载这张图片，而如果你是通过微信打开，或者Safari打开，根本是看不到这张图片的，从而将对用户的影响降低到最小。

现在我通过Wordpress发完文章之后，只需要进入QQ来进行一下分享就OK了！这并不是正规的方式，所以只能说是奇技淫巧了，除此之外，貌似并没有找到更好的方法，如果有人发现更好的方法，敬请留言指教。

---