人人API 分享到人人功能 修改版

最近在搞一个日程管理网站, 需要实现分享到人人功能, 所以找了一下人人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区别开.