Typecho 将选中文字转发到微博

最近在看腾讯新闻的时候,无意中发现,当我选中新闻中的文字的时候,鼠标右上角会显示一个“转播至微博”的按钮,点击后就会将选中的文字转发到微博上。这是一个很不错的用户体验,如果能把它引入到 Typecho 博客中,那不是很好吗?

为此我还特地去注册了一个腾讯微博开放平台的开发者,当我开始阅读开发文档的时候,才发现,他妹的,腾讯官方已经推出一个相同功能的应用,叫作 “Q-Share”,再翻阅了一下其他资料,原来已经有前辈写出了 js 页面文字选中后分享到新浪微博的方法,那我就省力多了,两者结合一下,把新浪微博和腾讯微博两个按钮都加上了,然后闲的蛋疼的我又把它翻译成了 jQuery 的方法。

效果的话就可以看本站了,选中任何文字,就会在右上角显示两个微博按钮,点击试试吧。

实现的方法也很简单,只需要两步:

1、引入 jQuery,相信大多数 Typecho 博客都已经引入了 jQuery,那就可以直接进行第二步了。

2、在页面底部,或者更确切的说,在引入 jQuery 库的后面加上这样一段 JS,你就可以看到和本站一样的效果了。

var miniBlogShare = function() {
    //指定位置驻入节点
    $('<img id="imgSinaShare" class="img_share" title="将选中内容分享到新浪微博" src='/index/thumb.png' data-original="https://img2.itlu.org/usr/uploads/images/sina_share.gif" /><img id="imgQqShare" class="img_share" title="将选中内容分享到腾讯微博" src='/index/thumb.png' data-original="https://img2.itlu.org/usr/uploads/images/tt_share.png" />').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 + '&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) + '&url=' + window.location.href);
        }
    });
}();

赶紧选中本文的标题,在微博上通知你的好友来围观吧...

文章转自万戈的博客,过去看他的文章就知道了,完全Copy而已,就是将Wordpress改为Typecho,哈哈,用上了,效果不错的说。

查看 wordpress jquery Typecho的相关文章

转载本站原创文章请注明:文章转自 挨踢路,链接: https://itlu.org/articles/1641.html

已有 16 条评论

  1. 友情提示 博主你的图片地址貌似显示不了

    1. 你是电信网络的,应该是正常的才对。不过感谢您的提醒,已经换地方了

  2. 过来看看博主有什么要分享

  3. 打开电脑也要算一步了,

  4. 有空再改这个玩玩

    1. 这个不用改动什么,直接加到底部就好了

  5. typecho好用吧,我安装过但没正式用过。这个转发文字到微博的,wordpress的方法倒见过。

    1. 我就是在wordpress看到的,直接用过来的

  6. Wordpress已经有人写出来了,不过感觉不是很实用


    Firefox早就有这样的插件

    1. FF用户装有该插件的,可以飘过。方便其他浏览器的用户嘛

  7. 好东西,不过我的已经有了同步功能

    1. 我也有一个同步的功能,这个是将页面的某些文字直接分享到微博,算是一个补充吧

  8. 回复 那个康康 那个康康

    .

    1. 果然是那个康康,IP都是软件园的.

  9. 请问博主的代码高亮用的什么呢?

    1. 你好,不是用插件的,只是用了一个叫“贴代码”的而已。全部是HTML+CSS

添加新评论

您好,#请填信息#修改