Feature: A better share button NeedMoreShare2 #1913

LEAFERx · 2017-09-30T02:55:53Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines.
Tests for the changes have been added (for bug fixes / features).
- Muse | Mist have been tested.
- Pisces | Gemini have been tested.
Docs have been added / updated (for bug fixes / features).

PR Type

What kind of change does this PR introduce?

What is the new behavior?

Add a new share button which is a pure javascript lib.
It will be the only sharebutton that supports HTTPS in NexT (for now) and it has a better UI.
It's useful in China.
https://github.com/revir/need-more-share2

Screens with this changes:

1 Desktop Postbottom

when hover:

when click:

2 Desktop Float

when hover:

when click:

3 Mobile Postbottom

4 Mobile Float

How to use?

In NexT _config.yml:

# NeedMoreShare2
# This plugin is a pure javascript sharing lib which is useful in China.
# See: https://github.com/revir/need-more-share2
needMoreShare2:
  postbottom: 
    enable: true
    Options:
      iconStyle: box
      boxForm: horizontal
      position: middleCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float: 
    enable: true
    Options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

Does this PR introduce a breaking change?

Yes.
No.

…more-share2

houndci-bot · 2017-09-30T02:55:59Z

source/lib/needsharebutton/needsharebutton.min.js

@@ -0,0 +1 @@
+!function(){function a(a,b){if("string"==typeof b){var c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector;if(c)for(;a;){if(c.bind(a)(b))return a;a=a.parentElement}return!1}for(;a;){if(a==b)return a;a=a.parentElement}return!1}window.needShareButton=function(b,c){function d(a){var b={};for(var c in f.options)b[c]=f.options[c];b.url=window.location.href,b.title=f.getTitle(),b.image=f.getImage(),b.description=f.getDescription();for(var d in a.dataset)if(d.match(/share/)){var e=d.replace(/share/,"");if(!e.length)continue;e=e.charAt(0).toLowerCase()+e.slice(1);var g=a.dataset[d];"networks"===e?g=g.toLowerCase().split(","):"url"===e&&g&&"/"===g[0]&&(g=location.origin+g),b[e]=g}return b}function e(b){var c=document.createElement("span");if(c.className="need-share-button_dropdown",!b.querySelector(".need-share-button_dropdown")){var e=d(b);"box"==e.iconStyle&&"horizontal"==e.boxForm?c.className+=" need-share-button_dropdown-box-horizontal":"box"==e.iconStyle&&"vertical"==e.boxForm&&(c.className+=" need-share-button_dropdown-box-vertical"),setTimeout(function(){switch(e.position){case"topLeft":c.className+=" need-share-button_dropdown-top-left";break;case"topRight":c.className+=" need-share-button_dropdown-top-right";break;case"topCenter":c.className+=" need-share-button_dropdown-top-center",c.style.marginLeft=-c.offsetWidth/2+"px";break;case"middleLeft":c.className+=" need-share-button_dropdown-middle-left",c.style.marginTop=-c.offsetHeight/2+"px";break;case"middleRight":c.className+=" need-share-button_dropdown-middle-right",c.style.marginTop=-c.offsetHeight/2+"px";break;case"bottomLeft":c.className+=" need-share-button_dropdown-bottom-left";break;case"bottomRight":c.className+=" need-share-button_dropdown-bottom-right";break;case"bottomCenter":c.className+=" need-share-button_dropdown-bottom-center",c.style.marginLeft=-c.offsetWidth/2+"px";break;default:c.className+=" need-share-button_dropdown-bottom-center",c.style.marginLeft=-c.offsetWidth/2+"px"}},1);var g="default"==e.iconStyle?"need-share-button_link need-share-button_":"need-share-button_link-"+e.iconStyle+" need-share-button_link need-share-button_";for(var h in e.networks){var i=document.createElement("span");h=e.networks[h],i.className=g+h,i.className+=" icon-"+h,i.dataset.network=h,i.title=h,c.appendChild(i)}c.addEventListener("click",function(c){if(a(c.target,".need-share-button_link"))return c.preventDefault(),c.stopPropagation(),f.share[c.target.dataset.network](b),!1}),b.appendChild(c)}}var f=this;f.elem=b||"need-share-button",f.getTitle=function(){var a;return document.querySelector&&(a=document.querySelector("title"))?a.innerText:document.title},f.getImage=function(){var a;return document.querySelector&&(a=document.querySelector('meta[property="og:image"]')||document.querySelector('meta[name="twitter:image"]'))?a.getAttribute("content"):""},f.getDescription=function(){var a;return document.querySelector?(a=document.querySelector('meta[property="og:description"]')||document.querySelector('meta[name="twitter:description"]')||document.querySelector('meta[name="description"]'))?a.getAttribute("content"):"":(a=document.getElementsByTagName("meta").namedItem("description"))?a.getAttribute("content"):""},f.share={weibo:function(a){var b=d(a),c="http://v.t.sina.com.cn/share/share.php?title="+encodeURIComponent(b.title)+"&url="+encodeURIComponent(b.url)+"&pic="+encodeURIComponent(b.image);f.popup(c)},wechat:function(a){var b=d(a),c="https://api.qinco.me/api/qr?size=400&content="+encodeURIComponent(b.url),e=a.querySelector(".need-share-button_dropdown"),f=e.getElementsByClassName("need-share-wechat-code-image")[0];f?f.remove():(f=document.createElement("img"),f.src=c,f.alt="loading wechat image...",f.setAttribute("class","need-share-wechat-code-image"),e.appendChild(f))},douban:function(a){var b=d(a),c="https://www.douban.com/share/service?name="+encodeURIComponent(b.title)+"&href="+encodeURIComponent(b.url)+"&image="+encodeURIComponent(b.image);f.popup(c)},qqzone:function(a){var b=d(a),c="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title="+encodeURIComponent(b.title)+"&url="+encodeURIComponent(b.url)+"&pics="+encodeURIComponent(b.image)+"&desc="+encodeURIComponent(b.description);f.popup(c)},renren:function(a){var b=d(a),c="http://widget.renren.com/dialog/share?title="+encodeURIComponent(b.title)+"&resourceUrl="+encodeURIComponent(b.url)+"&pic="+encodeURIComponent(b.image)+"&description="+encodeURIComponent(b.description);f.popup(c)},mailto:function(a){var b=d(a),c="mailto:?subject="+encodeURIComponent(b.title)+"&body=Thought you might enjoy reading this: "+encodeURIComponent(b.url)+" - "+encodeURIComponent(b.description);window.location.href=c},twitter:function(a){var b=d(a),c=b.protocol+"twitter.com/intent/tweet?text=";c+=encodeURIComponent(b.title)+"&url="+encodeURIComponent(b.url),f.popup(c)},pinterest:function(a){var b=d(a),c=b.protocol+"pinterest.com/pin/create/bookmarklet/?is_video=false";c+="&media="+encodeURIComponent(b.image),c+="&url="+encodeURIComponent(b.url),c+="&description="+encodeURIComponent(b.title),f.popup(c)},facebook:function(a){var b=d(a),c=b.protocol+"www.facebook.com/share.php?";c+="u="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),f.popup(c)},googleplus:function(a){var b=d(a),c=b.protocol+"plus.google.com/share?";c+="url="+encodeURIComponent(b.url),f.popup(c)},reddit:function(a){var b=d(a),c=b.protocol+"www.reddit.com/submit?";c+="url="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),f.popup(c)},delicious:function(a){var b=d(a),c=b.protocol+"del.icio.us/post?";c+="url="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),c+="&notes="+encodeURIComponent(b.description),f.popup(c)},tapiture:function(a){var b=d(a),c=b.protocol+"tapiture.com/bookmarklet/image?";c+="img_src="+encodeURIComponent(b.image),c+="&page_url="+encodeURIComponent(b.url),c+="&page_title="+encodeURIComponent(b.title),f.popup(c)},stumbleupon:function(a){var b=d(a),c=b.protocol+"www.stumbleupon.com/submit?";c+="url="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),f.popup(c)},linkedin:function(a){var b=d(a),c=b.protocol+"www.linkedin.com/shareArticle?mini=true";c+="&url="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),c+="&source="+encodeURIComponent(b.source),f.popup(c)},slashdot:function(a){var b=d(a),c=b.protocol+"slashdot.org/bookmark.pl?";c+="url="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),f.popup(c)},technorati:function(a){var b=d(a),c=b.protocol+"technorati.com/faves?";c+="add="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),f.popup(c)},posterous:function(a){var b=d(a),c=b.protocol+"posterous.com/share?";c+="linkto="+encodeURIComponent(b.url),f.popup(c)},tumblr:function(a){var b=d(a),c=b.protocol+"www.tumblr.com/share?v=3";c+="&u="+encodeURIComponent(b.url),c+="&t="+encodeURIComponent(b.title),f.popup(c)},googlebookmarks:function(a){var b=d(a),c=b.protocol+"www.google.com/bookmarks/mark?op=edit";c+="&bkmk="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),c+="&annotation="+encodeURIComponent(b.description),f.popup(c)},newsvine:function(a){var b=d(a),c=b.protocol+"www.newsvine.com/_tools/seed&save?";c+="u="+encodeURIComponent(b.url),c+="&h="+encodeURIComponent(b.title),f.popup(c)},pingfm:function(a){var b=d(a),c=b.protocol+"ping.fm/ref/?";c+="link="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),c+="&body="+encodeURIComponent(b.description),f.popup(c)},evernote:function(a){var b=d(a),c=b.protocol+"www.evernote.com/clip.action?";c+="url="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),f.popup(c)},friendfeed:function(a){var b=d(a),c=b.protocol+"www.friendfeed.com/share?";c+="url="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),f.popup(c)},vkontakte:function(a){var b=d(a),c=b.protocol+"vkontakte.ru/share.php?";c+="url="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),c+="&description="+encodeURIComponent(b.description),c+="&image="+encodeURIComponent(b.image),c+="&noparse=true",f.popup(c)},odnoklassniki:function(a){var b=d(a),c=b.protocol+"www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1";c+="&st.comments="+encodeURIComponent(b.description),c+="&st._surl="+encodeURIComponent(b.url),f.popup(c)},mailru:function(a){var b=d(a),c=b.protocol+"connect.mail.ru/share?";c+="url="+encodeURIComponent(b.url),c+="&title="+encodeURIComponent(b.title),c+="&description="+encodeURIComponent(b.description),c+="&imageurl="+encodeURIComponent(b.image),f.popup(c)}},f.popup=function(a){var b=600,c=500,d=void 0!=window.screenLeft?window.screenLeft:screen.left,e=void 0!=window.screenTop?window.screenTop:screen.top,f=window.innerWidth?window.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,g=window.innerHeight?window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,h=f/2-b/2+d,i=g/2-c/2+e,j=window.open(a,"targetWindow","toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width="+b+", height="+c+", top="+i+", left="+h);window.focus&&j.focus()},f.options={iconStyle:"default",boxForm:"horizontal",position:"bottomCenter",protocol:["http","https"].indexOf(window.location.href.split(":")[0])===-1?"https://":"//",networks:"Weibo,Wechat,Douban,QQZone,Twitter,Pinterest,Facebook,GooglePlus,Reddit,Linkedin,Tumblr,Evernote"};for(var g in c)f.options[g]=c[g];f.options.networks=f.options.networks.toLowerCase().split(","),document.addEventListener("click",function(b){var c=document.querySelector(".need-share-button-opened");if(!a(b.target,".need-share-button-opened"))if(c)c.classList.remove("need-share-button-opened"),c.querySelector(".need-share-wechat-code-image")&&c.querySelector(".need-share-wechat-code-image").remove();else{var d=a(b.target,f.elem);d&&(d.classList.contains("need-share-button-opened")||(e(d),setTimeout(function(){d.classList.add("need-share-button-opened")},1)))}})},new needShareButton(".need-share-button")}();


Line is too long.
Expected '{' and instead saw 'for'.
Expected '{' and instead saw 'return'.
Missing semicolon.
Expected '{' and instead saw 'b'.
The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.
Expected '{' and instead saw 'if'.
Expected '{' and instead saw 'continue'.
'f' was used before it was defined.
Mixed double and single quotes.
Too many errors. (100% scanned).

ivan-nginx · 2017-09-30T07:56:34Z

source/css/_common/components/third-party/third-party.styl

@@ -5,3 +5,4 @@
 @import "localsearch";
 @import "busuanzi-counter";
 @import "algolia-search" if hexo-config('algolia_search.enable');
+@import "needsharebutton";


Need to add conditional import here.

ivan-nginx · 2017-09-30T07:57:51Z

_config.yml

+# This plugin is a pure javascript sharing lib which is useful in China.
+# See: https://github.com/revir/need-more-share2
+needMoreShare2:
+  postbottom: 


Need to add global enable/disable switch for better control it.

ivan-nginx · 2017-09-30T08:12:10Z

@LEAFERx and can u show live demo on it? Why on your blog i don't see this feature?

LEAFERx · 2017-09-30T09:58:56Z

@ivan-nginx now it's on my blog

ivan-nginx

Please, use lowercases in main config.

ivan-nginx · 2017-09-30T10:04:03Z

_config.yml

+  enable: false
+  postbottom: 
+    enable: false
+    Options:


To lowercase?

ivan-nginx · 2017-09-30T10:04:10Z

_config.yml

+      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
+  float: 
+    enable: false
+    Options:


To lowercase?

ivan-nginx · 2017-09-30T10:04:39Z

_config.yml

+# NeedMoreShare2
+# This plugin is a pure javascript sharing lib which is useful in China.
+# See: https://github.com/revir/need-more-share2
+needMoreShare2:


To lowercase? (_)

ivan-nginx · 2017-09-30T10:08:00Z

Also, need to test it on other schemes (Pisces | Gemini).

ivan-nginx

Just -float and -postbottom need to add after settings compare. No need to excess strings of code.

ivan-nginx · 2017-09-30T10:15:32Z

layout/_third-party/share/needsharebutton/floatdom.swig

@@ -0,0 +1 @@
+<div id="need-share-button-float"><i class="fa fa-share-alt" aria-hidden="true"></i></div>


And can u please to split this 2 files into 1?

It is ok to use macro to identify whether it is float or postbottom?And where should i import the macro in _layout.swig and post.swig?

U joking? This is floatdom.swig

I will make a new file called dom.swig like this:

{% macro render type %} <span id="needsharebutton-{{type}}"><i class="fa fa-share-alt" aria-hidden="true"></i></span> {% endmacro %}

(maybe i reply in the wrong place...)

Seems good. But why filename dom.swig? I think filename may be simple needsharebutton.swig.
layout/_third-party/needsharebutton.swig

ivan-nginx · 2017-09-30T10:15:39Z

layout/_third-party/share/needsharebutton/postbottomdom.swig

@@ -0,0 +1 @@
+<span id="need-share-button-postbottom"><i class="fa fa-share-alt" aria-hidden="true"></i></span>


And can u please to split this 2 files into 1?

ivan-nginx · 2017-09-30T10:32:17Z

Also, need to add in description all supported networks from needShareButton:

default: 'Mailto,Twitter,Pinterest,Facebook,GooglePlus,Reddit,Delicious,Tapiture,StumbleUpon,Linkedin,Slashdot,Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,Pingfm,Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru'
options: Any of the network name's from pervios row comma separated

So, this plugin not only for China useful. 😃

ivan-nginx · 2017-09-30T10:34:37Z

_config.yml

+      iconStyle: box
+      boxForm: horizontal
+      position: middleCenter
+      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook


Mailto,Twitter,Pinterest,Facebook,GooglePlus,Reddit,Delicious,Tapiture,StumbleUpon,Linkedin,Slashdot,Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,Pingfm,Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru

ivan-nginx · 2017-09-30T10:34:48Z

_config.yml

+      iconStyle: box
+      boxForm: horizontal
+      position: middleRight
+      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook


Mailto,Twitter,Pinterest,Facebook,GooglePlus,Reddit,Delicious,Tapiture,StumbleUpon,Linkedin,Slashdot,Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,Pingfm,Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru

ivan-nginx · 2017-09-30T11:07:39Z

Also, take a look on this screen:

As u can see, there is main widget what include:

And i think will be better if we include this new share plugin into post-widgets.styl and same block.
What u think about this?

hexo-theme-next/source/css/_common/components/post/post.styl

Line 55 in 0d14b1d

    
           @import "post-widgets" if (hexo-config('facebook_sdk.enable') and hexo-config('facebook_sdk.like_button')) or (hexo-config('vkontakte_api.enable') and hexo-config('vkontakte_api.like')) or hexo-config('rating.enable');

LEAFERx · 2017-09-30T11:15:31Z

OK. I'll try.

LEAFERx · 2017-09-30T12:33:04Z

1 lowercase in config
2 put everything into needsharebutton.swig and needsharebutton.styl
3 rewrite the description
4 put the postbottom button into the post-widget
5 test it in Pisces&Gemini and find it works in the right way

ivan-nginx · 2017-09-30T14:07:37Z

Ok, i'll test it now too, wait a moment...

ivan-nginx · 2017-09-30T15:24:55Z

needmoreshare2:
  enable: true
  postbottom: 
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Twitter,Reddit,Delicious,Tapiture,StumbleUpon,Pinterest,Facebook,GooglePlus,Linkedin,Slashdot,Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,Pingfm,Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
  float: 
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Twitter,Reddit,Delicious,Tapiture,StumbleUpon,Pinterest,Facebook,GooglePlus,Linkedin,Slashdot,Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,Pingfm,Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru

It seems some css styles need to improvement.

EDITED: it's mb positions need to define to various icons?

U may compare version2 and original. In Chinese version there is no icons for email, for example. This is not good. Need to do for all, not for Chinese only. Why he's cutting this icons? Economy for few strings of code or what? 😄

revir/need-more-share2@0e15605#diff-7a867d5568f78f326aade88ca1aedea7L185

For example, u can do your own fork, compare v1 and v2 with BC, split all into 1 and viola! Full-pack sharebutton3 release. 🙂

Also, no need to minify js and css files. For they minification anyone may install Hexo additionals plugins like hexo-all-minifier. Source must be open for eyes, right?

LEAFERx · 2017-10-01T04:43:27Z

I'm trying but i meet some troubles when making web font.
It may take some time since I don't have much time now.

LEAFERx · 2017-10-01T05:22:43Z

I'm going to make webfont on fontello like what revir does, but i find that Tapiture,Slashdot,Technorati,Googlebookmarks,Nwsvine,Pingfm,Mailru dont have icons on fontello.
Is it acceptale to remove those social networks?

ivan-nginx · 2017-10-01T11:42:46Z

@LEAFERx hi again.

~~Tapiture~~ — no need, was closed in 2015.
Slashdot — present from 1997, but i never heard about it.
Technorati — present from 2002, but i never heard about it too. Something like «:mag:» icon.
Desirable to add it.
Googlebookmarks — this service i never used, but i think peoples use it anyway. I think need to add simple any google icon here, but not the same as «G+».
Desirable to add it.
~~Nwsvine~~ Newsvine — there is typo, this is US community board and have 3k alexa rank.
Desirable to add it.
~~Pingfm~~ — no need, current status is closed.
Mailru (Mail.Ru | Mail Ru Group) — it's like symbol «@», in Ru peoples use it like Douban.
Need to add it.

U may also see icons here: https://icomoon.io/app/#/select/library

Is it acceptale to remove those social networks?

I think yes, but we must try to add all of possible icons if this options already exists and created.
And remove unused icons too. Well, i think need a little wait for answer from revir's issue and mb report to him about this.

Plugin is really good and i think need to modify him with greatest usability and options.

Bugs

I found a little bug: what push on main button — social appear, ok, it's good; and then push on it main button again — social not disappear. Only if u click in any other place of desktop, icons will hide.
Please, replace js and css on non-minified files.

ivan-nginx · 2017-10-03T15:45:52Z

Hi! Some small bugs found:

Titles on social icons when mouse move on them — lowercases. Can we do, for example, instead of

<span class="need-share-button_link-box ... title="weibo"></span>

Like this:

<span class="need-share-button_link-box ... title="Weibo"></span>

?

houndci-bot · 2017-10-04T01:28:55Z

source/lib/needsharebutton/needsharebutton.js

+          } else {
+            link.className += " icon-" + network_lc;
+          }
+          link.dataset.network = network_lc;
