接着上篇讲,上篇讲了如何分享到facebook
,这篇我们讲一下如何分享到twitter
和Email
,首先分享到twitter
和Email
不像分享到facebook
一样可以有回调,这两分享是没有回调的,分享成功失败,也不知道,但是会触发事件.
- 我们先来看下分享到
twitter
,首先引入twitter
的sdk
文件,如下图所示:
window.twttr = (function (d, s, id) { // 引入sdk
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
try {
twttr.ready(function (twttr) { // 注册事件
twttr.events.bind('tweet', function (event) {
// your callback action here...
console.log('callback')
});
});
} catch (err) {
new Error('twttr fail to load')
}
// 分享事件开始
$('.share_tweet').on('click', function() {
var text = '8%E6%9C%8817%E6%' // 携带文本需要通过url转码,如果不是标准转码可能会导致分享内容乱码(像中文、日文这种文本)
$(this).parent().attr('target', '_blank');
$(this).parent().attr('href', 'https://twitter.com/share?text='+ text +'&url=https://www.xxx.jp');
})
效果图如下所示
2.Javascript
如何将内容分享到Email
呢?我们知道分享到facebook
或者twitter
是将分享的内容通过a
标签href
属性带出去的,跳转到三方网站接收到URL
的参数就会生成相对应的内容,其实分享到Email
也是通过href
的属性去调取底层的api接口实现的,href
的参数上带上mailto
就可以调取邮件客户端,具体可携带的参数总共mailto
,cc
,bcc
,subject
,body
五个,有些客户端支持自定义的属性,有些客户端会过滤掉自定义的属性;代码如下图所示:
// html
<a class='my-href'>click</a>
// js
var email_url = ''; // 后端返回的需要动态添加邮件文本内容
var email_content = ''; // 后端返回的静态内容
var email_context = ''; // 邮件须发送的文本
email_context = email_content + encodeURIComponent(email_url); // 通过url调取需要进行url转码,不然通过url解码之后会乱码
$('.my-href'').attr('href', 'mailto:?body=' + email_context);
附上国外一篇博文参考地址:
全篇完~