Skip to content

Web Code Flow

  • Home
  • Featured Categories
    • Accordion
    • Animation Plugins
    • Bootstrap
    • Current Page Parent Buttons
    • Chart & Graphs Plugins
    • Date & Time
    • Form Plugins
    • Frameworks
    • Masonry
    • Menu Plugins
    • Pagination
    • Progress Bar
    • Sidebar
    • slideshow
    • Table Plugins
    • Timeline
    • Tooltip
    • WYSIWYG Editors
  • Code Snippets
    • Angular
    • CSS & CSS3
    • HTML & HTML5
    • Current Page Parent Javascript
    • Jquery Scripts
    • Current Page Parent Vue
  • Most Popular
    • Best Free Accordion Library
    • Top Best Autocomplete Libraries
    • Best JavaScript Calendar Libraries 2023
    • Best JavaScript Chart & Graphs Plugins
    • Top Javascript And jQuery Color Picker Plugins
    • Latest Best JavaScript Countdown Timer Plugins
    • Best Carousel Slider Plugins with Demos
    • Best JavaScript Data Table Libraries 2023
    • Date and Time Picker Widgets 2023
    • Advanced Drag And Drop Libraries
    • Best Free Dropdown Select Plugins
    • Top JavaScript and JQuery File Upload Libraries
    • 7 Best Free Form Wizard Libraries
    • New Free JavaScript Photo Gallery Libraries
    • Best Free Icons & Symbols Libraries
  • Contact Us

Vue.js for SEO-friendly Social Sharing Networking Component

social-media-share-buttons

Vue share it is a highly customizable Vue.js plugin for sharing links on social networks.

share image on social media javascript, social share button, social share javascript, bs social share plugin, social media share buttons html

Features

  • Easy installation
  • Highly customizable
  • Comprehensive documentation and examples
  • Developer Support
  • SEO friendly

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-share-it

# NPM
$ npm install vue-share-it --save

1. Import the vue-share-it component.

import shareIt from 'vue-share-it';

2. Register the componnet.

Vue.use(shareIt);

3. Create virtual social share buttons in the template.

<shareit />

4. Use emoticons instead.

<share-it :icons="true" />
<share-it icons outline />
<share-it icons outline round />

5. Enable/disable social platforms.

<share-it :targets="['twitter', 'facebook']" />

6. More props to customize the social share buttons.

shareConfig: {
  type: Object,
  default: () => {
    return {
      linkedin: {},
      twitter: {},
      facebook: {},
      whatsapp: {},
      reddit: {},
      email: {},
    }
  }
},
targets: {
  type: Array,
  default: () => {
    return []
  }
},
text: {
  type: String,
  default: ''
},
url: {
  type: String,
  default: ''
},
width: {
  type: Number,
  default: 600
},
height: {
  type: Number,
  default: 600
},
dense: {
  type: Boolean,
  default: false
},
dark: {
  type: Boolean,
  default: false
},
icons: {
  type: Boolean,
  default: false
},
outline: {
  type: Boolean,
  default: false
},
round: {
  type: Boolean,
  default: false
},
iconSize: {
  type: String,
  default: 'lg'
}

Props


PropData typeDefaultDescription
textString“”Caption
urlString“”URL to share
widthNumber600Width of the share window
heightNumber600Height of the share window
denseBooleanfalseDense button styling
darkBooleanfalseDark button styling
targetsArray[]Specify social media targets, defaults to all available targets
iconsBooleanfalseUse icons as buttons
outlineBooleanfalseOutline button styling
roundBooleanfalseRound button styling for icons
iconSizeStringlgSpecify icon size. See [size chart](#sizeChart) below
shareConfigObject{

 

linkedin: {},

twitter: {},

facebook: {},

whatsapp: {},

reddit: {},

}

Advanced configuration for target specific styling

Customizable & SEO-friendly Social Sharing Component, vue-share-it Plugin/Github, social media footer html


See Demo And Download

Demo
Download

Official Website(thisDOTname): Click Here

This superior jQuery/javascript plugin is developed by thisDOTname. For extra Advanced Usages, please go to the official website.

Tags: social mediasocial networksocial sharesocial-buttonsthisDOTnamevue-componentvue-share-it

March 7, 2022 by webcodeflow Buttons Javascript Social Media Plugins Vue WebCodeFlow

Popular Posts

  • How to Add Floating Whatsapp Chat Button In HTML | venom-button 17.9k views
  • How to Create a Simple Cookie Banner Consent Using Bootstrap 4 11.3k views
  • Confetti Falling Animation Effect In JavaScript | party.js 9.7k views
  • [Offcanvas] Simple and Modern Multi-Level Sidebar Menu on Bootstrap 4 9.5k views
  • Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview 9.2k views
  • Google Translate Dropdown Customize With Country Flag | GT API 9k views
  • A Simple Infinite Image Carousel Using Pure Javascript 7.9k views
  • Responsive Bootstrap 4 Multi-Level Dropdown Menu Plugin 7.7k views
  • Dark & Light Switch Mode Toggle for Bootstrap 5 7.6k views
  • Simple and Lightweight Vertical 3-Dot Context Menu 7.5k views

Popular Topics

Accordion angular animation Bootstrap browser calendar canvas Carousel carousel slider charts date picker dialog directive drag and drop Draggable dropdown element framework gallery Image lightbox loading menu modal modal dialog modal popup modal window navigation notification popup progress bar responsive SCROLL scrolling select slider Slideshow sortable svg table text Toast Tooltip TypeScript vue-component

About Web Code Flow

All code published on WebCodeFlow is open source and distributed under an OSD-compliant (MIT) license that grants all rights to use, study, learn, read, change, and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot guarantee the complete correctness of all content.

  • About Us
  • Privacy Policy
  • Disclaimer
  • DMCA
  • Contact

Web Code Flow © 2023. All Rights Reserved.