51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

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

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

赞(0)
未经允许不得转载:工具盒子 » 纯代码给WordPress添加分享功能(非百度分享)