How to share selected content to Sina Weibo in Wordpress

How to share selected content to Sina Weibo in Wordpress?

The example in this article describes how WordPress shares selected content to Sina Tencent Weibo. Share it with everyone for your reference. The specific method is as follows:

Recommended: "wordpress tutorial"

1. Introduce jQuery. I believe that most WordPress blogs have already introduced jQuery. Then you can proceed directly to the second step.

2. At the bottom of the page, or more precisely, add this piece of JS after introducing the jQuery library, you can see the same as this site It works.

The function of selecting and sharing looks relatively advanced. In fact, the implementation is quite simple. Some of the principles are confusing and not interesting to most people. I will just skip it here. After selecting this js text I have simply encapsulated the function of sharing to Sina Weibo. The method name is: $sinaMiniBlogShare

The example code is as follows:

The code is as follows:

var miniBlogShare = function() { 
//指定位置驻入节点 
$(&#39;<img id="imgSinaShare" class="img_share" title="将选中内容分享到新浪微博" src="1328255868614.gif" /><img id="imgQqShare" class="img_share" title="将选中内容分享到腾讯微博" src="/1328255868314.png" />&#39;).appendTo(&#39;body&#39;); 
//默认样式 
$(&#39;.img_share&#39;).css({ 
display : &#39;none&#39;, 
position : &#39;absolute&#39;, 
cursor : &#39;pointer&#39; 
}); 
//选中文字 
var funGetSelectTxt = function() { 
var txt = &#39;&#39;; 
if(document.selection) { 
txt = document.selection.createRange().text; 
} else { 
txt = document.getSelection(); 
} 
return txt.toString(); 
}; 
//选中文字后显示微博图标 
$(&#39;html,body&#39;).mouseup(function(e) { 
if (e.target.id == &#39;imgSinaShare&#39; || e.target.id == &#39;imgQqShare&#39;) { 
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) { 
$(&#39;#imgSinaShare&#39;).css({ 
display : &#39;inline&#39;, 
left : left, 
top : top 
}); 
$(&#39;#imgQqShare&#39;).css({ 
display : &#39;inline&#39;, 
left : left + 30, 
top : top 
}); 
} else { 
$(&#39;#imgSinaShare&#39;).css(&#39;display&#39;, &#39;none&#39;); 
$(&#39;#imgQqShare&#39;).css(&#39;display&#39;, &#39;none&#39;); 
} 
}); 
//点击新浪微博 
$(&#39;#imgSinaShare&#39;).click(function() { 
var txt = funGetSelectTxt(), title = $(&#39;title&#39;).html(); 
if (txt) { 
window.open(&#39;http://v.t.sina.com.cn/share/share.php?title=&#39; + txt + &#39; —— 转载自：&#39; + title + &#39;&url=&#39; + window.location.href); 
} 
}); 
//点击腾讯微博 
$(&#39;#imgQqShare&#39;).click(function() { 
var txt = funGetSelectTxt(), title = $(&#39;title&#39;).html(); 
if (txt) { 
window.open(&#39;http://v.t.qq.com/share/share.php?title=&#39; + encodeURIComponent(txt + &#39; —— 转载自：&#39; + title) + &#39;&url=&#39; + window.location.href); 
} 
}); 
}();

You can see $ The sinaMiniBlogShare method has two parameters, eleShare and eleContainer. The former parameter is required and refers to the floating layer element that appears after the text is selected (in the demo of this article, it is the Sina eye icon). The latter parameter refers to the container for text selection. Element, optional parameter, if not set, it refers to the document element, that is, the selection of the entire page text will trigger the sharing function.

Assume that the HTML of the Sina Weibo sharing icon is as follows:

The code is as follows :

<img id="imgSinaShare" class="img_sina_share" title="将选中内容分享到新浪微博" src="http://simg.sinajs.cn/blog7style/images/common/share.gif" />

Then use the following code directly:

The code is as follows:

$sinaMiniBlogShare(document.getElementById("imgSinaShare"));

I hope this article will be helpful to everyone in building a WordPress website.

The above is the detailed content of How to share selected content to Sina Weibo in Wordpress. For more information, please follow other related articles on the PHP Chinese website!