将自建的网站链接分享给朋友/分享到朋友圈的时候,默认是没有缩略图封面的,也没有链接的描述,显得很不正规,就像下面这样:
这是因为微信的网页链接需要调用SDK进行配置。
微信js-sdk是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
我们可以使用js-sdk来自定义链接的封面,描述等信息。
我们需要在网页中引入http://res.wx.qq.com/open/js/jweixin-1.6.0.js
然后使用如下代码进行配置:
wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.updateTimelineShareData({ title: '', // 分享标题 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 success: function () { // 设置成功 } }) });
在这之前,还需要调用API获取SDK接口的调用权限,本文不是一个使用js-sdk的教程,因此省略这些步骤,更多信息请参阅:微信官方文档
WechatShare是一个封装了js-sdk的Typecho插件,使用此插件可以自定义Typecho博客微信分享链接中的标题、描述、小图标和URL,包括分享给朋友/分享到朋友圈,效果如下:
左边是原始的链接样式,右边是自定义后的链接样式。
- 至releases中下载最新版本插件
- 将下载的压缩包进行解压,文件夹重命名为WeChatShare,上传至Typecho插件目录usr/plugins中
- 检查WeChatShare插件目录文件是否有读写权限,如果没有请增加
- 后台激活插件
- 到插件配置页面填写插件配置信息
配置插件需要下面几个步骤:
- 您需要有一个公众号,并且公众号通过微信认证
- 在插件中填写微信公众号平台中获取到的 AppID 和 AppSecret ,并设置IP白名单(开发 > 基本配置)
- 添加博客域名到JS安全域名中(设置 > 公众号设置 > 功能设置 > JS接口安全域名)
- 配置完成后,可以在每篇博客的编辑页面配置微信分享,设置标题、描述、小图标和URL等信息
- 前往微信开放平台注册
- 填写信息并进行认证,我记得微信的认证是很快,应该是机器认证
- 将图中所示的 AppID 和 AppSecret填入插件配置中
- 启用开发者密码后,会出现IP白名单的功能,将服务器IP设置进去
将网站域名设置为JS接口安全域名
配置好插件之后,在文章的编辑页面可以看到下面的配置框:
填入你想配置的信息即可,链接项留空的时候会自动获取本文链接。
如果你的网站使用了pjax技术,则需要进行下一步的设置,否则在页面发生跳转后插件将无法正常工作。
下面代码的作用是在完成pjax刷新之后,替换成新的文章信息
title; ?>', parameter_type: 'parameter->type; ?>', cid: 'cid; ?>', signature_url: '' };" _ue_custom_node_="true">
下面代码的作用是在pjax刷新之后重新调用wx.config
new WX_Custom_Share().init();
我的pjax代码如下:
$(document).pjax('a[href*="siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', { container: '#content', fragment: '#content', timeout: 8000 }).on('pjax:send', function () { // some animate code...... }).on('pjax:complete', function () { // 微信分享插件 new WX_Custom_Share().init(); });
其中设置了#content为pjax容器,因此我向该div中添加代码: