zblog把文章分享到微博、微信、QQ空间教程

温馨提示：手机扫码可阅读当前文章!
文章简介：当下曾经流行的国内第三方社区化分享工具几乎全部停止了服务，比如百度分享。目前依然可用的只有bshare，但它也正处于停止维护的状态，所以分享工具的使用几乎已经不可能了。如果需要为文章添加分享功能该怎么办呢？可以申请相关网站的API接口来开发...

当下曾经流行的国内第三方社区化分享工具几乎全部停止了服务，比如百度分享。目前依然可用的只有bshare，但它也正处于停止维护的状态，所以分享工具的使用几乎已经不可能了。如果需要为文章添加分享功能该怎么办呢？可以申请相关网站的API接口来开发，或者使用相关的URL分享链接自己添加。现在，我们为大家整理了一个教程，介绍如何为Z-Blog文章添加新浪微博、QQ空间和微信的分享按钮代码。

步骤：

1. 编辑主题的 post-single.php 文件，找到 {$article.Content} 代码上面或下面添加以下代码：

<div id="social-share">
    <ul>
        <li>
            <a class="wb" href="javascript:void(0);" onclick="shareUrl('weibo');">微博</a>
        </li>
        <li>
            <a class="wx" href="javascript:void(0);" onclick="shareUrl('weixin');">微信</a>
            <div id="shareWX">
                <div id="qrcode"></div>
                <div class="text">
                    <p>使用微信扫码二维码</p>
                    <p>分享给好友或朋友圈</p>
                </div>
            </div>
        </li>
        <li>
            <a class="qz" href="javascript:void(0);" onclick="shareUrl('qzone');">QQ空间</a>
        </li>
    </ul>
</div>

2. 编辑主题的样式文件 style.css，在文本中添加以下代码：

#social-share {padding:20px 0;}
#social-share ul {display:flex; justify-content: center; margin:0; padding:0;}
#social-share li {padding:0 10px; position:relative; margin:0; list-style: none;}
#social-share a {display:block; width:30px; height:30px; background:no-repeat center center; background-size:contain; text-indent:-9999em; overflow: hidden;}
#social-share .wx {background-image:url(images/social_weixin.png);}
#social-share .qz {background-image:url(images/social_qzone.png);}
#social-share .wb {background-image:url(images/social_weibo.png);}
#social-share #shareWX {background-color: #fff; padding:8px; border:5px solid #666; width:130px; position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom: 10px; display: none;}
#social-share #shareWX:after {content:''; display:block; border-top:10px solid #666; border-left:8px solid transparent; border-right:8px solid transparent; position:absolute; left:50%; top:100%; transform:translateX(-50%);} 
#social-share #shareWX.show {display: block;}
#social-share #qrcode {padding-bottom:100%; position:relative; margin-bottom:8px;}
#social-share img {display:block; width:100%; height:100%; position:absolute; left:0; top:0;}
#social-share .text {text-align:center; font-size:12px; color:#666; line-height: 1.5em;}

3. 下载用于生成文章二维码的 js 插件 qrcode.min.js，放在主题的 scripts 文件夹内。

4. 编辑主题的 footer.php 文件，在 </body> 上面添加以下代码：

{if $type == 'article'}
<script src="{$host}zb_users/theme/{$theme}/scripts/qrcode.min.js"></script>
<script type="text/javascript">
    function shareUrl(social){
        var _title = encodeURIComponent(document.title);
        var _url = document.location;
        var _pic = document.getElementsByTagName('img')[0].src;
        if(social == 'qzone'){           
            var _shareUrl = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + _url + '&title=' + _title + '&pics=' + _pic + '&summary=&desc=';
            window.open(_shareUrl,'_blank');        
        }else if(social == 'weibo'){
            var _shareUrl = 'https://service.weibo.com/share/share.php?url=' + _url + '&title=' + _title + '&pic=' + _pic;
            window.open(_shareUrl,'_blank');
        }else if(social == 'weixin'){
            if(document.getElementById('shareWX').className == ''){
                document.getElementById('shareWX').className = 'show';
                new QRCode(document.getElementById('qrcode'), '{$article->Url}');
            }else{
                document.getElementById('shareWX').className = '';
            }
        }  
    }
</script>
{/if}

注意：

- 需要在 style.css 中添加 social_weixin.png、social_qzone.png、social_weibo.png 三个图标图片，可以在 iconfont 网站上下载。

- 需要在 qrcode.min.js 中调用生成二维码的方法，并用文章地址作为参数。如果使用了其它生成二维码的插件，需要相应更改代码。

- 在网站后台首页清空缓存并重新编译模板后，打开网站文章即可看到分享按钮。