koddr / vue-goodshare

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

🍿 vue-goodshare

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

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!

Docs

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:

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:

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

• Idea and active development by Vic Shóstak (aka Koddr).

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

Code Contributors

This project exists thanks to all the people who contribute.

License

MIT

vue-goodshare's Issues

Whatsapp Share link not found on Mobile

Describe the bug
When trying to share a page using Whatsapp in mobile (browser or chrome), it's open the main page (www.whatsapp.com) instead of opening the Whatsapp application itself. But in the desktop browser, it's working as expected by opening the (web.whatsapp.com) and display available contacts to select from.

To Reproduce
Steps to reproduce the behavior:

1. Go to Sample page
2. Click on the Whatsapp share button.

Expected behavior
Open the Whatsapp app in Mobile.

Smartphone (please complete the following information):

• Device: [Samsung S9+]
• OS: [Android 10]
• Browser [stock browser, Chrome]

Vue 3 compile error

Version: 1.6.1

VueCompilerError: v-model can only be used on <input>, <textarea> and <select> elements. at node_modules\vue-goodshare\src\providers\Facebook.vue:19:7 17 | <span 18 | class="counter-facebook" 19 | v-model="counter_facebook" | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 20 | v-if="this.$props.has_counter" 21 | > @ ./node_modules/vue-goodshare/src/providers/Facebook.vue?vue&type=template&id=71552819&scoped=true 1:0-244 1:0-244

add new social network

QQ:

https://connect.qq.com/widget/shareqq/index.html?
url=
desc=
title=
summary=-
pics=
flash=
site=
style=
width=
height=

Qzone

https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?
url=
showcount=
desc=
summary=-
title=
site=
pics=
style=
width=
height=

QR Code

display QR code

GoodShare for Nuxt

Is your feature request related to a problem? Please describe.
New GoodShare package for Nuxt

Describe the solution you'd like
I just created a new GoodShare package for nuxt.js, you can check it out here.
https://github.com/Kaperskyguru/nuxt-goodshare

Describe alternatives you've considered
I just created a new GoodShare package for nuxt.js, you can check it out here.
https://github.com/Kaperskyguru/nuxt-goodshare

Additional context
I just created a new GoodShare package for nuxt.js, you can check it out here.
https://github.com/Kaperskyguru/nuxt-goodshare

404 for odnoklassniki component

Describe the bug
Hello. 404 response at share to "odnoklassniki"

To Reproduce
Steps to reproduce the behavior:

1. Go to https://polyprofi.ru/news/unilever_upakuet_morozhennoe_vo_vtorichnyy_polipropilen.html
2. Click on "OK" icon
3. See error in share window

Module not found: Error: Can't resolve 'scss-loader'

Getting the following errors even though I have npm installed scss-loader.

ERROR in ./~/vue-goodshare/src/providers/Line.vue
Module not found: Error: Can't resolve 'scss-loader' in '/Users/****/****/node_modules/vue-goodshare/src/providers'
 @ ./~/vue-goodshare/src/providers/Line.vue 3:0-266
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-goodshare/src/VueGoodshare.vue
 @ ./~/vue-goodshare/src/VueGoodshare.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

The style isn't loaded

The components are loaded, the functionalities works but the styles are not loaded.

I put these components in a parent component where the style is scoped.

Doesn't work in a NUXT.js project.

Overview of the problem

The vue-goodshare lib can't be used within a NUXT project out-of-the-box.

This is the error I get:

These relative modules were not found:

* ./Tumblr.vue?vue&type=style&index=0&id=df799622&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/Tumblr.vue
* ./Vkontakte.vue?vue&type=style&index=0&id=7ce67678&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/Vkontakte.vue
* ./Viber.vue?vue&type=style&index=0&id=25eaf48e&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/Viber.vue
* ./Email.vue?vue&type=style&index=0&id=f4c7174e&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/Email.vue
* ./Line.vue?vue&type=style&index=0&id=0d360bc7&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/Line.vue
* ./Telegram.vue?vue&type=style&index=0&id=5584e0d4&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/Telegram.vue
* ./Reddit.vue?vue&type=style&index=0&id=2148ea71&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/Reddit.vue
* ./Pinterest.vue?vue&type=style&index=0&id=1a20d252&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/Pinterest.vue
* ./WhatsApp.vue?vue&type=style&index=0&id=346248c5&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/WhatsApp.vue
* ./LinkedIn.vue?vue&type=style&index=0&id=1f0fa31e&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/LinkedIn.vue
* ./LiveJournal.vue?vue&type=style&index=0&id=19f2e3b0&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/LiveJournal.vue
* ./Twitter.vue?vue&type=style&index=0&id=1bcbcb20&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/Twitter.vue
* ./MoiMir.vue?vue&type=style&index=0&id=6d206962&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/MoiMir.vue
* ./Odnoklassniki.vue?vue&type=style&index=0&id=6fc7e700&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/Odnoklassniki.vue
* ./Facebook.vue?vue&type=style&index=0&id=71552819&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/Facebook.vue
* ./GooglePlus.vue?vue&type=style&index=0&id=84faf0f4&scoped=true&lang=scss in ./node_modules/vue-goodshare/src/providers/GooglePlus.vue

Steps to Reproduce

In a new nuxt-edge project install vue-goodshare and add the following plugin.

import Vue from "vue";
import VueGoodshare from "vue-goodshare";


Vue.use (VueGoodshare);

Add the plugin to your nuxt.config.js:

export default {
    ...
    plugins: [
        ...
        "~/plugins/vue-goodshare",
        ...
    ],
    ...
};

Start the project by running this in the root of the project:

npm run dev

Configuration

• System: Mac OS X 10.13.6
• Browser: It doesn't happen in the browser
• vue-goodshare: 1.1.0

WhatsApp Share link incorrect

Describe the bug
WhatsApp sharing doesn't work on mobile devices: www.whatsapp.com page is opened instead of WhatsApp mobile app.

To Reproduce
Steps to reproduce the behavior:

1. Click WhatsApp share button using mobile browser.

Expected behavior
WhatsApp mobile app is opened.

Desktop (please complete the following information):
Works fine, opens web version.

Smartphone (please complete the following information):
Any Android/iOS device, any mobile browser.

Additional context
Seems like it was fixed here koddr/goodshare.js@2b46f3a

How to use it with nuxt js

Hi ,
Have a nice day,
I am wondering how to use it with nuxt js .

Thanks in advance.

Need.... WhatsApp, Messenger

Need.... WhatsApp, Messenger

404 error for linkedin component

Describe the bug
I'm using single components on my website.
Only linkedin component has some error in the console. The error is:
www.linkedin.com/countserv/count/share?url=https%3A%2F%2Ffullstackworld.com%2Fpost%2Flaravel-scout-standard-way-to-use-algolia-search-with-your-laravel-application&callback=vue_goodshare_2860:1 Failed to load resource: the server responded with a status of 404 ()

To Reproduce
Steps to reproduce the behavior:

1. Go to https://fullstackworld.com/post/laravel-scout-standard-way-to-use-algolia-search-with-your-laravel-application
2. Open browser console & you will be able to see the error

Expected behavior
There should not be error in the console. If I remove linkedin component the error disappears

Screenshots

Desktop:

• OS: OSx
• Browser - Chrome

Fontello

Icon Colors are getting overwritten

I am using Fontello icons for other parts of my project and this is overwriting the colors of the social icons.

I have tried to change the location fo the Fontella.css to before and after your script. Is there a workaround so the colors are not getting overwritten? Am I missing the obvious?

why isn't it compiled?

I have to modify my webpack config to include this which I don't really want to do.

I'm getting errors:

ERROR in ./node_modules/vue-goodshare/src/fonts/fontello.woff2?26533562 1:4
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.

ERROR in ./node_modules/vue-goodshare/src/fonts/fontello.svg?26533562 1:0
Module parse failed: Unexpected token (1:0)

ERROR in ./node_modules/vue-goodshare/src/providers/Facebook.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

Why don't you build it with webpack and change the package.json to point to the dist folder?

"main": "dist/lib.js",

Add props to set target while opening new window

Is your feature request related to a problem? Please describe.

• Can't open multuipile window at a same time

Describe the solution you'd like
Add props to set target

How do i set page title attribute for share bundle

My Solution so far:
<vue-goodshare :page_title="'post.title" ></vue-goodshare>
But all this is doing is adding the title tag to the outer div. How do i go around this? Any ideas?

Mobile icons are too small

Describe the bug
Mobile icons are too small compare to others.

To Reproduce
Add components with has_icon only props

Expected behavior
Icon should be 1.2x bigger probably.

Screenshots
Example with WhatsApp

Should Add Instagram social network

Should Add Instagram social network

Odnoklassniki share button opens deprecated page

Describe the bug
Odnoklassniki share button doesn't work. It opens the page that is deprecated

To Reproduce
Add import VueGoodshareOd from 'vue-goodshare/src/providers/Odnoklassniki.vue'; and use is it on page <vue-goodshare-od has_icon />

Expected behavior
The button send to correct page

Vertically aligned bundle

Is there anyway I can make the bundle to be vertically aligned? My current workaround is that I import the individual components and position them via HTML/CSS but maybe there is a more elegant way? Thanks!

VueCompilerError: v-model can only be used on <input>, <textarea> and <select> elements

There is incorrect usage of v-model in Facebook.vue:

vue-goodshare/src/providers/Facebook.vue

Lines 17 to 21 in 73d146f

	<span
	class="counter-facebook"
	v-model="counter_facebook"
	v-if="this.$props.has_counter"
	>

node_modules/vue-goodshare/src/providers/Facebook.vue:19:7
17 |      <span
18 |        class="counter-facebook"
19 |        v-model="counter_facebook"
   |        ^^^^^^^^^^^^^^^^^^^^^^^^^^
20 |        v-if="this.$props.has_counter"
21 |      >

webpack compiled with 2 errors

link whatsapp is outdated

the link to whatsapp is outdated
can it be updated?

before : whatsapp://send?
now : //wa.me/?text=I'm%20inquiring%20about%20the%20apartment%20listing

Pinterest is missing the image url

Overview of the problem

Getting Image_url parameter missing with Pinterest.

Screenshots

Steps to Reproduce

You can see this in action on https://animalsfirst.com/pets/profile/5a6790483a2d9a04ce7620ee.
From the console.log the image for Pinterest is undefined. I have all the proper meta tags and it checks out on the Pinterest url validator.

Configuration

• System:
• Browser: Chrome
• vue-goodshare:

Don't working counter in facebook component

Describe the bug
Don't working counter in facebook component

To Reproduce
Steps to reproduce the behavior:

1. Go to https://polyprofi.ru/news/unilever_upakuet_morozhennoe_vo_vtorichnyy_polipropilen.html
2. Click on facebook icon
3. Counter ain't updating :(

Desktop (please complete the following information):

• OS: Win8
• Browser: chrome
• Version: any

Using with nuxt.js

Hi!

Thanks for your library, it's pretty cool!

Please, tell me, if it can be used together with Nuxt.js and сan it work in SSR mode?
And how i can to connect it correctly?

Thanks.

Vue 3 Composite API- Missing Declaration File

All imports such as import shareEmail from 'vue-goodshare/src/providers/Email.vue' cause error:

Could not find a declaration file for module 'vue-goodshare/src/providers/Email.vue'

In addition we get:
[plugin:vite:vue] v-model can only be used on <input>, <textarea> and <select> elements.

Maybe good to warn in documentation if this module does not support Vue 3 ?

New X logo for old twitter logo

Are there any plans to release the new X logo in place of the original blue bird twitter logo?

Many thanks

Vkontakte getRandomInt not found

Yo, I see your latest commit removed method getRandomInt from Vkontakte.vue, yet getShareCounter still relies on it. Почини по-братски.

can you add gmail support?

sms is missing from project?

I know that the docs stated that you are able to make sms message but I was unable to get it to work, also I was not able to find the component related to sms in the project.

SSR does not need to be so hard

Overview of the problem

SSR is made tougher than necessary because the default props do not use the recommended prop default factories. As stated in https://vuejs.org/v2/guide/components-props.html#Prop-Validation, props defaults should be returned from a factory function.
But in vue-goodshare, default are simply set to things like:
default: document.location.href

Because of that, it's impossible to simply use the component in an SSR env (even if the prop is specified, this code is still evaluated and if no document is available, it throws).

Screenshots

Steps to Reproduce

1. Start a simple nuxt project
2. Add vue-goodshare to a page
3. npm run dev and load the page

Configuration

• System: OSX
• Browser: nuxt SSR
• vue-goodshare: latest

Thoughts

Nuxt offers the concept of plugin that can be loaded only client-side. However, this is extra config to set up, it is specific to Nuxt, and it basically excludes vue-goodshare from the server output, which may not be desirable.

do you have a twitter social share ?

the plugins looks promising, but I just want to know if there is a twitter social share. Thanks

button line has shared error

I had a problem sharing app to line app using vuejs project.
could not connect to the line app

Refused to execute script from vue-goodshare

Overview of the problem

Refused to execute script from 'https://www.reddit.com/api/info.json?url=http%3A%2F%2Flocalhost%3A32880%2Fblogs&callback=vue_goodshare_838' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

Screenshots

Steps to Reproduce

1. npm install --save vue-goodshare
2. npm run dev

Configuration

• System: macOS Sierra, but running in a Debian GNU/Linux 7 docker
• Browser: Updating Google Chrome Version 62.0.3202.94 (Official Build) (64-bit)
• vue-goodshare: "vue-goodshare": "^0.9.3",

Please add support for events like @click

Please add event support like @click so that we can call any method to report GA events

button_design and has_icon not working on Bundle of share elements

Overview of the problem

The directives button-redesign and has_icon doesn't seem to work with the bundle element

Steps to Reproduce

Configuration

• System: windows 10
• Browser: chrome
• vue-goodshare: 0.9.3

Whatsapp Share link not found on web.whatsapp.com

Describe the bug
If you try to share using whatsapp share button, it will have an error page not found. Because on your library the default open window link for whatsapp is wa.me, this link is not working outside the native app. Instead using web.whatsapp.com/send?text= for the share_url.

Here, you should change this code

vue-goodshare/src/providers/WhatsApp.vue

Line 59 in 0fa750d

const share_url = `https://wa.me/?text=${encodeURIComponent(

Can we get an interface to change the sharer url prefix for each social network?

For example, the prefix for pinterest is hardcoded as

https://pinterest.com/pin/create/button/

However, this url will complain that there is no image for the pin if I don't pass a media value.

There is another URL which is https://www.pinterest.com/pin/find/?url=@url
It can load all the images in the page and let customer to choose one image and then create the pin.
This fits our use case and it exactly what we want.

But if I use this module, I find there is no way that I can change the hardcoded url to the "find" url above.

How do I dynamically set url and posted text?

So I have a list of items, each with a share button, opening a modal with all options for social sharing (all goodshare buttons I use). How do I pass a new url and posted text to my vue-goodshare-* components?