Vue Goodshare: Component for social buttons

vue-goodshare

Vue Goodshare is a Vue component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.

Supported social networks

With share counter

  • vkontakte
  • facebook
  • odnoklassniki
  • moimir Мой Мир@Mail.Ru
  • linkedin
  • tumblr
  • pinterest
  • reddit
  • stumbleupon
  • pocket
  • surfingbird
  • buffer
  • xing

Only share link

  • twitter
  • googleplus
  • livejournal
  • blogger
  • digg
  • evernote
  • delicious
  • liveinternet
  • instapaper
  • wordpress
  • baidu
  • renren
  • weibo

Supported mobile messengers

  • telegram
  • viber
  • whatsapp
  • line

Also available the most popular social networks in Russia.

Example

Requirements:

  • Vue.js >= 2.4.0
  • vue-style-loader >= 3.0.0
  • css-loader >= 0.28.0
  • sass-loader >= 6.0.0
  • node-sass >= 4.6.0

Install the component via npm:

$ npm install vue-goodshare --save

OR

yarn add vue-goodshare

in an enviroment created via vue-cli you may have to install some dependencies 

npm install css-loader sass-loader node-sass vue-style-loader --save-dev

You can use the component in 2 ways, either import a single element such a facebook share button or display a bundle of social buttons directly.

<template>
  <div class="hello">
  <h4>Bundle of most known networks</h4>
  <vue-goodshare></vue-goodshare>

  <h4>Mobile networks</h4>
  <vue-goodshare bundle="mobile"></vue-goodshare>

  <h4>Single elements with options</h4>
  <vue-goodshare-facebook 
   button_design="outline"
   page_url="https://vuejsfeed.com/" 
   title_social="Facebook"
   has_counter
   has_icon 
   ></vue-goodshare-facebook>

  <vue-goodshare-twitter 
   button_design="gradient"
   page_url="https://vuejsfeed.com/" 
   has_icon 
   has_square_edges
  ></vue-goodshare-twitter>

  </div>
</template>

<script>
// Import vue-goodshare single elements
import VueGoodshareFacebook from 'vue-goodshare/src/providers/Facebook.vue'
import VueGoodshareTwitter from 'vue-goodshare/src/providers/Twitter.vue'
// import mutliple
import VueGoodshare from 'vue-goodshare'

export default {
  name: 'HelloSocial',
  components:{
    VueGoodshareTwitter,
    VueGoodshareFacebook,
    VueGoodshare
  }
}
</script>

You can define if a button has a title, counter, icon, url, and its design based on some predifined styles. Icons support Fontello.

There you have it.This open source project is available on GitHub, if you have any issues make sure to let the author know.