纯代码给WordPress添加分享功能(非百度分享)

Mr.Wu 2,653 2 正在检测是否收录...

感觉吧,一个博客还是应该有分享的功能的,感觉挺重要的,所以就花了些时间给加上了。
不懂JS真心伤,感谢@陌小雨的帮助。

JS代码

   // TBUI
    window.TBUI = window.TBUI || {}
    TBUI.bd = $('body')
    TBUI.shareimage = TBUI.shareimage || ''
    TBUI.click = 'click'
    $('.sitenav-on').on(TBUI.click, function(){
        TBUI.bd.toggleClass('sitenav-active')
    })

    $('.sitenav-mask').on(TBUI.click, function(){
        TBUI.bd.removeClass('sitenav-active')
    })


    $('.searchstart-on').on(TBUI.click, function(){
        $(this).hide()
        $('.searchstart-off').show()
        TBUI.bd.addClass('searchform-active')
        $('.sinput').focus()
    })

    $('.searchstart-off').on(TBUI.click, function(){
        $(this).hide()
        $('.searchstart-on').show()
        TBUI.bd.removeClass('searchform-active')
    })

/* 分享 */
// SHARE IMAGE
    TBUI.shareimage = $("#imgshare").attr('src');
    TBUI.bd.prepend('<div id="shareimage"><img src="'+%20TBUI.shareimage%20+'" style="display: none;"></div>')

// SHARE
var share = {
    url:  encodeURIComponent(document.URL),
    pic: TBUI.shareimage,
    title: $('.s_title h2').text().length?$('.s_title h2').text():document.title,
    desc: ' 【'+$('h2.s_title').text() +'】 Mr.Wu博客,关注互联网安全,分享最新的黑客技术、黑客工具、开源漏洞、圈内新闻等!',
    summary: $('.item-descs p:first').text().length ? $('.item-descs p:first').text().substring(0,100): document.title
}

$('[etap="share"]').on(TBUI.click, function(){

    var dom = $(this)
    var to = dom.data('share')
    var url = ''

    switch(to){
        case 'qq':
            url = 'http://connect.qq.com/widget/shareqq/index.html?url='+share.url+'&title='+share.title+'&desc='+share.desc+'&summary='+share.summary+'&site=dedewp&pics='+share.pic
            break;

        case 'weibo':
            url = 'http://service.weibo.com/share/share.php?title='+share.desc+'&url='+share.url+'&source=bookmark&pic='+share.pic
            break;

        case 'douban':
            url = 'http://www.douban.com/share/service?image='+share.pic+'&href='+share.url+'&name='+share.title+'&text='+share.desc
            break;

        case 'qzone':
            url = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+share.url+'&title='+share.title+'&desc='+share.desc+'&pics='+share.pic+'&summary='+share.summary
            break;

    }

    if( !dom.attr('href') && !dom.attr('target') ){
        dom.attr('href', url).attr('target', '_blank')
    }
})

分享html代码

<div class="shares sharess" style="display: none;">
                    <a etap="share" data-share="qzone" class="share-qzone" title="分享到QQ空间"><i class="fa"></i></a>
                    <a etap="share" data-share="weibo" class="share-tsina" title="分享到新浪微博"><i class="fa"></i></a>
                    <a etap="share" data-share="qq" class="share-sqq" title="分享到QQ好友"><i class="fa"></i></a>
                    <a etap="share" data-share="douban" class="share-douban" title="分享到豆瓣网"><i class="fa"></i></a>
                </div>

css代码

.shares a {
	position: relative;
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 32px;
	display: inline-block;
	margin-right: 10px;
	opacity: .8;
	border-radius: 2px;
	cursor: pointer
}
.shares a:hover {
	opacity: 1
}
.shares a:hover .share-popover {
	visibility: visible;
	opacity: 1;
	margin-bottom: 0
}
.shares a:before {
	height: 32px;
	width: 10px
}

.shares a:hover:before {
	-webkit-transition: right .5s;
	-moz-transition: right .5s;
	transition: right .5s;
	right: -70%
}

.shares a.share-tsina {
	background-color: #FF8D8D;
	;background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -130px 0px;
}

.shares a.share-qzone {
	background-color: #FBC440;
	background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -98px 0px;
}

.shares a.share-sqq {
	background-color: #F68575;
	background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -194px 0px;
}

.shares a.share-renren {
	background-color: #95B4EC;
	background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -226px 0px;
}

.shares a.share-tqq {
	background-color: #5FB2D7;
	;background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -162px 0px;
}

.shares a.share-douban {
	background-color: #67CE9B;
	background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -258px 0px;
}

.shares a.share-huaban {
	background-color: #DC5E5E
}

.shares i {
	color: #fff;
	font-size: 20px;
	font-weight: normal
}

注意事项

以上为本博客最终代码,要实际应用的话需要对JS代码中几处样式进行相应修改。
需要给文章图片加上id="imgshare"属性。
如果还需要其他平台的分享,可以对照代码进行相应添加。

效果图

纯代码给WordPress添加分享功能(非百度分享)

打赏
发表评论 取消回复
表情 图片 链接 代码

  1. こ牵手
    こ牵手 Lv 1

    html代码 没有了 可以重新发一下吗?

分享
微信
微博
QQ