Share/Search Selected Text Within The Document - Social Selection

Yet another jQuery text selection tooltip plugin that displays a list of website/search engine/social share buttons in a tooltip when you select text within the document.

Key Features:

• Allows you to share text on popular social media platforms inspired by Medium.com.
• Allows you to search selected text on search engines.
• Allows you to place quick links and QR code inside the tooltip on selection.

Search engines included:

• Ask
• Baidu
• Bing
• DuckDuckGo
• Google
• Wikipedia
• WolframAlpha
• Yahoo
• Yandex

Social Media Platforms included:

• Blogger
• Digg
• Douban
• EverNote
• Facebook
• GMail
• Line
• LinkedIn
• Pinterest
• QR Code
• QQ Share
• QQ Zone
• Reddit
• RenRen
• SMS
• Telegram
• Tumblr
• Twitter
• Weibo
• WhatsApp

Direct Links Included:

• Blogger
• CodePen
• Discord
• Facebook
• GitHub
• Instagram
• Line
• LinkedIn
• Patreon
• Pinterest
• Reddit
• SoundCloud
• Stack Overflow
• Telegram
• Tumblr
• Twitch
• Twitter
• WeChat
• Weibo
• WhatsApp
• Wikipedia
• Xing
• Yelp
• YouTube

How To Use It:

1. Include the jQuery library, social.selection.css and social.selection.js on the page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to//js/social.selection.js"></script>
<link rel="stylesheet" href="/path/to//css/social.selection.css">

2. Include the jQuery qrcode plugin if you'd like to generate QR codes in the text selection tooltip (OPTIONAL).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

3. Initialize the plugin with default settings. That's it.

$(".myText").socialSelection();

4. Or use as a component.

<selecton-tooltip data-target="#html" data-comps="foo">
  <component-search>
    <google></google>
  </component-search>
  <component-share>
    <facebook></facebook>
  </component-share>
  <component-visit data-github="abc"></component-visit>
  <component-foo data-icon-path="../img/qrcode.svg" data-text="123">
    <bar1 data-name="Bar1" data-link="{{bar1}}"  data-icon-path="../img/wechat.svg" data-require="qrcode"></bar1>
  </component-foo>
</selecton-tooltip>

5. Enable/disable/add/config platforms & links.

$(".myText").socialSelection({
  components: {
    search: {
      platforms: {
        ask: {
            link: 'https://www.ask.com/web?q={{text}}'
        },
        baidu: {
            link: 'https://www.baidu.com/s?wd={{text}}'
        },
        bing: {
            link: 'https://www.bing.com/search?q={{text}}'
        },
        duckduckgo: {
            link: 'https://duckduckgo.com/?q={{text}}'
        },
        google: {
            link: 'https://www.google.com/search?q={{text}}',
        },
        wikipedia: {
            link: 'https://wikipedia.org/w/index.php?search={{text}}'
        },
        wolframalpha: {
            link: 'https://www.wolframalpha.com/input/?i={{text}}',
        },
        yahoo: {
            link: 'https://search.yahoo.com/search?q={{text}}',
        },
        yandex: {
            link: 'https://yandex.com/search?text={{text}}',
        },
      },
      _selText: true,
      url: location.href,
      enabled: ['google', 'bing', 'duckduckgo'],
    },
    share: {
      platforms: {
        blogger: {
            link: 'https://www.blogger.com/blog-this.g?u={{url}}&t={{text}}',
            extra: {
                title: 'n={{title}}',
            }
        },
        digg: {
            link: 'https://digg.com/submit?url={{url}}',
        },
        douban: {
            link: 'https://www.douban.com/share/service/?href={{url}}&name={{text}}',
        },
        evernote: {
            link: 'https://www.evernote.com/clip.action?url={{url}}&title={{text}}',
        },
        facebook: {
            link: 'https://www.facebook.com/sharer/sharer.php?u={{url}}',
        },
        gmail: {
            link: 'https://mail.google.com/mail/?view=cm&body={{url}}%0D%0A{{text}}',
            extra: {
                email: 'to={{email}}',
                title: 'su={{title}}'
            }
        },
        line: {
            link: 'https://lineit.line.me/share/ui?url={{url}}&text={{text}}',
        },
        linkedin: {
            link: 'https://www.linkedin.com/shareArticle?url={{url}}&summary={{text}}&mini=true',
            extra: {
                title: 'title={{title}}',
                src: 'source={{src}}'
            }
        },
        pinterest: {
            link: 'https://pinterest.com/pin/create/button/?url={{url}}&description={{text}}',
            extra: {
                image: 'media={{image}}',
            }
        },
        qrcode: {
            link: '{{url}}',
            require: ['qrcode']
        },
        qshare: {
            link: 'https://connect.qq.com/widget/shareqq/index.html?url={{url}}&summary={{text}}&desc={{text}}',
            extra: {
                title: 'title={{title}}',
                image: 'pics={{image}}',
            }
        },
        qzone: {
            link: 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{url}}&summary={{text}}',
            extra: {
                title: 'title={{title}}',
                image: 'pics={{image}}',
            }
        },
        reddit: {
            link: 'https://www.reddit.com/submit?url={{url}}&title={{text}}',
        },
        renren: {
            link: 'https://widget.renren.com/dialog/share?resourceUrl={{url}}&srcUrl={{url}}&description={{text}}',
            extra: {
                title: 'title={{title}}',
                image: 'pic={{image}}',
            }
        },
        sms: {
            link: 'sms:{{phone}}?body={{text}}'
        },
        telegram: {
            link: 'https://t.me/share/url?url={{url}}&text={{text}}',
            extra: {
                phone: 'to={{phone}}'
            },
        },
        tumblr: {
            link: 'https://www.tumblr.com/widgets/share/tool?canonicalUrl={{url}}&caption={{text}}',
            extra: {
                hash: 'tags={{hash}}'
            },
        },
        twitter: {
            link: 'https://twitter.com/intent/tweet?url={{url}}&text={{text}}',
            extra: {
                hash: 'hashtags={{hash}}',
                via: 'via={{via}}'
            }
        },
        weibo: {
            link: 'https://service.weibo.com/share/share.php?url={{url}}&title={{text}}'
        },
        whatsapp: {
            link: 'https://wa.me/{{phone}}?text={{url}}%20{{text}}',
        },
      },
      _selText: true,
      url: location.href,
      enabled: ['facebook', 'twitter', 'reddit', 'whatsapp'],
    },
    visit: {
      platforms: {
        blogger: {
            link: "http://{{blogger}}.blogspot.com/"
        },
        codepen: {
            link: "https://codepen.io/{{codepen}}"
        },
        discord: {
            link: "https://discord.gg/{{discord}}"
        },
        facebook: {
            link: "https://www.facebook.com/{{facebook}}"
        },
        github: {
            link: "https://github.com/{{github}}"
        },
        instagram: {
            link: "https://www.instagram.com/{{instagram}}"
        },
        line: {
            link: "https://line.me/ti/p/{{line}}"
        },
        linkedin: {
            link: "https://www.linkedin.com/in/{{linkedin}}"
        },
        patreon: {
            link: "https://www.patreon.com/{{patreon}}"
        },
        pinterest: {
            link: "https://www.pinterest.com/{{pinterest}}"
        },
        reddit: {
            link: "https://www.reddit.com/r/{{reddit}}"
        },
        soundcloud: {
            link: "https://soundcloud.com/{{soundcloud}}"
        },
        stackoverflow: {
            link: "https://stackoverflow.com/users/{{stackoverflow}}"
        },
        telegram: {
            link: "https://t.me/{{telegram}}"
        },
        tumblr: {
            link: "https://{{tumblr}}.tumblr.com"
        },
        twitch: {
            link: "https://www.twitch.tv/{{twitch}}"
        },
        twitter: {
            link: "https://twitter.com/{{twitter}}"
        },
        wechat: {
            link: "https://mp.weixin.qq.com/mp/profile_extaction=home&__biz={{wechat}}#wechat_redirect",
            require: [
                "qrcode"
            ]
        },
        weibo: {
            link: "https://www.weibo.com/{{weibo}}"
        },
        whatsapp: {
            link: "https://wa.me/{{whatsapp}}"
        },
        wikipedia: {
            link: "https://wikipedia.org/wiki/{{wikipedia}}"
        },
        xing: {
            link: "https://www.xing.com/profile/{{xing}}"
        },
        yelp: {
            link: "https://www.yelp.com/biz/{{yelp}}"
        },
        youtube: {
            link: "https://www.youtube.com/{{youtube}}"
        }
    },
    enabled: [],
  }
});

6. Specify the number of buttons per row. Default: 4.

$(".myText").socialSelection({
  itemsPerColumn: 5
});

7. Set the time wait before showing the tooltip. Default: 400.

$(".myText").socialSelection({
  delay: 500
});

8. Customize the path to button icons.

$(".myText").socialSelection({
  icons: {
    dir: '../img',
    ext: 'svg',
  }
});

9. Localize the plugin.

$(".myText").socialSelection({
  locale: {
    components: {
      share: {
          title: 'Share to {{platform}}',
      },
      search: 
      {
          title: 'Search it on {{platform}}',
      },
      visit: 
      {
          title: 'Visit me on {{platform}}',
      },
    },
    error: {
      invalidComponent: 'Invalid Configuration: {{items}}\nPlease check the required fields for Component configuration and corresponding locale setting.',
      invalidPlatform: 'Invalid Configuration: {{items}}\n"link" should be specified in every platform configuartion. Related feature of those platforms are disabled. Please fix it to ensure the functionality.',
      unknownPlatform: 'Invalid platforms: {{items}}\nUnknown or unsupported platforms enabled. Please specify a supported platform or add custom config for the the above platforms. Please also check if the corresponding locale configuration is set properly',
      missingPlugin: 'Plugin Missing: {{items}}\nRequired plugins not included or not loaded correctly. Please check and include the correct script for the the above plugins immediately to ensure the functionality.'
    },
    warning: {
      invalidPlatformName: 'Platform Name Missing: {{items}}\nThis only affects the title shown on hovering the platform icon. Update the locale would fix this warning.',
      noValidPlatform: 'There is no valid platform exists. Please select at least one platform or check if the configuration are correct.',
    },
    platforms: {
      ask: 'Ask',
      baidu: 'Baidu',
      bing: 'Bing',
      blogger: 'Blogger',
      codepen: 'CodePen',
      digg: 'Digg',
      discord: 'Discord',
      douban: 'Douban',
      duckduckgo: 'DuckDuckGo',
      evernote: 'EverNote',
      facebook: 'Facebook',
      github: 'GitHub',
      google: 'Google',
      gmail: 'GMail',
      instagram: 'Instagram',
      line: 'Line',
      linkedin: 'LinkedIn',
      pinterest: 'Pinterest',
      patreon: 'Patreon',
      qrcode: 'QR Code',
      qshare: 'QQ Share',
      qzone: 'QQ Zone',
      reddit: 'Reddit',
      renren: 'RenRen',
      soundcloud: 'SoundCloud',
      sms: 'SMS',
      stackoverflow: 'Stack Overflow',
      telegram: 'Telegram',
      tumblr: 'Tumblr',
      twitch: 'Twitch',
      twitter: 'Twitter',
      weibo: 'Weibo',
      wechat: 'WeChat',
      whatsapp: 'WhatsApp',
      wikipedia: 'Wikipedia',
      wolframalpha: 'WolframAlpha',
      xing: 'Xing',
      yahoo: 'Yahoo',
      yandex: 'Yandex',
      yelp: 'Yelp',
      youtube: 'YouTube',
    },
  }
});

---

This awesome jQuery plugin is developed by chingcm. For more Advanced Usages, please check the demo page or visit the official website.