织梦分享按钮代码添加位置

分享按钮放在哪里

织梦文章页模板分通用、图片、软件等类型，分别对应不同文件。文章分享按钮通常添加在内容结束之后、上下篇导航之前，这是用户读完文章最易产生分享行为的黄金位置。

主要模板文件路径

/templets/default/article_article.htm：普通文章模板
/templets/default/article_image.htm：图片集模板
/templets/default/article_soft.htm：软件下载模板

找到{dede:field.body/}（正文输出标签）所在位置，在其下方插入分享代码即可。

纯CSS分享按钮组

不依赖百度分享等第三方JS，用纯CSS实现分享按钮组，加载快且可控：

<div class="share-row">
　<span>分享到：</span>
　<a href="javascript:shareWx()" class="wx">微信</a>
　<a href="javascript:shareQq()" class="qq">QQ</a>
　<a href="javascript:shareWb()" class="wb">微博</a>
　<a href="javascript:copyUrl()" class="copy">复制链接</a>
</div>

各平台分享链接生成

QQ空间分享

QQ分享通过URL参数传递标题、摘要、图片：

function shareQq(){
    var url=encodeURIComponent(location.href);
    var title=encodeURIComponent(document.title);
    var desc=encodeURIComponent('{dede:field.description/}');
    var pic=encodeURIComponent('{dede:field.litpic/}');
    window.open('https://connect.qq.com/widget/shareqq/index.html?url='
        +url+'&title='+title+'&desc='+desc+'&pics='+pic);
}

新浪微博分享

function shareWb(){
    var url=encodeURIComponent(location.href);
    var title=encodeURIComponent(document.title+' {dede:field.typename/}');
    var pic=encodeURIComponent('{dede:field.litpic/}');
    window.open('https://service.weibo.com/share/share.php?url='
        +url+'&title='+title+'&pic='+pic);
}

复制链接

function copyUrl(){
    var input=document.createElement('input');
    input.value=location.href;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    alert('链接已复制');
}

微信分享特殊处理

微信内分享不能直接用URL跳转，需调用微信JS-SDK。在公众号后台配置JS接口安全域名后，引入：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
wx.config({
    debug:false,
    appId:'{$appId}',
    timestamp:{$timestamp},
    nonceStr:'{$nonceStr}',
    signature:'{$signature}',
    jsApiList:['onMenuShareTimeline','onMenuShareAppMessage']
});
wx.ready(function(){
    wx.onMenuShareAppMessage({
        title:document.title,
        desc:'{dede:field.description/}',
        link:location.href,
        imgUrl:'{dede:global.cfg_cmsurl/}{dede:field.litpic/}'
    });
});
</script>

移动端分享优化

底部悬浮分享条

移动端阅读完毕返回顶部不便，可在底部做悬浮分享条：

.share-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;
  border-top:1px solid #eee;padding:10px;display:flex;justify-content:space-around;z-index:99}
@media(min-width:768px){.share-bar{display:none}}

UC/QQ浏览器唤起

部分国产浏览器支持nativeShareAPI，可直接唤起原生分享菜单：

if(nativeShare){
    nativeShare.setShareData({title:document.title,link:location.href});
    nativeShare.call();
}

常见问题

分享图片不显示

QQ/微博抓取的图片必须是公网可访问的绝对URL。织梦litpic字段是相对路径，需拼接{dede:global.cfg_cmsurl/}前缀。图片尺寸建议不小于300×300px。

分享标题乱码

必须用encodeURIComponent编码中文参数，否则在某些浏览器会乱码。模板编码与页面声明的charset需一致（建议UTF-8）。

落地行动建议

分享按钮上线后建议接入分享统计，在分享链接后附加UTM参数（如?from=qq），通过统计工具分析各平台带来的流量，针对性优化分享文案和配图。同时A/B测试按钮位置（顶部/底部/侧边悬浮），找到点击率最高的布局。