22
Feb

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

分类: 互联网相关, 技术分享   |  标签: , ,   |  共有: 173 次浏览 , 暂无评论

wechatshare

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

eff01

如果不使用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截图的时候,是扣除了顶部的一定像素高度。

showit

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

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

eff02

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




在下方发表关于本文的评论...