轻松几步自定义百度分享-打造个性化的百度分享按钮

新文章:百度分享CSS自定义 http://www.sdtclass.com/3127.html

之前我用百度的分享的时候,一直不知道可以自定义,以为是固定的,后来看到有的网站的百度分享都不一样啊,然后去百度分享的帮助里面看了,才知道的确可以自定义的!我们首先去这里看看:http://share.baidu.com/help/customization-config

其中,bds_config 接受多个自定义配置属性,data 接受多个自定义配置属性【局部】,我们大概了解下格式,接下来就是按照他们的参数了!

'bdDes':'您的自定义分享摘要',这里如何自定义呢?下面看两段代码举例【摘自百度分享帮助:】

<!-- Baidu Button BEGIN -->
<div id="bdshare">
    <a>QQ </a>
    <a>新浪</a>
    <a>腾讯</a>
    <a>人人</a>
    <span>更多</span>
</div>
<script type="text/javascript" id="bdshare_js" data="type=slide&mini=1" ></script> 
<script type="text/javascript" id="bdshell_js"></script> 
<script type="text/javascript">
	//在这里定义bds_config var bds_config = {'bdDesc':'目前支持自定义qq空间,开心网的摘要内容'};
	document.getElementById('bdshell_js').src = "http://share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours();
</script>
<!-- Baidu Button END -->

还有一种:

<!-- Baidu Button BEGIN -->
<div id="bdshare" data="{'desc':'目前支持自定义qq空间和人人网的摘要内容'}">
    <a>QQ </a>
    <a>新浪</a>
    <a>腾讯</a>
    <a>人人</a>
    <span>更多</span>
</div>
<script type="text/javascript" id="bdshare_js" data="type=slide&mini=1" ></script> 
<script type="text/javascript" id="bdshell_js"></script> 
<script type="text/javascript">
	document.getElementById('bdshell_js').src = "http://share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours();
</script>
<!-- Baidu Button END -->

其中'bdDesc':'摘要内容' 这里需要调用函数了!就是“<?php echo trim(wp_title('',0)); ?>”,就是:'bdDesc':'<?php echo trim(wp_title('',0)); ?>',

上面只是举个例子,也可以自己定义,我们首先需要熟悉wordpress的函数来配合使用,如果你网站是基于其他程序就基于其他程序的函数调用来指定了!这里的“<?php echo trim(wp_title('',0)); ?>”是调用当前网页的title用的,当然,这个功能目前只支持QQ空间和开心网

'bdText':'您的自定义分享内容' 这个和上面差不多,不过这个是微博这些用的,也就是调用分享的内容,也可以和上面一样用那个函数,也就是:

'bdText':'<?php echo trim(wp_title('',0)); ?>' 

其他的:

'bdPopTitle':'您的自定义pop窗口标题',
'bdTop':'您的自定义侧栏高度',
'bdComment':'您的自定义分享评论',
'bdPic':'您的自定义分享出去的图片',	
'searchPic':'是否自动抓取页面图片',
'wbUid':'您的自定义微博 ID',
'render':false,
'review':'normal',
'snsKey':{'tsina':'appkey'}

具体参考百度分享代码的帮助

这里说下var bds_config = { 之间多个定义用英文半角逗号隔开}

data="{之间的也和上面一样 }">

这些是参数的定义,列举下自定义来源吧,如下:

var bds_config = {
'snsKey':{'tqq':'123456789'}
};

这里的是微博的来源KEY部分,这里列举下整个bds_config大致定义:

var bds_config = {
'bdText':'<?php echo trim(wp_title('',0)); ?> │ <?php bloginfo('name'); ?>',
'bdDesc':'<?php echo trim(wp_title('',0)); ?>',
'snsKey':{'tqq':'123456789'}
};

这里给个ID参考:http://share.baidu.com/help/webid

根据这个参考可以定义其他分享按钮自定义尾巴,下面来说说显示的按钮

默认显示就几个而已,那么,我们如何来自定义呢?

一样是参考上面的ID参考里面的ID,我们做如下举例:

<a class="bds_t163"></a>
<a class="bds_douban"></a>
<a class="bds_renren"></a>

这里 网易微博ID就是t163,所以加上bds_的前缀就可以了!就是这么简单啦!

另外自己可以定义下样式,在代码前面定义个<style>或者样式表里面定义好,过来用div套住也行!

 

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论:5   其中:访客  4   博主  0   引用   1

  1. avatar 软件酷(Softku) 1

    不知道为什么我按照你的方法修改总是没法实现?
    就算我用百度的原始代码,修改了自己的sina的appid还是显示百度分享?
    求助

  2. avatar 软件酷(Softku) 1

    就算我把你源代码复制过去替换,还是一样显示百度分享,而不是源文档地址,求解

  3. avatar 软件酷(Softku) 1

    来源地址已经解决,还有提取标题和博客名都能正常显示
    为什么摘要没有办法显示?
    ‘bdDesc’:”,
    使用的是这个,希望能帮忙解答下,谢谢

    • avatar yumanutong 5

      @软件酷(Softku) 你参考下百度分享里面的帮助,应该可以找到答案

评论加载中...

来自外部的引用: 1

  • 自定义百度分享样式 | SDT技术网

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情