欢迎您来到,王磊个人博客        登录  |  注册

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

更新:2015-09-21 16:50:57
人气:2434
来源:本站原创
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>

打赏

取消

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
 
 
欢迎来到王磊博客 www.love1010.com
技术支持:本PHP博客系统,由www.mdaima.com 开发并免费开源分享   
? ?