欢迎您来到,码代码-李雷博客        登录  |  注册

讲一讲如何在一个页面中使用多个百度分享按钮,分享不同的文章

更新:2015-09-21 16:50:57
人气:3165
来源:本站原创
A+

大家在使用百度分享按钮的时候,虽然很容易就能实现我们对单一固定文章的分享功能,但如果一个页面中有多篇文章,比如是一个列表页面,每个文章旁边都想加一个分享按钮,点击不同图标可以对应分享不同的文章,比如码代码-李雷博客(www.mdaima.com)中“PHP技术经验分享”与“资讯视频”栏目的文章列表样式,这样如何做到呢?

现在就讲一讲如何在一个页面中使用多个百度分享按钮,分享不同的文章。

<? 
$bdshare_array='';//默认设置百度分享按钮为自定义内容为空
for ($i=1;$i<=10;$i++){ //比如从数据库中读取10篇文章在列表中显示
	//生成百度分享不同的自定义按钮数组
	$bdshare_array.='{"tag" : "share_'.$i.'","bdText":"解决Nginx Helper插件一键清理缓存功能导致网站打不开问题'.$i.'","bdDesc":"这个功能的绝佳搭配'.$i.'","bdPic":"http://www.mdaima.cn/upload_image/2015/09/05/'.$i.'.jpg"},';//结尾的半角逗号别丢了
	//这里的tag值要与DIV中的data-tag值保持一致。其它的bdText,bdDesc,bdPic,这些分别为弹出的分享页面中的标题、描述、图片,我在结尾都加入了一个$i变量,是为了告诉大家这里是从数据库中读取的信息,是有变化的,大家在使用时直接从数据库中读取真实标题和引用图片就行了
?>
	<div class="bdsharebuttonbox" data-tag="share_<?=$i?>">
		<a href="#" class="bds_qzone" data-cmd="qzone" ></a><a href="#" class="bds_tsina" data-cmd="tsina" ></a><a href="#" class="bds_tqq" data-cmd="tqq" ></a>
	</div>
<? }?>

以上是如何从数据库中读取数据并形成列表。

下面这个就是如何引用自定义的百度分享按钮,并让其生效了。

<script>
	//百度分享按钮
	<? $bdshare_array=substr($bdshare_array,0,-1);//去掉最后一位半角逗号(,)?>

	window._bd_share_config={"common":{"bdSnsKey":{},"bdMini":"1","bdMiniList":false,"bdStyle":"2","bdSize":"16"},"share": [<?=$bdshare_array?>]};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>

实际使用输出后的标准代码为:

<div class="bdsharebuttonbox" data-tag="share_1">    
	<a href="#" class="bds_qzone" data-cmd="qzone" ></a><a href="#" class="bds_tsina" data-cmd="tsina" ></a><a href="#" class="bds_tqq" data-cmd="tqq" ></a>    
</div>
<div class="bdsharebuttonbox" data-tag="share_2">    
	<a href="#" class="bds_qzone" data-cmd="qzone" ></a><a href="#" class="bds_tsina" data-cmd="tsina" ></a><a href="#" class="bds_tqq" data-cmd="tqq" ></a>    
</div>    
<div class="bdsharebuttonbox" data-tag="share_3">    
	<a href="#" class="bds_qzone" data-cmd="qzone" ></a><a href="#" class="bds_tsina" data-cmd="tsina" ></a><a href="#" class="bds_tqq" data-cmd="tqq" ></a>    
</div>    

<script>    
	//百度分享按钮    
	window._bd_share_config={"common":{"bdSnsKey":{},"bdMini":"1","bdMiniList":false,"bdStyle":"2","bdSize":"16"},"share": [
	{"tag" : "share_1","bdText":"标题1","bdDesc":"描述1","bdPic":"http://www.mdaima.com/1.jpg"},
	{"tag" : "share_2","bdText":"标题2","bdDesc":"描述2","bdPic":"http://www.mdaima.com/2.jpg"},
	{"tag" : "share_3","bdText":"标题3","bdDesc":"描述3","bdPic":"http://www.mdaima.com/3.jpg"}
	]};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>
推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
  Ads by Google
  本站PHP博客源代码下载
本站使用的PHP博客系统采用PHP和MySql开发,程序开发完全是因为个人爱好,是自己纯手写PHP源代码,未采用任何PHP框架,现已免费开源共享提供给大家下载!
PHP博客下载
  联系博主
QQ:858353007   个人微信号:lileihot123
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2022 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号