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

大家在使用百度分享按钮的时候，虽然很容易就能实现我们对单一固定文章的分享功能，但如果一个页面中有多篇文章，比如是一个列表页面，每个文章旁边都想加一个分享按钮，点击不同图标可以对应分享不同的文章，比如码代码-九品源码（www.19jp.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.19jp.com/1.jpg"},
	{"tag" : "share_2","bdText":"标题2","bdDesc":"描述2","bdPic":"http://www.19jp.com/2.jpg"},
	{"tag" : "share_3","bdText":"标题3","bdDesc":"描述3","bdPic":"http://www.19jp.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>

以上就是讲一讲如何在一个页面中使用多个百度分享按钮，分享不同的文章的详细内容，更多关于讲一讲如何在一个页面中使用多个百度分享按钮，分享不同的文章的资料请关注九品源码其它相关文章！