WordPress划词显示分享按钮

十月 30
磊子 2011年 12 条评论

无意中看了一个网站http://bdc.dict.cn 选词的时候出现个按钮。后来发现QQ也出来个Q-Share的功能,于是在网上找了找相关资料发现已经有在使用这个功能了而且也给出了方法划词显示新浪分享按钮,于是整理了一下把QQ微博也加了进去,现在为大家分享一下。

因为这个使用Jquery写出来的,所以需要把jquery库文件导进去,不过wordpress已经有Jquery所以我们可以直接贴代码使用(不显示的可以把Jquery库文件导入进去可以去这里下载).

然后把这个压缩包文件 点击下载(里面有一个js文件和两张分享图片)(注:在导入文件的时候记得放在库文件之后)
最后就是在页面底部加上图片路径js代码

function inputimage(){
$('<img id="imgSinaShare" class="img_share" title="选中内容分享到新浪微博" src="你的图片地址" /><img id="imgQqShare" class="img_share" title="选中内容分享到腾讯微博" src="你的图片地址" />').appendTo('body');
}

效果如下图(或者随便选中我的一篇文字即可看效果):
划词显示分享按钮效果

Ps: 这个不只是可以用在wordpress上面,在其他各种网站也是可以用的。大家快试试看吧!

» 版权所有©转载必须以链接形式注明作者和原始出处:磊子的博客 » WordPress划词显示分享按钮
» 地址:( Ctrl+C 复制 )
» 如果对本站感兴趣,请到网站右下方订阅本站,将为你带来更多精彩和实用的文章
» 如果您对这篇文章感兴趣,不妨小小的 捐助(Donate)一下博主吧,不管多少都是对博主最大的支持和鼓励哟,博主-磊子感谢大家的支持!!!

12 条留言 其中:访客:8 条, 博主:4 条

  1. 那个JS文件应该放在哪里,我把那几行代码放在了head文件里面了。
    但是不好用

  2. 侯永禄说:

    很不错啊,还想请教一个问题:图片的怎么弄?好像新浪博客的一样,当鼠标焦点在图片上时,出现“分享到新浪微博”的图标。

  3. 明日把说:

    谢谢咯。我感觉这功能还行。嘻嘻

  4. Jeremy说:

    做的很不错。不过有待改进,
    例如:可以考虑选取范围控制。某些区域或控件文字应该禁止。

    • 磊子说:

      说的有道理! 比如控制在主要内容范围内! 有时间折腾下! 呵呵!

  5. 胡哥说:

    这个功能不错 我找了这个功能 都好久了 呵呵 :wink:

  6. ylsnuha说:

    感觉这功能没什么意思

  7. 最弱网说:

    这个是什么

    • 磊子说:

      没有看明白么?就是和划词翻译一个意思,只不过变成了分享按钮了! 可以加我细聊,呵呵!

  8. 写的很有作用去,清晰明了!

说点什么吧




订阅本站