网站添加百度分享插件_白峰_前端开发者

前言

在自己的网站上我们如果想把网页分享出去,只能通过复制链接的方式发给好友。这里将介绍如何使用百度官方提供的分享插件进行分享,在官网里已经找不到文档了,但插件还是能用的。

前言

在自己的网站上我们如果想把网页分享出去,只能通过复制链接的方式发给好友。这里将介绍如何使用百度官方提供的分享插件进行分享,在官网里已经找不到文档了,但插件还是能用的。

一、代码结构

分享代码可以分为三个部分:html、设置和js加载,具体代码如下

<!-- html代码 -->
<div id="share">
    <div class="bdsharebuttonbox" data-tag="share_1">
        <a class="bds_more" data-cmd="more">更多</a>
        <a class="bds_weixin" data-cmd="weixin"></a>
        <a class="bds_qzone" data-cmd="qzone" href="#"></a>
        <a class="bds_tsina" data-cmd="tsina"></a>
        <a class="bds_baidu" data-cmd="baidu"></a>
        <a class="bds_sqq" data-cmd="sqq"></a>
        <a class="bds_tieba" data-cmd="tieba"></a>
    </div>
</div>


<script>
    /* 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)];
    
    /* 设置 */
    window._bd_share_config = {
        "common" : {
            "bdText" : '这是分享的标题',
            "bdComment" : '我是通用分享设置,会出现在发送给QQ好友里的描述',
            "bdPic" : "图片链接"",//分享的图像地址
            "bdStyle" : "1",//按钮样式
            "bdSize" : "32",//按钮大小
            "bdUrl" : 'https://www.baidu.com',//分享的地址
            "bdDesc":'给你的好友留一句话吧',
        },
        "share" : {},
    };
</script>

<!-- html代码 -->
<div id="share">
<div class="bdsharebuttonbox" data-tag="share_1">
<a class="bds_more" data-cmd="more">更多</a>
<a class="bds_weixin" data-cmd="weixin"></a>
<a class="bds_qzone" data-cmd="qzone" href="#"></a>
<a class="bds_tsina" data-cmd="tsina"></a>
<a class="bds_baidu" data-cmd="baidu"></a>
<a class="bds_sqq" data-cmd="sqq"></a>
<a class="bds_tieba" data-cmd="tieba"></a>
</div>
</div>

<script>
/* 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)];

/* 设置 */
window._bd_share_config = {
"common" : {
"bdText" : '这是分享的标题',
"bdComment" : '我是通用分享设置,会出现在发送给QQ好友里的描述',
"bdPic" : "图片链接"",//分享的图像地址
"bdStyle" : "1",//按钮样式
"bdSize" : "32",//按钮大小
"bdUrl" : 'https://www.baidu.com',//分享的地址
"bdDesc":'给你的好友留一句话吧',
},
"share" : {},
};
</script>

二、分享的媒体id对应表

通过更改html代码的class和data-cmd可以更改分享媒体,具体媒体id如下

名称ID ID 名称 ID
一键分享 mshare QQ空间 qzone
新浪微博 tsina 人人网 renren
腾讯微博 tqq 百度相册 bdxc
开心网 kaixin001 腾讯朋友 tqf
百度贴吧 tieba 豆瓣网 douban
搜狐微博 tsohu 百度新首页 bdhome
QQ好友 sqq 和讯微博 thx
百度云收藏 bdysc 美丽说 meilishuo
蘑菇街 mogujie 点点网 diandian
花瓣 huaban 堆糖 duitang
和讯 hx 飞信 fx
有道云笔记 youdao 麦库记事 sdo
轻笔记 qingbiji 人民微博 people
新华微博 xinhua 邮件分享 mail
我的搜狐 isohu 摇篮空间 yaolan
若邻网 wealink 天涯社区 ty
Facebook fbook Twitter twi
linkedin linkedin 复制网址 copy
打印 print 百度个人中心 ibaidu
微信 weixin 股吧 iguba
名称ID ID 名称 ID 名称ID ID 名称 ID 名称ID

名称

ID 名称

名称

ID

ID

一键分享 mshare QQ空间 qzone 新浪微博 tsina 人人网 renren 腾讯微博 tqq 百度相册 bdxc 开心网 kaixin001 腾讯朋友 tqf 百度贴吧 tieba 豆瓣网 douban 搜狐微博 tsohu 百度新首页 bdhome QQ好友 sqq 和讯微博 thx 百度云收藏 bdysc 美丽说 meilishuo 蘑菇街 mogujie 点点网 diandian 花瓣 huaban 堆糖 duitang 和讯 hx 飞信 fx 有道云笔记 youdao 麦库记事 sdo 轻笔记 qingbiji 人民微博 people 新华微博 xinhua 邮件分享 mail 我的搜狐 isohu 摇篮空间 yaolan 若邻网 wealink 天涯社区 ty Facebook fbook Twitter twi linkedin linkedin 复制网址 copy 打印 print 百度个人中心 ibaidu 微信 weixin 股吧 iguba 一键分享 mshare QQ空间 qzone 一键分享 mshare QQ空间 qzone 新浪微博 tsina 人人网 renren 新浪微博 tsina 人人网 renren 腾讯微博 tqq 百度相册 bdxc 腾讯微博 tqq 百度相册 bdxc 开心网 kaixin001 腾讯朋友 tqf 开心网 kaixin001 腾讯朋友 tqf 百度贴吧 tieba 豆瓣网 douban 百度贴吧 tieba 豆瓣网 douban 搜狐微博 tsohu 百度新首页 bdhome 搜狐微博 tsohu 百度新首页 bdhome QQ好友 sqq 和讯微博 thx QQ好友 sqq 和讯微博 thx 百度云收藏 bdysc 美丽说 meilishuo 百度云收藏 bdysc 美丽说 meilishuo 蘑菇街 mogujie 点点网 diandian 蘑菇街 mogujie 点点网 diandian 花瓣 huaban 堆糖 duitang 花瓣 huaban 堆糖 duitang 和讯 hx 飞信 fx 和讯 hx 飞信 fx 有道云笔记 youdao 麦库记事 sdo 有道云笔记 youdao 麦库记事 sdo 轻笔记 qingbiji 人民微博 people 轻笔记 qingbiji 人民微博 people 新华微博 xinhua 邮件分享 mail 新华微博 xinhua 邮件分享 mail 我的搜狐 isohu 摇篮空间 yaolan 我的搜狐 isohu 摇篮空间 yaolan 若邻网 wealink 天涯社区 ty 若邻网 wealink 天涯社区 ty Facebook fbook Twitter twi Facebook fbook Twitter twi linkedin linkedin 复制网址 copy linkedin linkedin 复制网址 copy 打印 print 百度个人中心 ibaidu 打印 print 百度个人中心 ibaidu 微信 weixin 股吧 iguba 微信 weixin 股吧 iguba

三、效果展示

使用方式就是将这些代码复制到你的网页中,再进行一些设置即可。效果如图

点击图标即可进行分享

想要让图标更加的好看的话可以参考
https://jingyan.baidu.com/album/e4d08ffd8cd90e0fd2f60d02.html

https://jingyan.baidu.com/album/e4d08ffd8cd90e0fd2f60d02.html

四、Thymeleaf传值到JavaScript中和使用外部js传值

​ 如果需使用外部引入js可看下方教程。

​ 如果需使用外部引入js可看下方教程。

4.1 Thymeleaf传值到JS

  1. js取得thymeleaf中的值首先要在script标签中加上 th:inline="javascript"
  • js取得thymeleaf中的值首先要在script标签中加上 th:inline="javascript"
  • th:inline="javascript"

    ​ 2. 变量格式: [[${变量名}]]

    <script th:inline="javascript" src="../static/js/share.js" th:src="@{/js/share.js}">
        var id = [[${blog.id}]];
        var img = [[${blog.firstPicture}]];
        var title = [[${blog.title}]];
    </script>
    

    <script th:inline="javascript" src="../static/js/share.js" th:src="@{/js/share.js}">
    var id = [[${blog.id}]];
    var img = [[${blog.firstPicture}]];
    var title = [[${blog.title}]];
    </script>

    4.2 使用外部JS传值

    将值传给外部js的方式有很多种,这里就介绍一种。

    ​ 首先需在script标签中定义变量(如上方代码块),定义好变量后需在外部js加上如下代码

    var script = document.getElementsByTagName("script");
    eval(script[script.length-1].innerHTML);
    

    var script = document.getElementsByTagName("script");
    eval(script[script.length-1].innerHTML);

    加上去之后就可以使用刚刚传进来的变量了。

    share.js完整代码:

    var script = document.getElementsByTagName("script");
    eval(script[script.length-1].innerHTML);
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='//bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
    window._bd_share_config = {
        "common" : {
            "bdText" : '安徒生的笔-博客',
            "bdComment" : title,
            "bdPic" : img,//分享的图像地址
            "bdStyle" : "1",//按钮样式
            "bdSize" : "32",//按钮大小
            "bdUrl" : 'http://www.atsdb.cn/blog/'+id,//分享的地址
            "bdDesc":'兄弟,分享一篇干货给你,赶紧领取',
        },
        "share" : {},
    };
    

    var script = document.getElementsByTagName("script");
    eval(script[script.length-1].innerHTML);
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='//bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
    window._bd_share_config = {
    "common" : {
    "bdText" : '安徒生的笔-博客',
    "bdComment" : title,
    "bdPic" : img,//分享的图像地址
    "bdStyle" : "1",//按钮样式
    "bdSize" : "32",//按钮大小
    "bdUrl" : 'http://www.atsdb.cn/blog/'+id,//分享的地址
    "bdDesc":'兄弟,分享一篇干货给你,赶紧领取',
    },
    "share" : {},
    };

    » 本文来自:前端开发者 » 《网站添加百度分享插件_白峰_前端开发者》
    » 本文链接地址:https://www.rokub.com/73428.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!