1. 云图网首页
  2. 技术专区
  3. 编程笔记

实现百度分享自定义或动态设置URL

• 编程笔记

之前由于业务需求，在使用百度分享的时候，需要在一个页面中分享不同的URL，即动态设置URL，由于百度分享只提供当前网站URL的分享，所以我们需要使用Jquery编写相应的代码来实现动态的URL分享功能。

PS：

  1. 这里可以查看笔者已经编写好的范例：http://example.shiyousan.com/Files/201503/635629910383368675/baidushare.html
  2. 百度分享的官方地址：http://share.baidu.com

具体的情况就是，在一个文章列表的页面中，列表中所有的文章都可以使用百度分享插件来分享文章的URL。如下图所显示，当前网页中一共有3篇文章，我们可以使用插件的功能对这3篇文章的url进行分享：

分享多个URL

这里先展示下全部的代码，下面会仔细的说明和分析。由于有用到jquery，所以要注意引用：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../../../../Scripts/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        .div_list_item {
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div>
        <div class="div_list_item">
            <div>
                <a href="https://shiyousan.com/post/635623857208296120" target="_blank">什么是CSRF攻击</a>
            </div>
            <div class="bdsharebuttonbox">
                <a class="bds_more" href="#" data-cmd="more"></a>
                <a title="分享到QQ空间" class="bds_qzone" href="#" data-cmd="qzone" data-id="635623857208296120"></a>
                <a title="分享到新浪微博" class="bds_tsina" href="#" data-cmd="tsina" data-id="635623857208296120"></a>
                <a title="分享到腾讯微博" class="bds_tqq" href="#" data-cmd="tqq" data-id="635623857208296120"></a>
            </div>
        </div>
        <div class="div_list_item">
            <div>
                <a href="https://shiyousan.com/post/635581829382059548" target="_blank">win7如何卸载IE11</a>
            </div>
            <div class="bdsharebuttonbox">
                <a class="bds_more" href="#" data-cmd="more"></a>
                <a title="分享到QQ空间" class="bds_qzone" href="#" data-cmd="qzone" data-id="635581829382059548"></a>
                <a title="分享到新浪微博" class="bds_tsina" href="#" data-cmd="tsina" data-id="635581829382059548"></a>
                <a title="分享到腾讯微博" class="bds_tqq" href="#" data-cmd="tqq" data-id="635581829382059548"></a>
            </div>
        </div>
        <div class="div_list_item">
            <div>
                <a href="https://shiyousan.com/post/635580331379132445" target="_blank">VS重构重命名的快捷键</a>
            </div>
            <div class="bdsharebuttonbox">
                <a class="bds_more" href="#" data-cmd="more"></a>
                <a title="分享到QQ空间" class="bds_qzone" href="#" data-cmd="qzone" data-id="635580331379132445"></a>
                <a title="分享到新浪微博" class="bds_tsina" href="#" data-cmd="tsina" data-id="635580331379132445"></a>
                <a title="分享到腾讯微博" class="bds_tqq" href="#" data-cmd="tqq" data-id="635580331379132445"></a>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        //全局变量，动态的文章ID
        var ShareId = "";
        //绑定所有分享按钮所在A标签的鼠标移入事件，从而获取动态ID
        $(function () {
            $(".bdsharebuttonbox a").mouseover(function () {
                ShareId = $(this).attr("data-id");
            });
        });

        /* 
        * 动态设置百度分享URL的函数,具体参数
        * cmd为分享目标id,此id指的是插件中分析按钮的ID
        *，我们自己的文章ID要通过全局变量获取
        * config为当前设置，返回值为更新后的设置。
        */
        function SetShareUrl(cmd, config) {            
            if (ShareId) {
                config.bdUrl = "https://shiyousan.com/post/" + ShareId;    
            }
            return config;
        }

        //插件的配置部分，注意要记得设置onBeforeClick事件，主要用于获取动态的文章ID
        window._bd_share_config = {
            "common": {
                onBeforeClick:SetShareUrl,"bdSnsKey":{},"bdText":"","bdMini":"2"
                ,"bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"
            }, "share": {}
        };
        //插件的JS加载部分
        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>
</body>
</html>

安照官方文档的说明，百度分享代码是分为三个部分：HTML、设置和js加载，具体看官网文档：http://share.baidu.com/code/advance

1、先看HTML部分(按钮标签部分)，这里显示分享按钮的HTML代码，这部分代码可以重复设置多个。下面是主要的代码片段：

百度分享插件的HTML按钮标签部分

我们可以看到这段代码中，每种分享方式按钮都对应着一个链接，具体按钮显示的样式、种类数量是设置部分决定的，而js加载部分获取所需的样式和图标，这段代码最终显示结果如下：

分享按钮截图

当然，一般情况下我们很少自己去设置，都是在百度分享代码获取设置那自动生成HTML按钮标签部分和配置部分。

这里有一点一定要注意，笔者在所有的按钮链接(a标签)中添加了一个自定义属性data-id，这个属性是用来保存文章的动态id或者内容的唯一标识，是实现自定义功能一个重要的参数，如果有更多的业务参数可以多设置几个自定义属性。可以看到上面的三组按钮代码中，分别都设置所对应的文章id。

2、再来就是分享插件的设置部分，这里可以设置很多属性，包括分享内容、分享url、按钮样式、各种事件等，详细的资料可以查看官方文档：

百度分享插件js设置配置部分

我们主要是使用到onBeforeClick事件：

百度分享的onBeforeClick事件

3、最后是JS加载部分，主要就是载入插件的样式和整体的功能代码，没有这部分插件就无法运行。这里要注意，官方文档有说明-请将代码放于</body>之前：

分享插件JS加载部分

动态自定义分享URL原理

大概的思路是这样的：

首先，我们使用Jquery绑定所有分享按钮中A标签的mouseover事件，每当我们想要点击某个分享按钮时，鼠标肯定就会移动到分享按钮所在的a标签上，这样就触发了mouseover事件（Jquery事件，当鼠标指针位于元素上方时，会发生 mouseover 事件），我们设置了一个全局变量ShareId，一旦触发事件我们就获取当前分享按钮a标签的data-id属性，并将data-id赋值给ShareId。上面已经有说过了，data-id保存的是文章的ID。具体的代码是这段：

//全局变量，动态的文章ID
var ShareId = "";
//绑定所有分享按钮所在A标签的鼠标移入事件，从而获取动态ID
$(function () {
    $(".bdsharebuttonbox a").mouseover(function () {
        ShareId = $(this).attr("data-id");
    });
});

由于我们也设置了百度分享插件的onBeforeClick事件，所在当鼠标点击分享按钮的时候，在分享插件功能启动前，会先执行onBeforeClick事件，我们在事件中使用了事件提供的配置参数和全局变量ShareId，从而重新设置了分享的Url地址（根据需求，可以设置更多的参数，插件提供很多属性可自定义）：

function SetShareUrl(cmd, config) {            
    if (ShareId) {
        config.bdUrl = "https://shiyousan.com/post/" + ShareId;                
    }
    return config;
}

这样我们通过插件本身的事件和Jquery的元素事件，从另一种角度和方式实现了百度分享插件实现自定义URL的功能。

2016-02-27备注：我看到评论中有一些朋友在使用百度分享插件的时候可能需要帮忙的，这里博主只能真诚的说一声抱歉了，由于博主的工作比较繁忙（一只苦逼的程序猿），所以基本空闲的时间很少，确实没时间帮各位网友解决你们所遇到的插件问题，分享此文章只为大家提供下解决思路。我只能偶尔有空闲时间才能帮忙解决一些小问题。

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/98663.html

赞 (0)
0
上一篇 2021年8月21日
下一篇 2021年8月21日

相关推荐

发表回复

登录后才能评论