如何制作微信圖文鏈接？微信圖文鏈接生成

微信圖文鏈接，可設置個性化的分享圖片、標題、描述等，那么如何制作微信圖文鏈接呢？眾所周知微信圖文鏈接會使分享的內容更生動有趣，更容易獲得良好的傳播效果，相較於裸鏈接，圖文鏈接更具有吸引力，今天就給大家介紹一下微信圖文鏈接的生成方法！

 

微信圖文鏈接與普通鏈接

普通鏈接

 

微信圖文鏈接

 

很明顯能看到，圖文鏈接無論是美觀程度還是信息曝光率都要完勝普通鏈接，對於微信營銷的商家的來說，圖文鏈接帶來的轉化率要優於普通鏈接很多。

 

如何制作圖文鏈接？

方法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>

到這里就配置完成，正常情況下的話分享出去就會有摘要和分享圖了。