wordpress将选中文字转发到新浪、腾讯微博

不少网站都集成了选中文字转发到新浪、腾讯微博功能,不仅仅限于用wordpress搭建的网站,今天上午查文献的时候,偶尔在吾喜杂志的网站上也看到了这个效果。闲话不说,这个效果是使用js实现的,很多人也都介绍过,比如大名鼎鼎的万戈。今天在这里重新写一下实现的方法,我尽量从一个纯菜鸟的视角来一步步的解析操作步骤。

首先,你的主题必须是已经加载了js库,这个是前提条件。个人觉得,现在基本上所有的主题都是预加载js库的,在你的网站上,鼠标右键单击,选择查看页面源代码,重点查看源代码的顶部几行,看看有没有“jquery-1.7.2.min.js”字样,版本号无所谓。如果没有找到,那你的主题就没加载js库,需要自己下载js库,放在你的主题文件夹里,并在主题的header.php中进行加载。加载js库的代码如下:

<script type="text/javascript" src="<?php bloginfo('template_url');?>/jquery-1.7.2.min.js"></script>

接下来是关键部分,将下面的代码贴在你的主题footer.php里面,具体位置我推荐贴在body结束之前。代码如下:

<script type="text/javascript">// <![CDATA[
var miniBlogShare = function() {
//指定位置驻入节点
$('<img id="imgSinaShare" class="img_share" title="将选中内容分享到新浪微博" src="<?php bloginfo('template_url');?>/images/jssharesina.gif" /><img id="imgQqShare" class="img_share" title="将选中内容分享到腾讯微博" src="<?php bloginfo('template_url');?>/images/jsshareqq.gif" />').appendTo('body');
//默认样式
$('.img_share').css({
display : 'none',
position : 'absolute',
cursor : 'pointer'
});
//选中文字
var funGetSelectTxt = function() {
var txt = '';
if(document.selection) {
txt = document.selection.createRange().text;
} else {
txt = document.getSelection();
}
return txt.toString();
};
//选中文字后显示微博图标
$('html,body').mouseup(function(e) {
if (e.target.id == 'imgSinaShare' || e.target.id == 'imgQqShare') {
return
}
e = e || window.event;
var txt = funGetSelectTxt(),
sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40,
top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40; if (txt) { $('#imgSinaShare').css({ display : 'inline', left : left, top : top }); $('#imgQqShare').css({ display : 'inline', left : left + 30, top : top }); } else { $('#imgSinaShare').css('display', 'none'); $('#imgQqShare').css('display', 'none'); } }); //点击新浪微博 $('#imgSinaShare').click(function() { var txt = funGetSelectTxt(), title = $('title').html(); if (txt) { window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + ' —— 转载自:' + title + '&#038;url=' + window.location.href); } }); //点击腾讯微博 $('#imgQqShare').click(function() { var txt = funGetSelectTxt(), title = $('title').html(); if (txt) { window.open('http://v.t.qq.com/share/share.php?title=' + encodeURIComponent(txt + ' —— 转载自:' + title) + '&#038;url=' + window.location.href); } }); }();
// ]]></script>

最后一步,右键另存下面的新浪微博和腾讯微博的图片,放在你的主题的images文件夹里面,没有的话,就新建一个images文件夹。

ok,如果不出意外的话,就大功告成了,你可以在自己的网站上试一试了。


9 comments

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload CAPTCHA.