微信分享第三方网站链接时显示缩略图和描述的方法

【摘要】很早之前就想把这个问题好好研究一下的，然后今天下午折腾了好久，不过很开心最终还是把这个问题解决了。本文在这里介绍两种方法来实现微信分享第三方网站链接时缩略图和描述的方法。这里都是我亲测可用的。

我折腾了一个下午，试过很多方法，都是不能成功了，有些是方法已经被微信开发平台淘汰了。所以本文仅仅介绍目前为止到现在真实可用方法。

首页，毋庸置疑，微信分享的时候它会自动获取 title 标签里面的标题作为分享链接的标题。这里就是只要设置好 title 里面的内容即可。

如下图所示，是我今天下午实现的对比图：

方法一，在页面中插入图片，这种方法只能够解决微信分享网址的时候能够显示缩略图。首先，在没有任何设置的前提下，微信默认会将第一张宽度高度大于 300px * 300px 的图片，并且该图片的 style 属性中 display 不能为 none。那么我们可以这么实现：

1. <style>

2. 	.share_div{width:0px;height:0px;overflow:hidden;}

3. </style>

4. <div class="share_div"><img src="/logo.jpg"  /></div>

为什么 .share_div 中不直接使用 {display:none;} ？原因我看网上说是爬虫不喜欢这隐式链接，并且如果被爬虫发现，则会有不好的后果。

方法二：通过认证的企业通过认证的企业公众号，使用开发者配置中的APPID和密钥，通过web开发，动态的计算出多个参数值，验证API，验证通过方可实现自定义分享链接的标题和缩略图还有描述。

当然我自己没有认证的企业公众号，不过借用网上分享的资源，依然能够实现这一功能，下面直接给出代码即可：

1. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

2. <script>

3. 	wx.config({

4. 		debug: false,

5. 		appId: 'wxfb95e4025a5d4614',

6. 		timestamp: '1498633007',

7. 		nonceStr: 'tnZJBsdrUo88MFiB',

8. 		signature: 'cae67a0a883822e1087cba091321b14b73152210',

9. 		jsApiList: [

10. 			'onMenuShareTimeline',

11. 			'onMenuShareAppMessage'

12. 		  ]

13. 	});

14. 	wx.ready(function () {

15. 		var shareData = {

16. 			title: '马富天博客_PHP博客_PHP Blog_PHP编程_分享PHP开发经验',	//	标题

17. 			desc: '马富天博客是个人独立博客专为学习php打造php教程技术,在马富天博客里可以找到你所需要的所有关于php技术解决文章方案,打造一个以技术经验为主题的分享平台!QQ:335134463',	//	描述

18. 			link: 'http://www.mafutian.net/',	//	分享的URL，必须和当前打开的网页的URL是一样的

19. 			imgUrl: 'http://www.mafutian.net/logo.jpg'	//	缩略图地址

20. 		};

21. 		wx.onMenuShareAppMessage(shareData);

22. 		wx.onMenuShareTimeline(shareData);

23. 	});

24. 	wx.error(function (res) {

25. 	  //alert(res.errMsg);//错误提示

26. 	});

27. </script>

具体是什么原理我也没有弄明白，但是最后通过这代码也确实实现了在微信分享第三方网站链接时能够显示缩略图和描述的功能。

我要打赏