织梦如何添加分享按钮？-织梦建站-盈思创科技

使用织梦自带或官方市场插件（最简单、推荐新手）

这是最省事的方法,直接利用织梦自身的功能或官方市场提供的现成插件。

（图片来源网络，侵删）

分享”功能（DedeCMS V5.7及以上版本自带）

新版织梦在文章内容页模板中已经集成了分享功能,只需要确保模板中调用了这个标签即可。

操作步骤：

登录织梦后台，进入“模板” -> “默认模板管理”。
找到你当前正在使用的文章内容页模板（通常是 article_article.htm）。
在这个模板文件中，找到类似 {dede:field name='body'/} 的地方,通常文章正文下面会有一个分享区域。
如果没有，或者你想修改它,可以手动添加以下标签：

<!--分享到QQ空间、新浪微博、腾讯微博、人人网、微信等-->
<div class="bdsharebuttonbox">
    <a href="#" class="bds_more" data-cmd="more">分享到</a>
    <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
    <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
    <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
</div>
<script>
    window._bd_share_config = {
        "common" : {
            "bdText" : "{dede:field.title/}", // 分享的文字内容，这里是文章标题
            "bdDesc" : "{dede:field.description function='html2text(@me)'/}", // 分享的描述，这里是文章摘要
            "bdUrl" : "{dede:field name='arcurl'/}", // 分享的链接，这里是文章URL
            "bdPic" : "{dede:field.litpic/}" // 分享的图片，这里是文章缩略图
        },
        "share" : [{
            "bdSize" : 16
        }]
    };
    with(document)0== (getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>

说明：
- 这段代码包含了分享按钮的HTML结构和调用百度分享JS的代码。
- {dede:field.title/}、{dede:field.description/}、{dede:field.arcurl/}、{dede:field.litpic/} 是织梦的模板标签，会自动替换为文章的标题、URL和缩略图。
- 你可以根据需要增删按钮，比如把 a 标签里的 class 和 data-cmd 值对应修改即可。

从官方市场下载分享插件

如果自带的分享功能不满意，或者你用的是旧版本，可以去织梦官方的DedeCMS市场搜索“分享”关键词,会有很多现成的插件可供下载安装。

操作步骤：
1. 登录织梦后台，进入“模块” -> “DedeCMS商城”。
2. 在搜索框中输入“分享”或“分享按钮”。
3. 找到合适的插件，点击“下载安装”,按照提示完成安装。
4. 安装后，通常在后台的“模块” -> “模块管理”中可以找到该插件,进行简单的配置。
5. 页模板中调用插件提供的标签即可。

手动集成第三方分享平台代码（最灵活、效果最好）

如果你想获得更美观、功能更强大的分享效果（比如带分享计数、悬浮窗等），可以手动集成国内主流的分享平台代码，如百度分享、JiaThis、Share.js等，这里以 JiaThis（加网） 为例，因为它界面美观,功能强大。

（图片来源网络，侵删）

注册并获取代码

访问 JiaThis官网,注册并登录账号。
进入“获取代码”页面。
选择你喜欢的分享按钮样式（如“横向滑动”、“大图标”等）。
关键一步： 在配置选项中，找到 设置” 或类似选项。
- 选择 动态获取，并填写 {dede:field.title/}
- 分享摘要: 选择 动态获取，并填写 {dede:field.description function='html2text(@me)'/}
- 分享链接: 选择 动态获取，并填写 {dede:field name='arcurl'/}
- 分享图片: 选择 动态获取，并填写 {dede:field.litpic/}
复制JiaThis生成的全部代码（包含 <script> 标签）。

将代码添加到织梦模板

登录织梦后台，进入“模板” -> “默认模板管理”。
打开你的文章内容页模板 article_article.htm。
在你希望显示分享按钮的位置（例如文章标题下方、文章内容下方、评论框上方等）,粘贴你刚刚复制的JiaThis代码。
保存模板，然后到前台刷新文章页面,就能看到分享按钮了。

使用纯CSS/JS自定义分享按钮（最个性化）

如果你对前端有一定了解，想完全自定义分享按钮的样式和功能,可以自己动手实现。

准备HTML结构

在 article_article.htm 模板中，添加一个放按钮的 div。

<div class="my-share-buttons">
    <a href="#" class="share-btn share-weixin" title="分享到微信">
        <i class="fa fa-weixin"></i> 微信
    </a>
    <a href="#" class="share-btn share-weibo" title="分享到微博">
        <i class="fa fa-weibo"></i> 微博
    </a>
    <!-- 可以添加更多按钮 -->
</div>

注意： 这里的 fa fa-weixin 是Font Awesome图标库的类名，你需要先在网站头部引入Font Awesome。

编写CSS样式

在模板文件中或外部的CSS文件中,添加样式来美化你的按钮。

.my-share-buttons {
    margin: 20px 0;
    text-align: center;
}
.share-btn {
    display: inline-block;
    margin: 0 10px;
    padding: 8px 15px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s;
}
.share-btn:hover {
    background-color: #e0e0e0;
    color: #000;
}
/* 你可以为不同平台设置不同颜色 */
.share-weixin { background-color: #07C160; color: white; }
.share-weibo { background-color: #E6162D; color: white; }

编写JavaScript实现分享功能

这是最关键的一步，你需要用JS来处理点击事件,并调用各平台的分享接口。

（图片来源网络，侵删）

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取文章信息
    var title = document.title; // 或者用 {dede:field.title/} 通过JS获取
    var url = window.location.href; // 或者用 {dede:field.name='arcurl'/}
    var pic = document.querySelector('meta[property="og:image"]')?.content || ''; // 获取og图片，或者用织梦标签获取
    // 微信分享
    var weixinBtn = document.querySelector('.share-weixin');
    if (weixinBtn) {
        weixinBtn.addEventListener('click', function(e) {
            e.preventDefault();
            // 微信分享通常需要生成一个二维码，这里简化处理，弹出提示
            alert('请使用微信扫一扫功能扫描页面二维码进行分享。');
            // 实际项目中，这里可以弹出一个包含二维码的模态框
        });
    }
    // 新浪微博分享
    var weiboBtn = document.querySelector('.share-weibo');
    if (weiboBtn) {
        weiboBtn.addEventListener('click', function(e) {
            e.preventDefault();
            var weiboUrl = 'http://service.weibo.com/share/share.php?title=' + encodeURIComponent(title) + '&url=' + encodeURIComponent(url) + '&pic=' + encodeURIComponent(pic);
            window.open(weiboUrl, '_blank');
        });
    }
    // 可以继续添加QQ空间、QQ好友等平台的分享逻辑
});
</script>

总结与建议

方法	优点	缺点	适用人群
自带/插件	简单快捷，无需代码，官方支持	样式和功能可能比较陈旧，不够灵活	新手，追求快速搭建
手动集成	效果美观，功能强大（带计数等），相对稳定	需要注册第三方平台，代码稍多	大多数用户，平衡了美观与易用性
自定义	完全个性化，样式和功能自由度最高	需要一定的HTML/CSS/JS基础，维护成本高	开发者，有特殊设计需求

给你的建议：

如果你是新手：直接使用 方法一,织梦自带的分享功能已经足够满足基本需求。
如果你想要更好看的效果：强烈推荐 方法二，使用JiaThis或百度分享,几步就能实现专业级的分享效果。
如果你是网站开发者，且对UI有严格要求：可以尝试 方法三,打造独一无二的分享组件。

希望这些方法能帮到你！

织梦如何添加分享按钮？

使用织梦自带或官方市场插件（最简单、推荐新手）

分享”功能（DedeCMS V5.7及以上版本自带）

从官方市场下载分享插件

手动集成第三方分享平台代码（最灵活、效果最好）

注册并获取代码

将代码添加到织梦模板

使用纯CSS/JS自定义分享按钮（最个性化）

准备HTML结构

编写CSS样式

编写JavaScript实现分享功能

总结与建议

相关文章

目录[+]