网站开发

包含所有网站建设开发相关的教程内容,如CSS教程,JS教程,html教程,服务器配置,域名空间的购买教程.

一个页面多个百度分享组件教程

发表于:2019-12-10 点击: 栏目:

网站开发

收藏(0)

我们经常看到某些自媒体网站信息列表都会有个分享功能,可以分享对应的信息内容。大部分都是自行开发的分享接口,为了节省开发时间,我们也可以用百度分享API来完成这种功能。

近期案列用到的一个页面多个百度分享组件代码,由于百度分享官网关闭了,所以看不了官方API,网上各种查资料才找到一个可以用的。

一个页面多个百度分享代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
<script>window._bd_share_config = {share: []};</script>
 <body>
  	<div class="bdsharebuttonbox col-xs-5" data-tag="share_1">
                            <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                            <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                            <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
                            <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
                            <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                            <a href="#" class="bds_more" data-cmd="more"></a>
                            <a class="bds_count" data-cmd="count"></a>
                        </div>
 <script>
		  var share1 = {
                                tag: "share_1",
                                bdText: "分享的内容",
                                bdUrl: "http://www.11px.cn",
									bdDesc:"111"
                            };
                            window._bd_share_config.share.push(share1);
	</script>


<div class="bdsharebuttonbox col-xs-5" data-tag="share_2">
                            <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                            <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                            <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
                            <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
                            <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                            <a href="#" class="bds_more" data-cmd="more"></a>
                            <a class="bds_count" data-cmd="count"></a>
                        </div>
 <script>
var share2 = {
                                tag: "share_2",
                                bdText: "分享的内容",
                                bdUrl: "http://www.11px.cn",
									bdDesc:"222"
                            };
                            window._bd_share_config.share.push(share2);					
	</script>

         <script>
	 with (document)0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=' + ~(-new Date() / 36e5)];							
	</script>
     </div>
 </body>
</html>

首先需要在头部重置一下百度分享插件

<script>window._bd_share_config = {share: []};</script>

然后在分享组件加个

data-tag="share_1">

区分一下百度分享组件。

接着是分享内容代码

<script>
		  var share1 = {
                                tag: "share_1",
                                bdText: "分享的内容",
                                bdUrl: "http://www.11px.cn",
									bdDesc:"111"
                            };
                            window._bd_share_config.share.push(share1);
	</script>

这里的share_1对应的分享按钮的share_1,share1也是为了区分分享内容需要不同。

最后在底部引用百度分享的JS

<script>
	 with (document)0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=' + ~(-new Date() / 36e5)];							
	</script>
相关推荐