百度分享自定义分享url和内容的示例

网站分享功能，是非常实用的，米扑官网、米扑博客、米扑代理等网站都会有分享链接

米扑科技选择的是百度分享，之前在米扑博客里有过介绍：

WordPress https支持百度分享

WordPress 安装百度分享

准备工作

本文将介绍自定义百度分享url和内容，方便于做米扑代理的推广返现

百度分享官网：http://share.baidu.com

百度分享文档：http://share.baidu.com/code/advance

百度分享示例：https://blog.mimvp.com/about

提示：百度分享默认是 http，但示例是 https，解决方案见 WordPress https支持百度分享

代码实例

1、百度分享的默认示例

1）https 添加百度分享代码

<!-- baidu share -->
<div class="bdsharebuttonbox bdshare-button-style0-24" style="padding-bottom:10px;padding-left:10px;" data-bd-bind="1526881528994">
<p style="font-size:16px; height:18px; line-height:18px;">分享到：</p>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a>
<a href="#" class="bds_ty" data-cmd="ty" title="分享到天涯社区"></a>
<a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
<a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
<a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
<a href=

<script> 
window._bd_share_config = {
	"common": {
		"bdSnsKey": {},
		"bdText": "",
		"bdMini": "2",
		"bdMiniList": [	"mshare", "tsina", "weixin", "qzone", "renren", "twi", "fbook", 
						"tqq", "bdxc", "kaixin001", "tqf", "bdysc", "tieba", "douban", 					
						"tsohu", "bdhome", "sqq", "thx", "qq", "ibaidu", "taobao", "hi", 
						"baidu", "sohu", "t163", "qy", "meilishuo", "mogujie", 						
						"diandian", "huaban", "leho", "share189", "duitang", "hx", 
						"tfh", "fx", "youdao", "sdo", "qingbiji", "ifeng", "people", 						
						"xinhua", "ff", "mail", "kanshou", "isohu", "yaolan", "wealink", 
						"xg", "ty", "iguba", "deli", "s51", "s139", "linkedin", "copy", "print"
					],
		"bdMiniList": false,
		"bdPic": "",
		"bdStyle": "0",
		"bdSize": "24"
	},
	"share": {}
};
with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = '/static/api/js/share.js?v=89860593.js?cdnversion=' + ~ (-new Date() / 36e5)]; 
</script>
<!-- end of baidu share -->

实际代码截图：

2）https 示例演示

米扑博客 - 关于：https://blog.mimvp.com/about

注意：上面示例是 https 网站，js使用的绝对地址 src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

详细的 https 添加百度分享，请见米扑博客：WordPress https支持百度分享

2、百度分享自定义示例

百度分享自定义分享url和内容，跟上面您默认示例类似，不同点是需要在 window._bd_share_config 配置中，指定自定义的url和内容等描述信息

1）百度分享的完整结构

分享代码可以分为三个部分：HTML、配置信息、js加载，示例如下：

<div class="bdsharebuttonbox" data-tag="share_1">
	<!-- 此处添加展示按钮 -->
</div>
<script>
	window._bd_share_config = {
	//此处添加分享具体设置
	}

	//以下为js加载部分
	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>

详见百度分享文档：http://share.baidu.com/code/advance

2）配置自定义内容

配置 window._bd_share_config 中的 common 信息

common 通用设置将作用于所有分享类型，可将通用设置放于此处，如分享内容、分享url等。

window._bd_share_config = {  
    "common": {  
        "bdSnsKey": {},  
        "bdMini": "2",  
        "bdMiniList": false,  
        "bdText": '自定义分享内容',   
        "bdDesc": '自定义分享摘要',   
        "bdUrl": '自定义分享url',     
        "bdPic": '自定义分享图片url',  
        "bdStyle": "1",  
        "bdSize": "16"  
    },  
    "share": {  
        "bdSize": 16,  
        "bdCustomStyle":"/css/mimvp-demo.css"  
    }  
}

common 通用设置参数项解析：

配置项名称	值类型	格式和取值	描述
bdText	string	自定义	分享的内容
bdDesc	string	自定义	分享的摘要
bdUrl	string	自定义	分享的Url地址
bdPic	string	自定义	分享的图片Url地址
bdSign	string	on｜off｜normal	是否进行回流统计。 'on': 默认值，使用正常方式挂载回流签名（#[数字签名]） 'off': 关闭数字签名，不统计回流量 'normal': 使用&符号连接数字签名，不破坏原始url中的#锚点
bdMini	int	1｜2｜3	下拉浮层中分享按钮的列数
bdMiniList	array	['qzone','tsina',...]	自定义下拉浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表
onBeforeClick	function	function(cmd,config){}	在用户点击分享按钮时执行代码，更改配置。 cmd为分享目标id，config为当前设置，返回值为更新后的设置。
onAfterClick	function	function(cmd){}	在用户点击分享按钮后执行代码，cmd为分享目标id。可用于统计等。
bdPopupOffsetLeft	int	正｜负数	下拉浮层的y偏移量
bdPopupOffsetTop	int	正｜负数	下拉浮层的x偏移量

3）简单自定义示例

<div class="bdsharebuttonbox">
	<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>
</div> 

<script>
	window._bd_share_config=
	{
		"common":{
			"bdSnsKey": {},  
            "bdMini": "2",  
            "bdMiniList": false,  
            "bdText": '米扑代理',   
            "bdDesc": '米扑代理，99.9%高可用率，永久免费试用',   
            "bdUrl": 'https://proxy.mimvp.com?partnerid=52c885Cd521371C3',     
            "bdPic": 'https://proxy.mimvp.com/img/partner_mimvp.png',  
            "bdStyle": "0",  
            "bdSize": "16"  
		},
		"share":{},
		"image":{
			"viewList":["qzone","tsina","tqq","renren","weixin"],
			"viewText":"分享到：",
			"viewSize":"16"
		},
		"selectShare":{
			"bdContainerClass":null,	
			"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]
		}
	};

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>

简单示例的分享界面效果图：

点击分享到QQ空间，分享链接效果图：

4）高级自定义示例改进型

步骤3）简单示例里，初步实现了自定义分享，但也有几个问题需要解决：

a）不需要QQ空间、微博、更多加号“+”等图标，只需要一个文字按钮“分享链接”即可

b）文字按钮“分享链接”的格式需要定义css，需自定义 "bdCustomStyle"

c）分享链接里不需要回流统计，即去掉分享链接里井号"#"后面的字符串，需设置 bdSign = off

d）其它细节处理，如按钮样式符合上下文、适应https网址（默认只支持http）、处理悬浮和点击都出现分享框等

下面依次解决上面的四个问题

解决 a）

修改 <div class="bdsharebuttonbox"> 为<span class="bdsharebuttonbox">，并只保留 <a href="#" class="bds_more" data-cmd="more">分享链接</a> 样式修改如下

<span class="bdsharebuttonbox">
	<a class="contact-btn" data-cmd="more" target="_blank" href="/partner.php">分享链接</a>
</span>

即把 div 修改成了 span 解决了换行问题，去掉了 bds_more 禁止了鼠标悬浮弹出分享框（手机上点击会弹出两个框，体验非常糟糕，所以禁用鼠标悬浮，只保留点击事件）

解决 b）

自定义css样式，修改 "bdCustomStyle"，如下

	window._bd_share_config=
	{
		"common":{
			"bdSnsKey": {},  
	        "bdMini": "2",  
	        "bdMiniList": false,  
	        "bdText": '米扑代理',   
	        "bdDesc": '米扑代理，99.9%高可用率，永久免费试用',   
	        "bdUrl": 'https://proxy.mimvp.com?partnerid=3648d15B85dEa26b',     
	        "bdPic": 'https://proxy.mimvp.com/img/partner_mimvp.png',   
            "bdSign": 'off',
	        "bdStyle": "0",  
	        "bdCustomStyle":"",
	        "bdSize": ""  
		},
		"share": {  
            "bdSize": 16,  
            "bdCustomStyle":"/css/mimvp-2018051211.css"  
        }  
	};

解决了禁止使用百度分享默认css样式，让自己的界面按钮样式更统一

解决 c）

不需要回流统计，设置 "bdSign": 'off' 如上解决b）代码

解决 d）

细节处理，综合以上解决 a）b）c），以及简单示例里的 https 解决方案

最后，查看实际成果

上图里，“分享链接” 实际调用了百度分享功能中的更多分享，但链接样式看不出是百度分享了，达到了自定义分享按钮的目的

点击按钮“分享链接”，才会弹出分享对话框（注：已禁掉了鼠标悬浮弹出框，见解决问题 a）

接着，点击分享“QQ空间”，查看分享链接，是否去掉了回流统计井号“#”后面的一串字符

本示例完整代码很简单，详见米扑代理的推广返利：

https://proxy.mimvp.com/partner.php

参考推荐：

WordPress https支持百度分享

WordPress 安装百度分享

WordPress插件：仿知更鸟点赞打赏分享插件

WordPress：博客访问速度优化

米扑博客

Most Valuable Package of Mobile Internet

标签云

打赏赞助

访客统计

分类 (24)

归档 (192)

友情链接

百度分享自定义分享url和内容的示例

发表评论