share.js分享 JQ第三方分享插件可自定义链接、标题

作者：繁依Fanyi0 | 2024-04-11 02:21:20

踩

share.js

1、直接使用以下代码
2、加载附件中的js、css
3、定义要分享的链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分享</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="layer_mobile/layer.js"></script>

    <!-- share css & js -->
    <link rel="stylesheet" href="share/css/share.min.css">
    <script src="share/js/social-share.min.js"></script>
    <style type="text/css">
        .social-share .social-share-icon{width: 50px !important;height: 50px !important;line-height: 50px !important;margin-left: 0.5rem;}
        .share_title{color:#c01414;text-align: center;font-size: 0.38rem;line-height: 1rem;}
    </style>

</head>
<body>

    <button onclick="do_share();">分享</button>

    <div id="share_box" style="display:none;">
        <h1 class="share_title">分享到</h1>
        <div class="social-share" data-initialized="true" style="text-align: center;" data-url="http://www.baidu.com?(要分享的链接)"  data-title="要分享的标题（可选）">
            <a href="#" class="social-share-icon icon-weibo"></a>
            <a href="#" class="social-share-icon icon-wechat"></a>
            <a href="#" class="social-share-icon icon-qq"></a>
            <a href="#" class="social-share-icon icon-qzone"></a>
        </div>
    </div>

    <script type="text/javascript">
        //弹出页面层
        function do_share(){
            layer.open({
            type: 1
            ,content: $('#share_box').html()
            ,anim: 'up'
            ,style: 'position:fixed; bottom:0; left:0; width: 100%; padding:10px 0; border:none;'
            });
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

css、js静态资源文件，百度云盘下载地址：https://pan.baidu.com/s/1ec0GJ8

自定义配置：

data-url : ”, // 网址，默认使用 window.location.href
data-source : ”, // 来源（QQ空间会用到）, 默认读取head标签：
data-title : ”, // 标题，默认读取 document.title 或者
data-origin : ”, // 分享 @ 相关 twitter 账号
data-description : ”, // 描述, 默认读取head标签：
data-image : ”, // 图片, 默认取网页中第一个img标签

详细教程链接：https://github.com/overtrue/share.js

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/402375

share.js分享 JQ第三方分享插件 可自定义链接、标题

share.js分享 JQ第三方分享插件可自定义链接、标题