当前位置 : 主页 > 网站运营 > 正文

DedeCMS微信分享文章带缩略图和描述

原创

重庆seo2020-12-12 11:36:10阅读()dedecms微信营销A+ / A-

通过微信进行文章的分享可以获得一定的流量,帮助提升网站IP、PV,特别对新网站来说还是比较重要的。当然,想获得较多的数据的前提是你的圈子有相应的用户群体。

在靠转发、点赞获得收益的订阅号时代,活跃在朋友圈分享的文章大都来自微信公众号,个人、机构纷纷开通自己的公众号,赚得盆满钵满。随着新兴自媒体的兴起(微信公众号其实也是自媒体),流量开始往更开放的自媒体平台倾斜,依靠大数据的支持头条系、百度系纷纷占领了诸多流量。

自媒体和传统的公众号由于内容分发机制不同,只要符合平台的规则,自媒体创作的内容(文章、视频)就可以推送给对该领域感兴趣的个人读者、观众,并不需要“中间人”的分享转发,因此一些头部作者或者所谓的大V在自媒体时代的不再是主导。

作者们可以在自有网站/博客、新浪博客/微博,抑或是其他自媒体平台上创作内容,都可以通过朋友圈进行分享。微信公众号本身的分享功能比较强大,但一般的自有网站分享的时候没有缩略图、描述等,需要接入微信系统是需要做JSSDK。下面介绍一下采用DedeCMS织梦做的网站接入JSSDK的方法。

网上有很多种解决方案,大家可以根据自己需求选择方案,官方的说明比较简单,参考着做就行了。

微信公众号分享权限

注意:目前个人账号无法进行实名认证,因此要用企业账号进行以下操作

1.绑定域名

微信公众平台 -> 公众号设置  -> 功能设置 ->JS接口安全域名

填写所对应的域名即可,可以填写多个,注意带www或者不带是不同的域名,按实际情况填写,不能频繁修改安全域名。

2.引入JS文件

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

目前最新版的是1.6.0版本的JS,支持 "updateTimelineShareData" 和 "updateAppMessageShareData" 接口,但1.0.1版本附录并不支持,老的 "onMenuShareTimeline" 和 "onMenuShareAppMessage" 即将即将被弃用。但经过测试后,还是1.4.0版本的JS和老的接口能正常使用,另外一些“摇一摇周边”的功能还要沿用1.1.0版本,估计是新老接口的更新换代还是需要一段时间。

建议大家采用1.4.0版本,在引入之前还需要引入JQ库,至于什么版本大家自己试一下即可,吖七采用的如下引入办法,经测试,以下JS引入放在</head>前或</body>前其实都没多大问题。

3.配置文件

HTTPS对HTTP文件不信任,因此引入文件采用“//”的用法,普通网站HTTP协议的可以直接写“http://”,支持HTTPS可以用“//”或“https://”的写法。

<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript">
 var url = encodeURIComponent(location.href.split("#")[0]);
 $.ajax({
   type: "get",
   url: "{dede:global.cfg_basehost/}/wechat.php?link=" + url, //{dede:global.cfg_basehost/}也可以不要,wechat.php文件放在根目录即可
   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: ["onMenuShareTimeline", "onMenuShareAppMessage"]
    }), 
    wx.ready(function() {
     wx.onMenuShareTimeline({
     title: "{dede:field.title function=html2text(@me)/}",
     desc: "{dede:field.description function=html2text(@me)/}",
     link: "{dede:field.id runphp='yes'}$result=GetOneArchive(@me);@me=$result['arcurl'];{/dede:field.id}",
     imgUrl: "{dede:field.litpic/}"
    }), 
    wx.onMenuShareAppMessage({
     title: "{dede:field.title function=html2text(@me)/}",
     desc: "{dede:field.description function=html2text(@me)/}",
     link: "{dede:field.id runphp='yes'}$result=GetOneArchive(@me);@me=$result['arcurl'];{/dede:field.id}",
     imgUrl: "{dede:field.litpic/}"
    })
   })
  }
 });
</script>

如果你的移动端和PC端分离,图片、链接应该用对应的移动端绝对路径。在网站根目录新建一个wechat.php的文件,内容如下

<?php
error_reporting(0);
$appid = 'xxxx'; //此处填写绑定的微信公众号的APPID
$appsecret = 'xxxxxx'; //此处填写绑定的微信公众号的密钥APPSECRET
function getJsApiTicket($appid, $appsecret)
{
    $data = json_decode(file_get_contents("jsapi_ticket.json"));
    if (is_null($data) || $data->expire_time < time()) {
        $access_token = getAccessToken($appid, $appsecret);
        // 如果是企业号用以下 URL 获取 ticket
        $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token={$access_token}";
        $res = json_decode(httpGet($url));
        if (!is_null($res)) {
            $ticket = $res->ticket;
            if ($ticket) {
                $newRes = array();
                $newRes['expire_time'] = time() + 7000;
                $newRes['jsapi_ticket'] = $ticket;
                $fp = fopen("jsapi_ticket.json", "w");
                fwrite($fp, json_encode($newRes));
                fclose($fp);
            }
        }
    } else {
        $ticket = $data->jsapi_ticket;
    }
    return $ticket;
}
function getAccessToken($appid, $appsecret)
{
    $data = json_decode(file_get_contents("access_token.json"));
    if (is_null($data) || $data->expire_time < time()) {
        $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$appsecret}";
        $res = json_decode(httpGet($url));
        $access_token = $res->access_token;
        if ($access_token) {
            $newRes = array();
            $newRes['expire_time'] = time() + 7000;
            $newRes['access_token'] = $access_token;
            $fp = fopen("access_token.json", "w");
            fwrite($fp, json_encode($newRes));
            fclose($fp);
        }
    } else {
        $access_token = $data->access_token;
    }
    return $access_token;
}
function httpGet($url)
{
    $oCurl = curl_init();
    if (stripos($url, "https://") !== FALSE) {
        curl_setopt($oCurl, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($oCurl, CURLOPT_SSL_VERIFYHOST, FALSE);
        curl_setopt($oCurl, CURLOPT_SSLVERSION, 1); //CURL_SSLVERSION_TLSv1
    }
    curl_setopt($oCurl, CURLOPT_URL, $url);
    curl_setopt($oCurl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($oCurl, CURLOPT_TIMEOUT, 500);
    $sContent = curl_exec($oCurl);
    $aStatus = curl_getinfo($oCurl);
    curl_close($oCurl);
    if (intval($aStatus["http_code"]) == 200) {
        return $sContent;
    } else {
        return false;
    }
}

function createNonceStr($length = 16)
{
    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    $str = "";
    for ($i = 0; $i < $length; $i++) {
        $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
    }
    return $str;
}

function getSignPackage($appid, $appsecret, $url)
{
    $ticket = getJsApiTicket($appid, $appsecret);
    $timestamp = time();
    $nonceStr = createNonceStr();
    $string = "jsapi_ticket={$ticket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";
    $signature = sha1($string);
    $signPackage = array(
        "appid" => $appid,
        "noncestr" => $nonceStr,
        "timestamp" => $timestamp,
        "url" => $url,
        "signature" => $signature,
        "concat" => $string,
    );
    return $signPackage;
}

$signPackage = getSignPackage($appid, $appsecret, $_GET['link']);
echo json_encode($signPackage);

建议大家先打开上面的dbug,可以方便查看接口是否正确配置,常见的错误可以参考官方说明附录5,比如前面出现的新接口未能使用就出现了

“permission deied”是公众号没有权限使用这个JSAPI,或者是调用的JSAPI没有传入config的jsApiList参数中(部分接口需要认证后才能使用)

这就是为什么个人公众号分享后无法显示缩略图和描述的原因了,另外微信分享文章的缩率图必须是本地的图片,站外图片识别失败。

    扩展阅读

    本文地址:https://www.vi586.com/life/759.html
    版权声明:原创文章,版权归重庆SEO吖七所有,欢迎分享本文,支持原创,转载请保留出处

    赞(95)