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，如果不出意外的话，就大功告成了，你可以在自己的网站上试一试了。