Social Share Button Component For Vue

A Vue component that makes it easier to generate social share buttons on the app. Supported social media & buttons: Copy, Email, Facebook, Telegram, LinkedIn, Pinterest, Pocket, Reddit, Tumblr, Twitter, and Whatsapp

How to use it:

1. Import the necessary CSS or SCSS.

@import 'share-button-links/main.scss';
// OR
@import 'share-button-links/main.scss';

2. Create a Facebook button.

import { ButtonFacebook } from 'share-button-links/components/buttons';

<ButtonFacebook
  title="..."
  text="..."
  url="..."
  isRounded
  hasIcon
/>

3. Create a Whatsapp button.

import { ButtonWhatsapp } from 'share-button-links/components/buttons';

<ButtonWhatsapp
  text="..."
  url="..."
  message="..."
  isRounded
  hasIcon
/>

4. Create a Twitter button.

import { ButtonTwitter } from 'share-button-links/components/buttons';

<ButtonTwitter
  title="..."
  text="..."
  url="..."
  isRounded
  hasIcon
/>

5. Create a LinkedIn button.

import { ButtonLinkedIn } from 'share-button-links/components/buttons';

<ButtonLinkedIn
  text="..."
  url="..."
  isRounded
  hasIcon
/>

6. Create a Reddit button.

import { ButtonReddit } from 'share-button-links/components/buttons';

<ButtonReddit
  title="..."
  text="..."
  url="..."
  isRounded
  hasIcon
/>

7. Create a Pinterest button.

import { ButtonPinterest } from 'share-button-links/components/buttons';

<ButtonPinterest
  description="..."
  url="..."
  text="..."
  mediaUrl="..."
  isRounded
  hasIcon
/>

8. Create a Tumblr button.

import { ButtonTumblr } from 'share-button-links/components/buttons';

<ButtonTumblr
  title="..."
  content="..."
  text="..."
  url="..."
  isRounded
  hasIcon
/>

9. Create a Pocket button.

import { ButtonPocket } from 'share-button-links/components/buttons';

<ButtonPocket
  title="..."
  text="..."
  url="..."
  isRounded
  hasIcon
/>

10. Create an Email button.

import { ButtonEmail } from 'share-button-links/components/buttons';

<ButtonEmail
  title="..."
  subject="..."
  content="..."
  text="..."
  url="..."
  isRounded
  hasIcon
/>

11. Create a Copy button.

import { ButtonCopy } from 'share-button-links/components/buttons';

<ButtonCopy
  text="..."
  isRounded
  hasIcon
/>

12. Create a Telegram button.

import { ButtonTelegram } from 'share-button-links/components/buttons';

<ButtonTelegram
  text="..."
  url="..."
  message="..."
  isRounded
  hasIcon
/>

Preview:

Changelog:

v2.3.4 (02/07/2023)

• update

v2.3.2 (10/27/2022)

• is-whited prop
• bugfixes

v2.3.0 (07/01/2022)

• More styles added

v2.2.4 (05/27/2022)

• Added white icons

03/05/2022

• Added Telegram button

03/01/2022

• Button group finished

02/28/2022

• Copy button now accept url as prop and working on button group

02/12/2022

• New icon buttons

01/23/2022

• Some errors fixed
• And little improvement to some buttons.
• Now email button you can add ‘to’ to add and specific email

Download Details:

Author: IsraelDCastro

Live Demo: https://share-button-links.netlify.app/

Download Link: https://github.com/IsraelDCastro/share-button-links/archive/refs/heads/master.zip

Official Website: https://github.com/IsraelDCastro/share-button-links

Install & Download: