将网页分享到微信带有缩略图和简介

发布时间:2023-07-11 09:36:32 作者:超级管理员 来源:Loy 浏览量(228) 点赞(294)
摘要:一、概述做这个的需求是同事和客户经常反馈说,把网址分享到微信群或者朋友圈,不显示自定义图标,问有什么解决方法,网上也查了好多资料,做了不少的尝试,做了很久测试才成功,网上的资料不太完整,少了一点地方没有注意到图标都不会显示,这里作者特把网上没有注意到的地方整理出来,希望对有需要这个功能的朋友有一定的帮助要实现分享网址到朋友圈显示缩略图的功能,需要注意这5点,不满足的就不用往下测试了,测试了也不会有效果的1)需要认证公众号才行,认证的公众号才有分享接口权限2)需要jquery脚本支持3)图片地址必须写全,不能相对引用4)网址不能含有特殊字符5)网站本身必须完成工信部备案认证的公众号才有分享接口的权限二、制作流程1、添加IP白名单,注意:开启了密钥后,才有IP白名单那个选项登陆自己已认证公众号,点击“开发”—“基本配置”—“IP白名单”,将自己网站对应的IP加入即可,AppID和AppSecret记得保存好,后面备用2、增加JS接

一、概述

把网址分享到微信群或者朋友圈,不显示自定义图标,问有什么解决方法,网上也查了好多资料,做了不少的尝试,做了很久测试才成功,网上的资料不太完整,少了一点地方没有注意到图标都不会显示,这里作者特把网上没有注意到的地方整理出来,希望对有需要这个功能的朋友有一定的帮助


image.png


要实现分享网址到朋友圈显示缩略图的功能,需要注意这5点,不满足的就不用往下测试了,测试了也不会有效果的

1)需要认证公众号才行,认证的公众号才有分享接口权限
2)需要jquery脚本支持
3)图片地址必须写全,不能相对引用
4)网址不能含有特殊字符
5)网站本身必须完成工信部备案


网址分享显示自定义图标之认证的公众号才有分享接口的权限
认证的公众号才有分享接口的权限


二、制作流程

1、添加IP白名单,注意:开启了密钥后,才有IP白名单那个选项

登陆自己已认证公众号,点击“开发”—“基本配置”—“IP白名单”,将自己网站对应的IP加入即可,AppID和AppSecret记得保存好,后面备用


网址分享显示自定义图标之添加IP白名单



2、增加JS接口安全域名

点击“设置”—“公众号设置”—“功能设置”—“JS接口安全域名”,将自己的网站域名加入即可


网址分享显示自定义图标之添加JS接口安全域名



3、引入JS文件

在自己网站的具体要分享的页面增加如下JS脚本,把脚本里面的标题、摘要、图片地址以及url根据实际情况改成自己的就可以了

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
 <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
 <script type="text/javascript">
    var url = encodeURIComponent(location.href.split("#")[0]);
    $.ajax({
        type: "get",
        url: "https://" + window.location.host + "/wxsdk/sample.php?link=" + url,// 注意如果网站没启用SSL,前方的https改为http
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function(e) {
            var d = e.appId,
                i = e.timestamp,
                t = e.nonceStr,
                n = e.signature;
            wx.config({
                debug: 0, //如果分享失败,把0改成1开启错误提示看看
                appId: d,
                timestamp: i,
                nonceStr: t,
                signature: n,
                jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
            });

            var s_title = document.title, // 分享标题
                s_desc = document.getElementsByName('description')[0].content, //分享描述
                s_link = location.href.split("#")[0], //分享链接
                s_imgUrl = "https://www.tenfly.ltd/logo.jpg"; // 分享图标 注意如果网站没启用SSL,前方的https改为http

            wx.ready(function() {
                // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
                wx.updateAppMessageShareData({
                    title: s_title, // 分享标题
                    desc: s_desc, // 分享描述
                    link: s_link, // 分享链接
                    imgUrl: s_imgUrl
                })
                // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
                wx.updateTimelineShareData({
                    title: s_title, // 分享标题
                    link: s_link, // 分享链接
                    imgUrl: s_imgUrl
                })
            })
        }
    });
</script>

附:wxskd.zip 已打包好,修改里面的sample.php中

$appId = ' ';// 这里填写公众号后台获取到的AppID

$appSecret = ' ';// 这里填写公众号后台获取到的AppSecret

即可!

wxsdk.zip

解压到根目录/wxsdk/



二维码

扫一扫,关注我们

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

我有话说:

评论记录:

快来抢沙发~

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!