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