Git Product home page Git Product logo

hhzkzt / vue-goodshare Goto Github PK

View Code? Open in Web Editor NEW

This project forked from koddr/vue-goodshare

0.0 0.0 0.0 2.95 MB

🍿 Vue.js 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.

Home Page: https://vue-goodshare.js.org

License: MIT License

Vue 97.70% JavaScript 2.03% Makefile 0.27%

vue-goodshare's Introduction

🍿 vue-goodshare

Vue.js component for share link to social networks and mobile messangers

vue-goodshare logo

npm version vue.js version code style: prettier license twit link

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.

The Why?

Vue.js-ready™ component. Simple install, extensive documentation, developer support, SEO friendly, many options for customization of appearance, clean code without scripts tracking user activity on the page, high speed.

Beautiful button design already included. Just choose one, add attribute to component and save!

Installation

foo@bar:~$ npm install --save vue-goodshare

Usage

Single share element

Includes only needed social networks or mobile messengers.

/**
 * Import Vue.js
 */
import Vue from "vue";

/**
 * Import vue-goodshare single element
 */
import VueGoodshareFacebook from "vue-goodshare/src/providers/Facebook.vue";

const app = new Vue({
  el: "#app",
  components: {
    VueGoodshareFacebook
  }
});

Add component to HTML template (with attributes):

<div id="app">
  <vue-goodshare-facebook
    page_url="https://github.com/koddr/vue-goodshare"
    title_social="Facebook"
    has_counter
    has_icon
  ></vue-goodshare-facebook>
</div>

Result:

screen shot

Bundle of share elements

Facebook, Twitter, LinkedIn, Google Plus, Tumblr, Pinterest, Reddit

/**
 * Import Vue.js
 */
import Vue from "vue";

/**
 * Import vue-goodshare bundle
 */
import VueGoodshare from "vue-goodshare";

const app = new Vue({
  el: "#app",
  components: {
    VueGoodshare
  }
});

Add components to HTML template (without attributes):

<div id="app">
  <vue-goodshare></vue-goodshare>
</div>

Result:

screen shot

Demo on localhost

foo@bar:~$ git clone https://github.com/koddr/vue-goodshare.git
foo@bar:~$ cd vue-goodshare/examples

Start simple Python 3.4+ HTTP server (only macOS and Linux):

foo@bar:~$ python3 -m http.server 4000 --bind localhost

Developers

Project assistance

If you want to say «thank you» or/and support active development vue-goodshare:

  1. Add a GitHub Star to project.
  2. Twit about project on your Twitter.
  3. Donate some money to project author via PayPal: @paypal.me/koddr.
  4. Join DigitalOcean at our referral link (your profit is $100 and we get $25).

Thanks for your support! 😘 Together, we make this project better every day.

Stargazers over time

Stargazers over time

License

MIT

vue-goodshare's People

Contributors

koddr avatar iohansson avatar gen4sp avatar qur2 avatar mathiashauer avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.