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

Mr.Wu 647 0

感觉吧,一个博客还是应该有分享的功能的,感觉挺重要的,所以就花了些时间给加上了。
不懂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('
') // 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代码


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"属性。
如果还需要其他平台的分享,可以对照代码进行相应添加。

效果图

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

分享
微信
微博
QQ