经验分享

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

我的站长站 2019-12-10 人阅读

我们经常看到某些自媒体网站信息列表都会有个分享功能,可以分享对应的信息内容。大部分都是自行开发的分享接口,为了节省开发时间,我们也可以用百度分享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.wdzzz.com",
									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.wdzzz.com",
									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.wdzzz.com",
									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>
相关推荐
  • html教程
  • HTML5视频自动循环播放方法

    如果需要在网页中添加视频,可以参考下面的代码,支持MP4视频自动循环播放。纯HTML5视频自动循环播放<!DOCTYPE HTML><html><body><video controls="controls" loop="loop" autoplay="autoplay" style="width:100%;vertical-align:middle;"><source s...

    经验分享 2039 4年前
  • html入门教程之a标签的使用方法

    一:什么是a标签?a标签的作用:就是页面之间的跳转路由,通网问路的通道。a标签的格式:<a href="链接">展示内容</a><a href="http://www.wdzzz.com/">我的站长站</a>二:a标签的属性a标签中有一个target属性,这个属性的作用就是专门用于控制如何跳转的_blank于...

    经验分享 211 4年前
  • HTML使用clip-path制作地图
    HTML使用clip-path制作地图

    clip-path制作的地图是指地理上的地图,不是指网站地图!大天朝的地图想必每个中国人都知道,也经常见到。站长应该见得特别多了,特别是在检查网站速度的时候,检查平台会以一张地图的形式展示出来,那么这...

    经验分享 190 4年前
最新更新