使用微信接口自定义分享的网页信息(缩略图,标题,描述)

当我们在微信中分享一个网页给朋友,朋友圈,微博或者 QQ 空间时,如何使用微信的 JS-SDK 接口自定义标题,描述与缩略图。

官网说明文档链接,但对于刚接触的新手,可能会走弯路,所以将我的开发过程写出来,以供大家参考。

1、因为是微信公众平台开发,所以第一步就是将你的域名绑定到微信公众平台,如果自己没有,那就绑定到别人的微信公众平台。
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
公众号绑定域名

2、下载官方的示例代码(http://demo.open.weixin.qq.com/jssdk/sample.zip)。

下载解压后,打开其中的 php 版本,可以看到示例代码文件,主要的示例代码“sample.php”,打开文件,其中有四个地方需要我们填写与修改。
sample示例代码

3、AppID 与 AppSecret,登录微信公众平台进入“开发者中心”的“配置项中”查看 AppID 与 AppSecret,然后填入文件对应位置。AppID与AppSecret

4、填写我们要使用的 API 以及要调用的 API,我们现在要使用的是分享接口,分享接口一共有五个,分别是:“分享到朋友圈”、“分享到朋友”、“分享到 QQ ”、“分享到微博”以及“分享到 QQ 空间”,配置的填写如下:

5、现在我们看看“jssdk.php”这个文件中的httpGet()函数:

里面用到了curl_init()这个函数,属于 CURL 函数库,有些服务器默认未开启,所以需要注意你服务器的 CURL 函数库是否开启,否则无法使用。

6、将修改过的示例代码加入wordpress中,我的做法是放入主题的“footer.php”文件的底部,“<?php wp_footer(); ?>”与“</body>”之间。

7、将“jssdk.php”与上面的“footer.php”置于同一级目录,将“access_token.json”与“jsapi_ticket.json”放置于网站根目录。

8、在微信中打开网站,会出现如图的调试信息,代表微信 SDK 配置正常,将“wx.config”中的“debug”配置置设置为“false”即可关闭调试信息。
js-sdk调试信息

9、点击右上角菜单中“发送给朋友”的效果,图中数字所标示的分别代表“wx.ready”配置中的“title”,“imgUrl”与“desc”,一般“title”与“link”不配置,使用网页自己的标题与链接,否则会强制使用你在“wx.ready”中的配置,这样你所有的分享看起来都一样,并且打开后也是同一个链接,极少情况需要这样。
js-sdk发送到朋友的效果

10、使用的微信的 JS-SDK 接口还有一个附加功能,长按图片后,会自动识别其中的二维码,下面的二维码链接到本篇文章。

二维码
长按图片,弹出识别二维码选项

长按二级码识别

《使用微信接口自定义分享的网页信息(缩略图,标题,描述)》有5个想法

  1. 多谢这篇文章!最近手机微信升级后,再分享wordpress博客文章不显示缩略图了,还以为是wp问题,然后发现其他很多非wp平台分享到朋友圈也不显示缩略图,甚至百度也不显示。
    几番搜索才发现现在新版微信开始限制必须js-sdk调用才能显示缩略图,以前自动获取图片的办法不再支持。
    然后开始找微信js-sdk和wordpress的整合教程。按照谷歌时间搜索一年内,完全找不到教程 – – ,都心灰意冷等以后再说的时候,万幸搜到了这篇文章,没想到2015年就有这篇教程(关键词“微信 分享 缩略图 js-sdk”第一页)
    示例代码测试缩略图成功。
    晚点再研究下插入wp中。
    先给博主点赞!

  2. 已成功插入wordpress,分享朋友和朋友圈成功。

    请教一个问题:
    我目前desc摘要是设置固定文本。如何写才能自动调用wp文章的摘要呢?
    感谢!

    1. 自动摘要我没试过,但有一种思路是在摘要部分使用php代码获取文章摘要,类似于下面的代码片段:

      其中getDigest()是获取摘要的函数,如果 wordpress 有提供,就用系统提供的,否则就要你自己实现了。
      这种方式不一定有用,但值得一试。

  3. 我想确认下,现在个人的订阅号(未认证)是不是即使设置了JSSDK分享也没有缩略图了,替换成默认灰色图了?

发表评论

电子邮件地址不会被公开。 必填项已用*标注