Preface

If we want to share the web page on our own website, we can only send it to friends by copying links. Here will introduce how to use the sharing plug-in provided by Baidu official to share. No documents can be found on the official website, but the plug-in can still be used.

I. code structure

The sharing code can be divided into three parts: HTML, settings and JS loading. The specific code is as follows

More
        
        
        
        
        
        
    




    /*JS loading*/
    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)];
    
    / * set * /
    window._bd_share_config = {
        "common" : {
            "Bdtext": 'this is the title of sharing',
            "Bdcomment": 'I am a general sharing setting, which will appear in the description sent to QQ friends',
            "Bdpic": "picture link", // image address shared
            "Bdstyle": "1", // button style
            "Bdsize": "32", // button size
            "Bdurl": "https://www.baidu.com ', // shared address
            "Bddesc": 'leave a message for your friend',
        },
        "share" : {},
    };

II. Corresponding table of shared media ID

The shared media can be changed by changing the class and data CMD of HTML code. The specific media ID is as follows

NameID ID Name ID
One click sharing mshare QQ Zone qzone
Sina micro-blog tsina Renren net renren
Tencent micro-blog tqq Baidu album bdxc
Kaixin kaixin001 Tencent friend tqf
Baidu Post Bar tieba Douban.com douban
Sohu micro-blog tsohu Baidu new home page bdhome
QQ friends sqq Micro-blog thx
Baidu Cloud Collection bdysc Beauty theory meilishuo
Mogujie.com mogujie Dot net diandian
Petal huaban Sugar heap duitang
Blog hx Fetion fx
Youdaoyun notes youdao Memory of Wheat sdo
Light notes qingbiji People micro-blog people
Xinhua micro-blog xinhua Mail sharing mail
My Sohu isohu Cradle space yaolan
If adjacent network wealink Tianya community ty
Facebook fbook Twitter twi
linkedin linkedin Copy URL copy
Printing print Baidu personal Center ibaidu
WeChat weixin Stock bar iguba

III. effect display

The way to use it is to copy the code to your web page and make some settings. The effect is as follows

Add Baidu sharing plug-in to the website

Click the icon to share

If you want to make the icon more beautiful, please refer to
https://jingyan.baidu.com/album/e4d08ffd8cd90e0fd2f60d02.html

IV. value transfer from thymeleaf to JavaScript and external JS

If you need to use external introduction of JS, see the following tutorial.

4.1 value transfer from thymeleaf to JS

  1. JS to get the value in thmeleaf, first add the value in the script tagth:inline=”javascript”

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

var id = [[${blog.id}]];
    var img = [[${blog.firstPicture}]];
    var title = [[${blog.title}]];

4.2 using external JS to transfer values

There are many ways to pass values to external JS. Here’s one.

First, you need to define variables (such as the code block above) in the script tag. After defining variables, you need to add the following code to the external JS

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

After that, you can use the variables just passed in.

Complete code of 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": 'Andersen's pen blog',
        "bdComment" : title,
        "Bdpic": IMG, // shared image address
        "Bdstyle": "1", // button style
        "Bdsize": "32", // button size
        "Bdurl": "http://www.atsdb.cn/blog / '+ ID, // address shared
        "Bddesc": 'brother, share a piece of dry goods to you, and get it quickly',
    },
    "share" : {},
};