网页分享到微信显示图标、标题、摘要

网站有些内容需要分享到微信朋友圈,或者发送给微信好友。分享到微信朋友圈的网页链接没有缩略图图标,发给微信好友的网页链接没有图标与摘要,明显就不上档次了…

如下图所示:

分享到朋友圈没有缩略图图标

 

发送给微信好友没有图标与摘要

 

查找了一些资料,发现要解决此问题,必须符合微信分享的策略:

JSSDK自定义分享接口的策略调整

微信团队 微信开发者 2017-03-29

为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK“分享到朋友圈”及“发送给朋友”接口,自定义的分享链接,其域名或路径必须与当前页面对应的公众号JS安全域名一致,否则将调用失败。

例如,当前页面是 http://www.abc.com/123,其公众号对应的JS安全域名为 www.abc.com 以及 www.xyz.com,则分享自定义链接 http://www.abc.com/456 可以成功,分享 http://www.xyz.com/123 或 http://www.def.com/123 均将失败。

对于未接入微信JSSDK或已接入但JSSDK调用失败的网页,被用户分享时,分享卡片将统一使用默认缩略图和标题简介,不允许自定义。

接口完整用法请参考《微信JSSDK说明文档》,请开发者及时完成调整。

因此需要具备以下2个条件

1、微信公众号

微信公众号(服务号、订阅号),我的只是个人申请的订阅号

2、网站必需已完成备案

如果没有备案的网站就不用继续了。

条件具备了,下面是设置公众号与配置网站

参照 微信JS-SDK说明文档

大致步骤如下

一:绑定域名

二:引入JS文件

三:通过config接口注入权限验证配置

四:通过ready接口处理成功验证

五:通过error接口处理失败验证

一、设置公众号,绑定域名

1、设置JS接口安全域名,才能在该域名下调用微信开放的JS接口

进入公众号→设置→公众号设置→功能设置

JS接口安全域名→设置

这里我们要下载文件MP_verify_zsB3mdwTTjCFzn20.txt ,上传至网站根目录才能完成绑定域名(注意网站如果有WP Super Cache缓存的话,要先清除缓存,否则无法成功)

2、获取开发者ID与密码,设置IP白名单

进入公众号→开发→基本配置

开发者ID(AppID)直接可以查看到,开发者密码(AppSecret)无法直接查看,点击重置获取

我们先记录好开发者ID与密码,稍后配置网站时需要使用。

IP白名单是将需要我们网站固定IP地址填上即可。

 

二、配置网站,引入JS文件

1、在需要调用JS接口的页面引入JS文件

<body> //在需要调用JS接口的页面的body与body之间插入配置代码。

//引入如下JS文件
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

<script>

//通过config接口注入权限验证配置
wx.config({
    debug: false, // true为开启,false为关闭。开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '<?php echo $signPackage["appId"];?>', // 必填,公众号的唯一标识
    timestamp: <?php echo $signPackage["timestamp"];?>, // 必填,生成签名的时间戳
    nonceStr: '<?php echo $signPackage["nonceStr"];?>', // 必填,生成签名的随机串
    signature: '<?php echo $signPackage["signature"];?>', // 必填,签名
    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填,需要使用的JS接口列表
  });

//通过ready接口处理成功验证
wx.ready(function () {

//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃)
//但我使用新接口updateTimelineShareData却报错permission denied该公众号没有权限使用这个JSAPI
    wx.onMenuShareTimeline({ 
        title: '', // 分享标题
        link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
        // 用户点击了分享后执行的回调函数
        }
	});

//获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃)
//但我使用新接口wx.updateAppMessageShareData却报错permission denied该公众号没有权限使用这个JSAPI
    wx.onMenuShareAppMessage({ 
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
        // 用户点击了分享后执行的回调函数
        }		
	});
}); 

//通过error接口处理失败验证 
wx.error(function(res){
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
</script>
</body>

2、配置后端PHP代码

下载微信示例代码http://demo.open.weixin.qq.com/jssdk/sample.zip

将下载下来的sample压缩包里面的jssdk.php解压出来,上传到网站主题需要调用JS接口的模板目录(我这里只针对我使用的WordPress子主题的操作)

在主题头部header.php插入jssdk的代码(或者在需要调用JS接口的页面插入代码)

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */
//插入代码 
require_once "jssdk.php";
$jssdk = new JSSDK("wxae*********02cc", "99***********************52e5"); // 填上"wxae*********02cc"开发者ID(AppID),"99***********************52e5"开发者密码(AppSecret)
$signPackage = $jssdk->GetSignPackage();
 
?><!DOCTYPE html>

 

至此完成《网页分享到微信显示图标、标题、摘要》所有的配置了。本篇配置步骤仅适用于我现在使用的WordPress,至于其它类型的网站仅供参考。

需要注意的是使用WP Super Cache缓存时间过长,会导致JS接口出现各种问题哟!

配置JSSDK经历的各种各样的坑,后续有时间再做详细记录吧。

发表评论