最近在搞一个日程管理网站, 需要实现分享到人人功能, 所以找了一下人人API, 然后根据自己需要修改了一下.
首先得有一个人人给的js文件, 如下:
var Renren = Renren || {};
if(!Renren.share){
Renren.share = function() {
var isIE = navigator.userAgent.match(/(msie) ([\w.]+)/i);
var hl = location.href.indexOf('#');
var resUrl = (hl == -1 ? location.href : location.href.substr(0, hl));
var shareImgs = "";
var sl = function(str) {
var placeholder = new Array(23).join('x');
str = str
.replace(
/(https?|ftp|gopher|telnet|prospero|wais|nntp){1}:\/\/\w*[\u4E00-\u9FA5]*((?![\"| |\t|\r|\n]).)+/ig,
function(match) {
return placeholder + match.substr(171);
}).replace(/[^\u0000-\u00ff]/g, "xx");
return Math.ceil(str.length / 2);
};
var cssImport = function(){
var static_url = 'http://xnimg.cn/xnapp/share/css/v2/rrshare.css';
var b = document.createElement("link");
b.rel = "stylesheet";
b.type = "text/css";
b.href = static_url;
(document.getElementsByTagName("head")[0] || document.body).appendChild(b)
};
var getShareType = function (dom) {
return dom.getAttribute("type") || "button"
};
var opts = {};
if(typeof(imgMinWidth)!='undefined'){
opts.imgMinWidth = imgMinWidth || 60;
} else {
opts.imgMinWidth = 60;
}
if(typeof(imgMinHeight)!='undefined'){
opts.imgMinHeight = imgMinHeight || 60;
} else {
opts.imgMinHeight = 60;
}
var renderShareButton = function (btn,index) {
if(btn.rendered){
return;
}
btn.paramIndex = index;
var shareType = getShareType(btn).split("_");
var showType = shareType[0] == "icon" ? "icon" : "button";
var size = shareType[1] || "small";
var shs = "xn_share_"+showType+"_"+size;
var innerHtml = [
'<span class="xn_share_wrapper ',shs,'"></span>'
];
btn.innerHTML = innerHtml.join("");
btn.rendered = true;
};
var postTarget = function(opts) {
var form = document.createElement('form');
form.action = opts.url;
form.target = opts.target;
form.method = 'POST';
form.acceptCharset = "UTF-8";
for (var key in opts.params) {
var val = opts.params[key];
if (val !== null && val !== undefined) {
var input = document.createElement('textarea');
input.name = key;
input.value = val;
form.appendChild(input);
}
}
var hidR = document.getElementById('renren-root-hidden');
if (!hidR) {
hidR = document.createElement('div'), syl = hidR.style;
syl.positon = 'absolute';
syl.top = '-10000px';
syl.width = syl.height = '0px';
hidR.id = 'renren-root-hidden';
(document.body || document.getElementsByTagName('body')[0])
.appendChild(hidR);
}
hidR.appendChild(form);
try {
var cst = null;
if (isIE && document.charset.toUpperCase() != 'UTF-8') {
cst = document.charset;
document.charset = 'UTF-8';
}
form.submit();
} finally {
form.parentNode.removeChild(form);
if (cst) {
document.charset = cst;
}
}
};
var getCharSet = function(){
if(document.charset){
return document.charset.toUpperCase();
} else {
var metas = document.getElementsByTagName("meta");
for(var i=0;i < metas.length;i++){
var meta = metas[i];
var metaCharset = meta.getAttribute('charset');
if(metaCharset){
return meta.getAttribute('charset');
}
var metaContent = meta.getAttribute('content');
if(metaContent){
var contenxt = metaContent.toLowerCase();
var begin = contenxt.indexOf("charset=");
if(begin!=-1){
var end = contenxt.indexOf(";",begin+"charset=".length);
if(end != -1){
return contenxt.substring(begin+"charset=".length,end);
}
return contenxt.substring(begin+"charset=".length);
}
}
}
}
return '';
}
var charset = getCharSet();
var getParam = function (param){
param = param || {};
param.api_key = param.api_key || '';
param.resourceUrl = param.resourceUrl || resUrl;
param.title = param.title || '';
param.pic = param.pic || '';
param.description = param.description || '';
if(resUrl == param.resourceUrl){
param.images = param.images || shareImgs;//一般就是当前页面的分享,因此取当前页面的img
}
param.charset = param.charset || charset || '';
return param;
}
var onclick = function(data) {
var submitUrl = 'http://widget.renren.com/dialog/share';
var p = getParam(data);
var prm = [];
for (var i in p) {
if (p[i])
prm.push(i + '=' + encodeURIComponent(p[i]));
}
var url = submitUrl+"?" + prm.join('&'), maxLgh = (isIE
? 2048
: 4100), wa = 'width=700,height=650,left=0,top=0,resizable=yes,scrollbars=1';
if (url.length > maxLgh) {
window.open('about:blank', 'fwd', wa);
postTarget({
url : submitUrl,
target : 'fwd',
params : p
});
} else {
window.open(url, 'fwd', wa);
}
return false;
};
window["rrShareOnclick"] = onclick;
var init = function() {
if (Renren.share.isReady || document.readyState !== 'complete')
return;
var imgs = document.getElementsByTagName('img'), imga = [];
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].width >= opts.imgMinWidth
&& imgs[i].height >= opts.imgMinHeight) {
imga.push(imgs[i].src);
}
}
window["rrShareImgs"] = imga;
if (imga.length > 0)
shareImgs = imga.join('|');
if (document.addEventListener) {
document.removeEventListener('DOMContentLoaded', init, false);
} else {
document.detachEvent('onreadystatechange', init);
}
cssImport();
var shareBtn = document.getElementsByName("xn_share");
var len = shareBtn?shareBtn.length:0;
for (var b = 0; b < len; b++) {
var a = shareBtn[b];
renderShareButton(a,b);
}
Renren.share.isReady = true;
};
if (document.readyState === 'complete') {
init();
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', init, false);
window.addEventListener('load', init, false);
} else {
document.attachEvent('onreadystatechange', init);
window.attachEvent('onload', init);
}
};
Renren.share();
}
将上面的代码保存为renrenShare.js文件.
下面再给我的html测试代码:
<html>
<head>
<title>
分享到人人
</title>
<script type="text/javascript" src="renrenShare.js"></script> <script type="text/javascript">
function shareClick() { var txt = document.getElementById("content").value;
var rrShareParam = {
resourceUrl: 'http://mm.oureda.cn/', //那这个是什么?
srcUrl: 'http://www.163.com/', //这个是其中三个的链接的url
pic: 'http://img.yiyuanyi.org/2010/3/11/129127450453593750.jpg', //这个是要分享的图片
title: '我正在使用某某日历, 天呐, 今天的日程太值得分享了~',
description: txt
};
rrShareOnclick(rrShareParam);
}
</script>
</head>
<body>
<textarea id="content" style="overflow:auto;" rows="4" cols="100">
8:30 上学
10:00 放学
</textarea>
<br />
<br />
<a name="xn_share" onclick="shareClick()" type="button_large" href="javascript:;"></a>
</body>
</html>
下面对代码稍加注释:
1.首先是shareClick里的txt变量. 用这个是为了实现分享时自动读取网页中的一段文本(我这里是读取日程信息), 然后日程我是模拟放在了id='content'的textarea里面. 得到日程信息后, 这个信息会在分享时自动加载到"分享理由"栏里. 这对应上面代码的"description: txt" .
2.倒数第三行是一个按钮状的分享链接, 关于这个链接的样式是可以自己选择的, 这个在人人API官网可以找到.
3.shareClick()函数里, 有三个链接, 就是那三个后面跟了注释的三行.
pic是你要分享的图片, 其url我是随便在网上找的一张(这个不能是本地路径, 必须放在云端), 实际使用时, 我将用js代码读取我网站里要分享的图片的url再赋值给'pic'.
关于srcUrl 和resourceUrl 就是我的困惑了, 希望路过的大神能稍作停留解答一下:
分享后有三个可点的链接, 但其地址都是srcUrl的值. 所以我有两点疑惑:
1. resourceUrl的作用是什么?
2. 我想要的是点击三个链接中的图片链接时打开图片(因为我打算分享时将信息展示在图片上), 点击另外的打开我想分享的网站. 可是现在三个链接都是指向同一个地址, 我想请教下是否可以将那三个链接的URL区别开.