Shulou(Shulou.com)06/02 Report--

This article mainly introduces the method of Wordpress sharing the selected content to Sina Weibo, which can be used for reference by friends who need it. I hope you will learn a lot after reading this article. Next, let the editor take you to learn about it.

How does Wordpress share the selected content to Sina Weibo?

1, the introduction of jQuery, I believe that most WordPress blogs have introduced jQuery, then you can directly proceed to the second step.

2. At the bottom of the page, or more specifically, add such a JS after the introduction of the jQuery library, and you can see the same effect as this site.

The function of selecting and sharing looks more advanced, but in fact, the implementation is quite simple. The principle that people will have a big head and most people are not interested is directly skipped here. After this js text is selected, I simply encapsulate the function of sharing to Sina Weibo. The name of the method is: $sinaMiniBlogShare.

The example code is as follows:

The code is as follows:

Var miniBlogShare = function () {/ / the specified location resides in the node $('

'). AppendTo (' body'); / / default style $('.img _ share'). Css ({display:' none', position: 'absolute', cursor:' pointer'}); / / select the text var funGetSelectTxt = function () {var txt ='; if (document.selection) {txt = document.selection.createRange (). Text;} else {txt = document.getSelection ();} return txt.toString ();} / / the Weibo icon $('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) is displayed when the text is selected

< 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); } }); }(); 可以看到$sinaMiniBlogShare方法有两个参数,eleShare和eleContainer,其中,前一个参数是必须的,指的是文字选中后出现的浮动层元素(在本文demo中就是新浪眼睛图标),后面一个参数指文字选择的容器元素,可选参数,如果不设置则指document元素，也就是整个页面文字选中都会触发分享的功能. 假设新浪微博分享图标的HTML如下: 代码如下:

Then use the following code directly:

The code is as follows:

SinaMiniBlogShare (document.getElementById ("imgSinaShare")); Thank you for reading this article carefully. I hope it is helpful for all of you to share the selected content in Wordpress and share the selected content on Sina Weibo. At the same time, I also hope you can support us, pay attention to the industry information channel, and find out if you encounter problems. Detailed solutions are waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.