人人API 分享到人人功能 修改版
最近在搞一个日程管理网站, 需要实现分享到人人功能, 所以找了一下人人API, 然后根据自己需要修改了一下.
首先得有一个人人给的js文件, 如下:
1 var Renren = Renren || {}; 2 if(!Renren.share){ 3 Renren.share = function() { 4 var isIE = navigator.userAgent.match(/(msie) ([\w.]+)/i); 5 var hl = location.href.indexOf('#'); 6 var resUrl = (hl == -1 ? location.href : location.href.substr(0, hl)); 7 var shareImgs = ""; 8 var sl = function(str) { 9 var placeholder = new Array(23).join('x'); 10 str = str 11 .replace( 12 /(https?|ftp|gopher|telnet|prospero|wais|nntp){1}:\/\/\w*[\u4E00-\u9FA5]*((?![\"| |\t|\r|\n]).)+/ig, 13 function(match) { 14 return placeholder + match.substr(171); 15 }).replace(/[^\u0000-\u00ff]/g, "xx"); 16 return Math.ceil(str.length / 2); 17 }; 18 var cssImport = function(){ 19 var static_url = 'http://xnimg.cn/xnapp/share/css/v2/rrshare.css'; 20 var b = document.createElement("link"); 21 b.rel = "stylesheet"; 22 b.type = "text/css"; 23 b.href = static_url; 24 (document.getElementsByTagName("head")[0] || document.body).appendChild(b) 25 }; 26 var getShareType = function (dom) { 27 return dom.getAttribute("type") || "button"
28 }; 29 var opts = {}; 30 if(typeof(imgMinWidth)!='undefined'){ 31 opts.imgMinWidth = imgMinWidth || 60; 32 } else { 33 opts.imgMinWidth = 60; 34 } 35 if(typeof(imgMinHeight)!='undefined'){ 36 opts.imgMinHeight = imgMinHeight || 60; 37 } else { 38 opts.imgMinHeight = 60; 39 } 40 var renderShareButton = function (btn,index) { 41 if(btn.rendered){ 42 return; 43 } 44 btn.paramIndex = index; 45 var shareType = getShareType(btn).split("_"); 46 var showType = shareType[0] == "icon" ? "icon" : "button"; 47 var size = shareType[1] || "small"; 48 var shs = "xn_share_"+showType+"_"+size; 49 var innerHtml = [ 50 '<span class="xn_share_wrapper ',shs,'"></span>'
51 ]; 52 btn.innerHTML = innerHtml.join(""); 53 btn.rendered = true; 54 }; 55 var postTarget = function(opts) { 56 var form = document.createElement('form'); 57 form.action = opts.url; 58 form.target = opts.target; 59 form.method = 'POST'; 60 form.acceptCharset = "UTF-8"; 61 for (var key in opts.params) { 62 var val = opts.params[key]; 63 if (val !== null && val !== undefined) { 64 var input = document.createElement('textarea'); 65 input.name = key; 66 input.value = val; 67 form.appendChild(input); 68 } 69 } 70 var hidR = document.getElementById('renren-root-hidden'); 71 if (!hidR) { 72 hidR = document.createElement('div'), syl = hidR.style; 73 syl.positon = 'absolute'; 74 syl.top = '-10000px'; 75 syl.width = syl.height = '0px'; 76 hidR.id = 'renren-root-hidden'; 77 (document.body || document.getElementsByTagName('body')[0]) 78 .appendChild(hidR); 79 } 80 hidR.appendChild(form); 81 try { 82 var cst = null; 83 if (isIE && document.charset.toUpperCase() != 'UTF-8') { 84 cst = document.charset; 85 document.charset = 'UTF-8'; 86 } 87 form.submit(); 88 } finally { 89 form.parentNode.removeChild(form); 90 if (cst) { 91 document.charset = cst; 92 } 93 } 94 }; 95 var getCharSet = function(){ 96 if(document.charset){ 97 return document.charset.toUpperCase(); 98 } else { 99 var metas = document.getElementsByTagName("meta"); 100 for(var i=0;i < metas.length;i++){ 101 var meta = metas[i]; 102 var metaCharset = meta.getAttribute('charset'); 103 if(metaCharset){ 104 return meta.getAttribute('charset'); 105 } 106 var metaContent = meta.getAttribute('content'); 107 if(metaContent){ 108 var contenxt = metaContent.toLowerCase(); 109 var begin = contenxt.indexOf("charset="); 110 if(begin!=-1){ 111 var end = contenxt.indexOf(";",begin+"charset=".length); 112 if(end != -1){ 113 return contenxt.substring(begin+"charset=".length,end); 114 } 115 return contenxt.substring(begin+"charset=".length); 116 } 117 } 118 } 119 } 120 return ''; 121 } 122 var charset = getCharSet(); 123 var getParam = function (param){ 124 param = param || {}; 125 param.api_key = param.api_key || ''; 126 param.resourceUrl = param.resourceUrl || resUrl; 127 param.title = param.title || ''; 128 param.pic = param.pic || ''; 129 param.description = param.description || ''; 130 if(resUrl == param.resourceUrl){ 131 param.images = param.images || shareImgs;//一般就是当前页面的分享,因此取当前页面的img
132 } 133 param.charset = param.charset || charset || ''; 134 return param; 135 } 136 var onclick = function(data) { 137 var submitUrl = 'http://widget.renren.com/dialog/share'; 138 var p = getParam(data); 139 var prm = []; 140 for (var i in p) { 141 if (p[i]) 142 prm.push(i + '=' + encodeURIComponent(p[i])); 143 } 144 var url = submitUrl+"?" + prm.join('&'), maxLgh = (isIE 145 ? 2048
146 : 4100), wa = 'width=700,height=650,left=0,top=0,resizable=yes,scrollbars=1'; 147 if (url.length > maxLgh) { 148 window.open('about:blank', 'fwd', wa); 149 postTarget({ 150 url : submitUrl, 151 target : 'fwd', 152 params : p 153 }); 154 } else { 155 window.open(url, 'fwd', wa); 156 } 157 return false; 158 }; 159 window["rrShareOnclick"] = onclick; 160 var init = function() { 161 if (Renren.share.isReady || document.readyState !== 'complete') 162 return; 163 var imgs = document.getElementsByTagName('img'), imga = []; 164 for (var i = 0; i < imgs.length; i++) { 165 if (imgs[i].width >= opts.imgMinWidth 166 && imgs[i].height >= opts.imgMinHeight) { 167 imga.push(imgs[i].src); 168 } 169 } 170 window["rrShareImgs"] = imga; 171 if (imga.length > 0) 172 shareImgs = imga.join('|'); 173 if (document.addEventListener) { 174 document.removeEventListener('DOMContentLoaded', init, false); 175 } else { 176 document.detachEvent('onreadystatechange', init); 177 } 178 cssImport(); 179 var shareBtn = document.getElementsByName("xn_share"); 180 var len = shareBtn?shareBtn.length:0; 181 for (var b = 0; b < len; b++) { 182 var a = shareBtn[b]; 183 renderShareButton(a,b); 184 } 185 Renren.share.isReady = true; 186 }; 187 if (document.readyState === 'complete') { 188 init(); 189 } else if (document.addEventListener) { 190 document.addEventListener('DOMContentLoaded', init, false); 191 window.addEventListener('load', init, false); 192 } else { 193 document.attachEvent('onreadystatechange', init); 194 window.attachEvent('onload', init); 195 } 196 }; 197 Renren.share(); 198 }
将上面的代码保存为renrenShare.js文件.
下面再给我的html测试代码:
1 <html>
2 <head>
3 <title>
4 分享到人人 5 </title>
6 <script type="text/javascript" src="renrenShare.js"></script>
7
8 <script type="text/javascript">
9 function shareClick() {
11 var txt = document.getElementById("content").value; 12 var rrShareParam = { 13 resourceUrl: 'http://mm.oureda.cn/', //那这个是什么?
14 srcUrl: 'http://www.163.com/', //这个是其中三个的链接的url
pic: 'http://img.yiyuanyi.org/2010/3/11/129127450453593750.jpg', //这个是要分享的图片
15 title: '我正在使用某某日历, 天呐, 今天的日程太值得分享了~', 16 description: txt 17 }; 18 rrShareOnclick(rrShareParam); 19 } 20 </script>
21 </head>
22 <body>
23 <textarea id="content" style="overflow:auto;" rows="4" cols="100">
24 8:30 上学 25 10:00 放学 26 </textarea>
27 <br />
28 <br />
29 <a name="xn_share" onclick="shareClick()" type="button_large" href="javascript:;"></a>
30 </body>
31 </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区别开.