“分享到新浪微博”按钮
- 2012年07月5日
在博客的每篇博文后都加入了“分享到新浪微博”按钮。方法是编辑monochrome的主题(theme),在header.php的</head>前加入这么一段代码:
<script type="text/javascript"> jQuery(function() { jQuery('div.post_content_wrapper').each(function() { var urlstr = jQuery(this).find('h2.post_title > a').first().attr('href'); if (typeof(urlstr) == 'undefined') { urlstr = location.href; } var _w = 72 , _h = 16; var param = { url:urlstr, type:'3', count:'1', // 是否显示分享数 appkey:'', title:'', pic:'', ralateUid:'1691250947', // 关联用户的微博用户号码 language:'zh_cn', rnd:new Date().valueOf() }; var temp = []; for (var p in param) { temp.push(p + '=' + encodeURIComponent(param[p] || '')); } buttonstr = '<div style="width:100%;text-align:right;">'; buttonstr += '<iframe allowTransparency="true" frameborder="0"'; buttonstr += ' scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?'; buttonstr += temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe></div>'; jQuery(this).find('div.post_content').first().after(buttonstr); }); }); </script>
这个代码也许只在monochrome主题下工作,而对于其它的主题,需要稍事修改。
iframe所要显示的参数是从新浪微博开放平台获得的。
程序的小难点在于:显示单篇博文的时候,博文题目只是个简单的header,header上没有链接页面的URL。而显示多篇博文时,每个博文的题目上都链接了其单篇的URL。获取这个URL就需要一个条件判断,也就是这段代码:
var urlstr = jQuery(this).find('h2.post_title > a').first().attr('href'); if (typeof(urlstr) == 'undefined') { urlstr = location.href; }
在自己机器上调好之后,把代码放到博客上时,还遇到一个惊奇。分享按钮根本不显示,好像这段代码根本未被调用一样。后来发现,在我的机器上,可以使用jQuery的缩略写法$(),而在博客网站上,必须老老实实写成jQuery()。