js社交分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/**
* 在新窗口中打开分享
* @param string type 分享类型
* qzone
* weibo
* tqq
* renren
* douban
* facebook
* twitter
* linkedin
* weixin
* qq
* @param string [content] 长介绍,只有qzone、renren、douban、linkedin支持
* @param string [pic] 图片的链接,只有qzone、weibo、douban、facebook、qq支持
* @param string [title] 短介绍, 默认获取当前页面 title标签的内容
* @param string [url] 分享的链接, 默认使用 location.href
*/
function share(type, content = '', pic = '', title = '', url = '') {
url = encodeURIComponent(url || location.href);
title = encodeURIComponent(title || document.getElementsByTagName('title')[0].innerText);
if (!content && document.querySelector('[name="description" ]')) content = document.querySelector('[name="description" ]').getAttribute('content');
content = encodeURIComponent(content);
if (!pic && document.querySelector('link[rel^="icon"]')) pic = document.querySelector('link[rel^="icon"]').getAttribute('href');
pic = encodeURIComponent(pic);
let share_type = {
qzone: `http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${url}&title=${title}&pics=${pic}&summary=${content}`,
weibo: `http://service.weibo.com/share/share.php?url=${url}&title=${title}&pic=${pic}&searchPic=false`,
tqq: `http://share.v.t.qq.com/index.php?c=share&a=index&url=${url}&title=${title}&appkey=801cf76d3cfc44ada52ec13114e84a96`,
renren: `http://widget.renren.com/dialog/share?resourceUrl=${url}&srcUrl=${url}&title=${title}&description=${content}`,
douban: `http://www.douban.com/share/service?href=${url}&name=${title}&text=${content}&image=${pic}`,
facebook: `https://www.facebook.com/sharer/sharer.php?u=${url}&t=${title}&pic=${pic}`,
twitter: `https://twitter.com/intent/tweet?text=${title}&url=${url}`,
linkedin: `https://www.linkedin.com/shareArticle?title=${title}&summary=${content}&mini=true&url=${url}&ro=true`,
weixin: `http://qr.topscan.com/api.php?text=${url}&logo=${pic}`,
qq: `http://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}&summary=${content}&pics=${pic}`,
};
let share_url = share_type[type];
if (typeof share_url == 'undefined') { alert('不支持以此格式分享');return false; }
window.open(share_type[type],
'Share it with your friends',
`height=600,width=800,top=${screen.availHeight / 5},left=${screen.availWidth / 4},`);
return true;
}

facebook

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!-- 在head部分添加 -->
<meta property="og:url" content="https://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://www.your-domain.com/path/image.jpg" />


<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
//下面填入一个你的app id,如果还没,请在fb开发者平台注册一个
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId={your app id}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<!-- Facebook预定义的分享按钮 -->
<!-- data-layout可选box_count、button_count 或 button -->
<!-- data-size可选large 和 small -->
<div class="fb-share-button"
data-href="分享的链接"
data-layout="button_count"
data-size="small">
</div>

<script>
// 自定义触发事件进行分享示例
var shareToFbBtn = document.getElementById('fb-btn');
shareToFbBtn.onclick = function(){
FB.ui({
method: 'share',
href: "htttp://www.eaxmple.com/share.html" //这里换成你的网址
}, function(response){
//分享回调
})
}
</script>

<!-- 官方文档 -->
<!-- https://developers.facebook.com/docs/plugins/share-button -->
支付宝打赏 微信打赏

赞赏是不耍流氓的鼓励