实现单个页面，多个百度分享（动态修改百度分享链接）

在我编写文章列表页代码的时候，想实现每一条文章都有一个分享按钮，此处用到百度分享。百度分享官网：http://share.baidu.com/code/advance。
官网给出的完整代码只适合分享单个页面，显然不符合我的需求。仔细阅读文档之后，发现在通用设置项的解析里有这么一项：

有了这项设置，我们可以很容易地改变window._bd_share_config 里的设置。
步骤：
1、设置a元素的属性（data-id,data-title）方便获取对应链接的值。
2、声明全局变量。
3、为每个.bdsharebuttonbox a绑定mouseover事件，利用该事件来配置id跟title。
4、配置window._bd_share_config的common属性，利用onBeforeClick来进行动态配置。
5、引入必须要的js。
具体代码：

//这里是一个for循环
{for ....}
<div class="fl ml10 bdsharebuttonbox" data-tag="share_1"><a class="bds_qzone" data-cmd="qzone" href="#" data-id="{$t[itemid]}" data-title="{$t[title]}"></a><a class="bds_tsina" data-cmd="tsina" data-id="{$t[itemid]}" data-title="{$t[title]}"></a>
</div>
{/for}
<script>//声明全局变量var shareId = "",title='';//全局变量赋值，便于后边更改配置$(function () {$(".bdsharebuttonbox a").mouseover(function () {shareId = $(this).attr("data-id");title = $(this).attr("data-title");});});function SetConf(cmd, config) {            if (ShareId) {config.bdUrl = "https://www.xxx.com/news/" + shareId + '.html';config.bdText = title;}return config;}window._bd_share_config = {common : {onBeforeClick:SetConf},share : [{"bdSize" : 12}],slide : [{bdImg : 0,bdPos : "right",bdTop : 100}],//设置了这一项，页面右边会出现一个分享的浮窗，该浮窗只能分享当前设置的bdUrlimage : [{viewType : 'list',viewPos : 'top',viewColor : 'black',viewSize : '12',viewList : ['qzone','tsina','huaban','tqq','renren']}],selectShare : [{"bdselectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf']}]}//以下代码是必须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>

为了方便使用，写了一个简单的jquery插件：

(function ($) {$.fn.share = function (options) {var settings = {text: '',url:''};if (options) {$.extend(settings, options);}window._bd_share_config = {common : { bdText:settings.text, bdUrl:setting.url },share : [{ "bdSize" : 16 }],}
}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)];
})(jQuery)

使用方法

<script type="text/javascript" src="share.js"></script>
<script type="text/javascript">$(".bdsharebuttonbox").share({title:'{$title}',url:'{$linkurl}'}); </script>

实现单个页面，多个百度分享（动态修改百度分享链接）相关推荐

百度地图动态修改图标
百度地图API真的是无力吐槽. 最近做一个页面推送功能,需要实时修改百度地图覆盖物的图标,研究了一下午,总算出来了.其实也不难,利用提供的setIcon()方法可以对图标进行动态更新. //覆盖物扫描 ...
vue调用百度地图动态修改中心点
初始化地图 initialApi () { var map = new BMap.Map("allmap") //初始化地图时中心点的位置为深圳 var p ...
html .html后缀的网页百度收录吗,百度收录动态页面吗
百度收录动态页面吗内容导读:总结来说,百度会正常收录动态页面,但是如果可以,大家还是尽量把URL处理称为以html结尾的伪静态页面. 问题:百度收录动态页面吗? 问题补充:都是百度更喜欢收录静态或者 ...
uniapp 微信小程序最近写的两个小程序中都会有，微信分享的设置，每次都在单个页面中写相同的内容，修改很不友好。下面全局分享代码做了记录
最近写的两个小程序中都会有,微信分享的设置,每次都在单个页面中写相同的内容,修改很不友好.下面全局分享代码做了割记录首先在小程序中配置微信分享,和微信朋友圈, onShareAppMessage, ...
关于百度地图动态事件调用的使用
一次调试百度地图动态marker事件监听的问题,不知如何解决,后来看了原作者jz1108才知道要用闭包.觉得原作者jz1108关于百度地图的文章写的不错,所以转载到了CSDN,为了尊重原作者jz110 ...
html5什么是动态页面,举例说明什么是动态网站、静态网站
记得有一次和一朋友散步,他问到什么是动态网页.什么是静态网页.动态网页与静态网页有什么区别.当时我的回答似乎并没有让他真的明白到底什么是动态.什么是静态,所以今天想在这篇文章中详细的举例说明什么是动态 ...
html怎么把按钮做成可以百度,网站网页中加入各种分享按钮功能百度分享
对网页加入分享到各大网站按钮功能,网页中加入分享按钮,用户点击即可分享收藏到对应网站去.不管哪个页面都能记录分享此时情况.DIVCS5推荐使用百度分享分享按钮功能截图一.分享按钮形式 - ...
分享 6 个百度出品的免费工具，你用过几个？
今天分享百度出品的 6 款工具,每一款都是十分良心,相信很多人还不知道. 1:百度指数百度指数是免费公开的数据分享平台.需要做线上调查和当前舆论趋势分析的时候,也是很顺手的工具箱. 通过输入关键词, ...
使用selenuim模拟动态登录百度
要使用selenuim模拟动态动态登录百度,我们的电脑要下载webdriver自动Microsoft Edge,大家可以下载Chromedriver或是Edgdriver.我这里使用的是Edg. 1. ...
百度推广是什么意思？信息传播对于百度推广的方法总结分享
百度推广是指百度搜索引擎优化的一种推广方式,是专业的网络营销手段,旨在将企业的产品和服务推广到网络上,以获得更多的流量和品牌影响力.下面鲨鱼网媒小编为你分享! 一.百度推广的主要投放方式有以下几种: ...

实现单个页面，多个百度分享（动态修改百度分享链接）

实现单个页面，多个百度分享（动态修改百度分享链接）相关推荐

最新文章

热门文章