朋友圈分享并更换为自己的图片

w的小wife

于 2021-01-26 15:52:32 发布

阅读量299

点赞数

文章标签： html css javascript

原文链接：https://www.cnblogs.com/cyhan/p/11671566.html

版权

ww前端开发笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

利用原生js实现分享朋友圈并更改为自己想要的图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>百度分享-分享到朋友圈及qq</title>
    <style type="text/css">
        .share-div .bdsharebuttonbox .common-size {
            width: 30px;
            height: 30px;
        }
        .share-div .bdsharebuttonbox .bds_weixin {
           background: url("../img/wechat-icon.png") no-repeat center;
           background-size: 30px 30px;
        }
    </style>
</head>
<body>
<div class="share-div">
    <div class="bdsharebuttonbox">
         <div>
            <div class="share-img">
                <a href="#" data-cmd="weixin" title="分享到微信" class="common-size bds_weixin"></a>
            </div>
            <div class="share-img">
                <a href="#" data-cmd="tsina" title="分享到新浪微博" class="common-size bds_tsina"></a>
            </div>
            <div class="share-img">
                <a title="分享到Facebook" data-cmd="fbook" class="common-size bshare-facebook bds_fbook"></a>
            </div>
            <div class="share-img">
                <a title="分享到Twitter" data-cmd="twi" class="common-size bshare-twitter bds_twi"></a>
            </div>
        </div>
    </div>
</div>

<script>
    window._bd_share_config = {
        "common": {
            "bdSnsKey": {},
            "bdText": "",
            "bdMini": "2",
            "bdMiniList": false,
            "bdPic": "",
            "bdStyle": "0",
            "bdSize": "16"
        },
        "share": {},
        "selectShare": {"bdContainerClass": null, "bdSelectMiniList": ["weixin", "tsina", "fbook","twi"]}
    };
    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>

实现效果如图所示：
在这里插入图片描述

更改为自己想要实现的图片，需在class为bdsharebuttonbox的div外，在进行一层div包裹，以此覆盖其原本的样式

w的小wife

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
朋友圈分享并更换为自己的图片

利用原生js实现分享朋友圈并更改为自己想要的图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no"> &
复制链接

扫一扫