Laravel网站基于https百度分享按钮样式“自定义”与分享按钮点击“无反应”

我的网站是用laravel做网站其中涉及到两个模块需要用到分享功能,于是就选择了百度分享按钮,这样对百度搜索引擎会有一定的引流作用,首先我是在百度分享按钮基础上进行了一定的样式修饰,之后发现分享按钮点击后不起作用,起初是认为脚本冲突后来发现同样的分享按钮在本地环境测试没有问题,在生产环境中就不起作用,那么就将代码问题排除了,于是着重于检查环境问题,后来发现百度分享按钮不支持https协议,那么就要对分享按钮脚本进行处理一下。

1.页面改造

1.1添加样式

/** 分享样式 **/
.entry-share {
    font-size: 14px;
    text-align: center;
    margin: 10px auto;
}
 
.entry-share .share-pu {
    float: left;
    color: #4d4d4d;
    font-weight: 700;
    line-height: 50px;
}
 
.entry-share ul li {
    list-style: none;
    margin: 0;
}
 
.entry-share li {
    float: left;
}
 
.entry-share .share-box {
    display: inline-block;
    overflow: hidden;
}
 
.entry-share a {
    float: left;
    color: #666;
    font-size: 16px !important;
    border-radius: 40px;
    margin-right: 10px;
    border: 1px solid #666;
}
 
.entry-share .bdsharebuttonbox a:hover {
    text-decoration: none;
    color: #fff;
}
 
.entry-share .bds_more {
    color: #666 !important;
}
 
.entry-share .bds_more:hover {
    color: #fff !important;
}
 
/** 图标大小 **/
.entry-share a {
    background: transparent !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 5px !important;
    float: none !important;
    font-size: 20px !important;
    display: block !important;
    text-align: center !important;
    line-height: 40px !important;
}
 
 
/** 不同图标悬停背景颜色 **/
.entry-share a:hover.fa-weibo {
    background: #e74c3c !important;
    border-color: #e74c3c;
}
 
.entry-share a:hover.fa-wechat {
    background: #2ecc71 !important;
    border-color: #2ecc71;
}
 
.entry-share a:hover.fa-renren {
    background: #4760a5 !important;
    border-color: #4760a5;
}
 
.entry-share a:hover.fa-qq {
    background: #50abf1 !important;
    border-color: #50abf1;
}
 
.entry-share a:hover.fa-facebook {
    background: #3777be !important;
    border-color: #3777be;
}
 
.entry-share a:hover.fa-twitter {
    background: #2174c3 !important;
    border-color: #2174c3;
}
 
.bdsharebuttonbox a:hover.fa-plus-circle {
    background: #2174c3 !important;
    border-color: #2174c3;
}

1.2模板页面添加分享代码html

<div class="entry-share">
            <div class="share-box">
                <ul class="bdsharebuttonbox">
                    <li class="share-pu">分享到:</li>
                    <li><a title="分享到新浪微博" class="fa fa-weibo" data-cmd="tsina" onclick="return false;" href="#"></a></li>
                    <li><a title="分享到微信" class="fa fa-wechat" data-cmd="weixin" onclick="return false;" href="#"></a></li>
                    <li><a title="分享到人人网" class="fa fa-renren" data-cmd="renren" onclick="return false;" href="#"></a></li>
                    <li><a title="分享到QQ空间" class="fa fa-qq" data-cmd="qzone" onclick="return false;" href="#"></a></li>
                    <li><a title="分享到Facebook" class="fa fa-facebook" data-cmd="fbook" onclick="return false;" href="#"></a></li>
                    <li><a title="分享到Twitter" class="fa fa-twitter" data-cmd="twi" onclick="return false;" href="#"></a></li>
                    <li><a title="更多" class="bds_more fa fa-plus-circle" data-cmd="more" onclick="return false;" href="#"></a></li>
                </ul>
            </div>
       </div>

1.3在模板页面添加百度分享javascript

<script>
window._bd_share_config = {
     common : {
          bdSnsKey : {},
          bdText : "分享页面标题",
          bdDesc : '分享页面描述',  
          bdUrl : '当前页面链接地址',
          bdMini : "2",
          bdMiniList : false,
          bdPic : "当前页面缩略图",
          bdStyle : "1",
          bdSize : "16"
    },
    share : {"bdSize": 16},
         slide : [{     
               bdImg : 0,
               bdPos : "right",
               bdTop : 100
        }]
};
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='https://www.tinkpic.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script> 

2 解决百度分享按钮支持https

1:把上面百度分享JS代码中的“http://bdimg.share.baidu.com/"修改成 https://自己的域名

2:下载“百度网盘链接: https://pan.baidu.com/s/1c4-9adqGZ8R-U_wbqsU_jA 提取码: 5cuu”中的文件,并上传到网站根目录并解压。

这样网站基于https的百度分享按钮功能就完成了。

阅读 309

Comments

十里长亭 3个月前

测试一下评论系统

回复此评论

晓波 3个月前

看看这篇资料

回复此评论

莫晓北 3个月前

回复 @ 晓波:嘿嘿

回复此评论

胡艳波 3个月前

很实用的分享插件!

回复此评论

悠悠 3个月前

回复 @ 胡艳波:地区很实用

回复此评论

路飞 3个月前

回复 @ 悠悠:Laravel 给highlight.js高亮插件 添加增加行数

回复此评论

匿名 3个月前

有来路,没退路,留退路,是绝路。

回复此评论

小慧 3个月前

回复 @ 匿名:分享脚本本地化是如何做到的!

回复此评论

SEO优化 3个月前

回复 @ 小慧:三级分类

回复此评论