Add Baidu website Share plug-in

Foreword

On your website pages if we want to share it, you can only be sent to friends by way of copying the link. Here explains how to use plug-ins share of Baidu official share, in the official documents could not find the net, but the plug is still usable.

A code structure

Sharing code can be divided into three parts: HTML, js loading and setting, specific code as follows

<!-- 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>

Second, sharing media correspondence table id

To share the media can be changed by changing the html code of the class and the data-cmd, the following specific media id

Name ID	ID		name	ID
A key share	mshare		QQ space	qzone
Sina Weibo	China		Renren	renren
Tencent Weibo	tqq		Baidu album	bdxc
Happy network	kaixin001		Tencent friend	tqf
Baidu Post Bar	tieba		Douban	douban
Sohu Weibo	tsohu		Baidu new home	bdhome
QQ friends	sqq		Sum 讯微 Expo	thx
Baidu Cloud Collection	bdysc		Beautiful says	meilishuo
mushroom Street	mogujie		Little net	diandian
petal	huaban		Sedimentary sugar	duitang
And News	hx		Fetion	fx
YouDao Cloud Note	youdao		Wheat library Notepad	SDO
Light notes	qingbiji		People microblogging	people
Xinhua microblogging	xinhua		Mail Share	mail
My Sohu	isohu		Cradle space	yaolan
If the adjacent network	wealink		End of the World Community	companies
Facebook	fbook		Twitter	twi
linkedin	linkedin		Copy URL	copy
print	print		Baidu individual centers	tale
Micro letter	weixin		Shares	iguba

Third, the results show

Use is to copy the code into your web page, and then some of the settings. Results shown in Figure

Click on the icon to start sharing

Want to make icons more beautiful, then you can reference
https://jingyan.baidu.com/album/e4d08ffd8cd90e0fd2f60d02.html

Four, Thymeleaf traditional values ​​into JavaScript, and using external JS pass value

If you need to use an external js introduced can see tutorial below.

4.1 Thymeleaf pass values ​​to JS

1. js get value thymeleaf the first to add the script tag th: inline = "javascript"

2. Variable Format: [[$ {variable name}]]

<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>

External pass value JS 4.2

There are many values ​​will be passed to an external js way, here we present a.

First need to define the variables in the script tag (e.g., code block above), after the definition of the variables are required to add the following code in an external js

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

Plus you can use to go after just passed in a variable.

share.js complete code:

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" : {},
};