如何制作微信图文链接？微信图文链接生成

微信图文链接，可设置个性化的分享图片、标题、描述等，那么如何制作微信图文链接呢？众所周知微信图文链接会使分享的内容更生动有趣，更容易获得良好的传播效果，相较于裸链接，图文链接更具有吸引力，今天就给大家介绍一下微信图文链接的生成方法！

 

微信图文链接与普通链接

普通链接

 

微信图文链接

 

很明显能看到，图文链接无论是美观程度还是信息曝光率都要完胜普通链接，对于微信营销的商家的来说，图文链接带来的转化率要优于普通链接很多。

 

如何制作图文链接？

方法1：使用快兔工具箱

1、进入官网链接

http://www.w1card.cn

2、需准备材料

准备链接+自定义的标题+自定义的内容+缩略图即可自动生成。

 

方法2：对接接口

1、需准备材料

① 分享标题+描述+logo

② 自己的分享域名

③ 对接接口

 

方法3：对接SDK 

1、准备认证的公众号+备案域名

2、配置过程 

①  绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”（就是发布用的那个域名） 

②  获取access_token

这部分工作属于后台开发，主要功能是利用公共号APPID、APPSECRET从微信服务器获取对应的access_token。由于这部分代码官方有demo，所以直接用官方的sample例子做演示。

下载官方示例代码后，根据自己的情况选择对应的后台语言(这里以PHP为例)。将下载得到的压缩包解压后复制php文件夹到网站根目录，然后将需要分享出去的html文件的后缀名改为.php（必须。因为后台不完善所以不能直接ajax获得access_token的值，这里假设需要分享的html页面是index.php）

 

打开index.php，在html的DOCTYPE声明之前添加一段PHP代码：

<?php
require_once "../php/jssdk.php";/* 这里的文件路径视`php`文件夹所在路径而定。不一定都要一样，个人建议扔到一个所有html文件夹都可以引用的目录*/
$jssdk = new JSSDK("你的APPID", "你的APPSECRET");
$signPackage = $jssdk->GetSignPackage();
?>

 

3、前端配置验证权限

这里是前端的工作，主要是利用前一步得到的access_token来获取签名等认证信息，只有正确的配置才可以正常获取到使用官方js-sdk的权限。

① 引入JS文件

在index.php文件里添加一个script标签，引用官方js：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

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

<script>
    wx.config({
        debug: 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: [//需要使用的JS接口列表,分享默认这几个，如果有其他的功能比如图片上传之类的，需要添加对应api进来
            'checkJsApi',
            'onMenuShareTimeline',//
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo'
        ]
    });
</script>

③ 配置分享信息并通过ready接口处理 

<script>
window.share_config = {
     "share": {
        "imgUrl": "http://www.yourwebsite.com/share.png",//分享图，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。
        "desc" : "你对页面的描述",//摘要,如果分享到朋友圈的话，不显示摘要。
        "title" : '分享卡片的标题',//分享卡片标题
        "link": window.location.href,//分享出去后的链接，这里可以将链接设置为另一个页面。
        "success":function(){//分享成功后的回调函数
        },
        'cancel': function () { 
            // 用户取消分享后执行的回调函数
        }
    }
};  
    wx.ready(function () {
    wx.onMenuShareAppMessage(share_config.share);//分享给好友
    wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
    wx.onMenuShareQQ(share_config.share);//分享给手机QQ
});
</script>

到这里就配置完成，正常情况下的话分享出去就会有摘要和分享图了。