微信分享微网页的图文设置

之前经常做一些微网页的设计,在布局之中也学到了不少,也用到了不少工具和插件。摘一些也许会经常用到的部分记录下来,以备后用。这一次要说的是关于微信分享的问题。正常我们是使用网址在手机里进行测试。测试完成后需要分享到好友和朋友圈里的时候,总不能直接就丢一条网址过去。然而直接分享的时候不是没有缩略图就是没有标题和内容。所以找到了一个简单的微信分享JS插件和使用方法,简单实用。

首先需要添加一条JS引用,文件我会附加在文后。其次需要定义的内容是一条<meta>标签,具体内容如下:

<meta name=”sharecontent” data-msg-img=”微信分享的缩略图地址” data-msg-title=”分享的标题” data-msg-content=”分享的内容摘要” data-msg-callBack=”” data-line-img=”微信分享的缩略图地址” data-line-title=”分享的标题” data-line-callBack=””/>

以上就是分享的<meta>标签,设置好内容之后配合引用的JS文件就可以实现微信分享时的图文效果。

JS文件:http://www.yuope.com/tools/wxshare.js

========================================================

特别补充一句,很多人跟我说这样设置之后分享的时候经常会有缩略图错乱的情况发生。跟我说了很多理由,诸如什么微信号没有经过认证之类的,我个人觉得微网站是独立于微信存在的不应该和这个有关联。后来测试发现,缩略图的链接如果写绝对地址即带有http头的地址不会发生问题,而相对地址的偶尔会发生问题。或许写绝对地址能够解决这一问题。

========================================================

再一次补充,最近发现绝对路径并不能解决问题。再次找寻资讯之后发现,微信的接口中对图片的获取并没有一个自由的定义,反而是识别第一张图片的概率极高。所以很多做法是在body体内写一个带有display:hidden属性的图片,用来作为微信转发缩略图的图片。但是我在测试中也发现这样并不能非常有效。或许是hidden属性的影响,我现在的做法也是在body体内首先写一个img图片,但是通过定位将这张图片定位到视窗之外。既看不到图片,又能让微信转发识别,或许是一个办法。


           新的一篇:

Leave a Reply