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

评论

  1. 12年前
    2012-4-16 23:10:17

    之前就有想法弄这个,不过博客好像没太大必要 !!

    • 啄木游弋
      博主
      刘印博客
      12年前
      2012-4-16 23:14:30

      是的,我也觉得没必要。但谁让我在一定程度上是感官动物呢,这个效果很炫,不是吗?

  2. 12年前
    2012-4-16 19:14:29

    有没有这样的功能,发布时自动同步微博和QQ空间啊

    • 啄木游弋
      博主
      睡着的水
      12年前
      2012-4-16 20:02:08

      这个功能需要使用插件了,wp-connect,我没有用过,不知道好用不好用,你可以试试。如果有效果,欢迎和我分享哈。

  3. 12年前
    2012-4-16 17:51:02

    像我这种碎碎念博客还是算了= =

    • 啄木游弋
      博主
      饭团同学x
      12年前
      2012-4-16 18:21:49

      其实,我也是碎碎念,单纯的觉得这种效果很炫,再加上独立主机不担心加载js影响速度,所以就安上了,O(∩_∩)O

      • 啄木游弋
        12年前
        2012-6-23 7:10:07

        @啄木游弋: 你现在好像又去掉了这个,看不到这个效果了

        • 啄木游弋
          博主
          80后男人
          12年前
          2012-6-23 11:22:47

          @80后男人: 是的,主题升级后我就没加这个功能,喜欢的话,你可以自己搞一搞玩。

  4. 12年前
    2012-4-16 15:27:05

    拜读了,收藏起来,等博客有人气的时候用,真是谢谢

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇