WP模板阁数千套各行业Wordpress模板随你选,总有一款适合你的网站![收藏本站] 注册 登录

WordPress网站添加Facebook,Twitter,LinkedIn,WhatsApp分享功能

        发布:WP模板阁 类型:wordpress教程 浏览:170 次

很多做外贸网站的站长,都需要Facebook,Twitter,LinkedIn,WhatsApp分享功能,这个功能操作也比较简单。下面WP模板阁就来介绍一下WordPress网站添加Facebook,Twitter,LinkedIn,WhatsApp分享功能的方法。

分享按钮代码


<ul>
<li class="facebook">Facebook</li>
<li class="twitter">Twitter</li>
<li class="linkedIn">LinkedIn</li>
<li class="whats">Whatsapp</li>
<li class="email">E-mail</li>
</ul>

<!-- facebook sdk引入 -->
<script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v11.0&appId=你的appid&autoLogAppEvents=1" type="text/javascript">lang: FACKBOOK_LANG[i18n]</script>
<!-- linkedin sdk引入 -->
<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>

Facebook分享

facebook是其中相对繁琐一点点的,要先去申请个appid,这部分还是看文档

拿到appid后,就可以像上面那样,直接引入,把appid当做参数拼接在url后面,按道理这样就可以了,但是我在开发中有事会遇到一些报错导致功能不正常,后来查了一些资料才发现是这种引入的方式的缺陷,所以后来又换成了另一种方式:


(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = `https://connect.facebook.net/en_US/sdk.js`;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'))

FB.init({
appId : '',
autoLogAppEvents : true,
xfbml : true,
version : 'v12.0'
});
// 分享到facebook
$('.facebook').click(function() {
const text = `分享的文案`
const link = location.href // 分享的页面链接,特别注意这里不需要encode
FB.ui({
method: 'share',
href: link,
quote: text
}, function(response){})
}
)

Twitter分享


// 分享到twitter
$('.twitter').click(function() {
const text = `分享的文案`
const link = location.href // 分享的页面
window.open(`https://twitter.com/intent/tweet?text=` + encodeURIComponent(link))
}
)

Linkedin分享


// 分享到linkedin
$('.linkedIn').click(function() {
let _href = "https://www.linkedin.com/shareArticle?mini=true";
const text = `分享的文案`
const link = location.href // 分享的页面
_href += "&title=" + text;//分享标题
_href += "&url=" + encodeURIComponent(link);//分享链接
window.open(_href);
}
)

Whatsapp分享


// 分享到whats
$('.whats').click(function() {
let _href = "https://api.whatsapp.com/send?";
const text = `分享的文案`
const link = location.href // 分享的页面
_href += "&text=" + text;//标题
_href += "&url=" + encodeURIComponent(link);//链接
window.open(_href);
}
)

Email分享


// 分享到email
$('.email').click(function() {
const subject = `分享主题`
const body = `分享正文`
window.open(`mailto:?subject=${subject}&body=` + encodeURIComponent(body))
}
)