zblog实现分享文章至微博、微信、QQ空间的代码及添加教程

zblog教程 1490

当下曾经热门的国内第三方社区化分享工具基本已经全部停止了服务，如百度分享，目前网站还能访问的似乎只有bshare了，但是也已经处在停止维护的状态，分享工具也几乎是不能正常使用的情况。那如果确实需要添加文章分享功能该怎么办呢？可以申请相关网站的api接口来开发，或者使用相关的URL分享链接自己添加，下面博客吧整理的给Z-Blog文章添加新浪微博、QQ空间和微信的分享按钮代码的教程步骤。

效果如图：

zblog实现分享文章至微博、微信、QQ空间的代码及添加教程

PS：如果没有特点说明，下文中提到的“编辑主题”均指编辑网站当前正在使用的那个主题。

1、编辑主题的 post-single.php 文件（通用是这个文件，如果不是请在 single.php 查看调用的哪个），找到代码：

1

{$article.Content}

在其代码上面或下面添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<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，在文本中另起一行，添加下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13

#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;}

PS：social_weixin.png、social_qzone.png、social_weibo.png三个是对应微信、QQ空间、微博的图标图片，博客吧不提供，可以在 iconfont网站上找来下载，然后上传到主题的style/images/目录

3、在下面的网址中下载用于生成文章二维码的js插件 qrcode.min.js

https://github.com/davidshimjs/qrcodejs

PS：不限于这款插件，也可以使用能生成二维码的其它js插件，把步骤 3 中的 new QRCode 方法换成其它插件的即可。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{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}

保存文件后，进入网站后台首页，点击“清空缓存并重新编译模板”后，打开网站文章就有分享按钮了。

精品推荐：