Linda Ojo

How to add Social Media Sharing Links to a Vue Website

Published: 2021-01-25
preview-image

In the article, I share a step by step guide on how to add sharing links to your Vue website. This will enable your users to share your website page on social media with just a click of a button, literally.

We are using the Vue Social Sharing package to add sharing links. This package supports sharing on over 20 networks including all the favourites like Twitter, Facebook, WhatsApp, email and much more. You can check out other supported networks. Let's dive in!

Install Vue Social Sharing package

Install Vue Social Sharing package by running the command below in your terminal.

npm install --save vue-social-sharing

Set up Vue Social Sharing package

You can set up the package in main.js file as shown below

import VueSocialSharing from 'vue-social-sharing'
 
Vue.use(VueSocialSharing);

or import using a script tag in your index.html file

<script src="/dist/vue-social-sharing.js"></script>

Add Social Media sharing links using the Share Network Component

The Vue social sharing package lets you add social sharing links to multiple networks with ease, right within your template. Here are a few examples.

Note: the 'network' and 'url' are the only required properties.

Facebook Example

<template>
    <button>
        <ShareNetwork
            network="facebook"
            url="https://lindaojo.com/blog/awesome-article"
            title="Awesome Article"
            description="This is an awesome article for awesome readers"
            hashtags="Frontend, Programming">
            <span>Share on Facebook</span>
        </ShareNetwork>
    </button>
</template>

Twitter Example

<template>
    <button>
        <ShareNetwork
            network="twitter"
            url="https://lindaojo.com/blog/another-awesome-article"
            title="Another Awesome Article"
            description="This is another awesome article for awesome readers"
            twitter-user="LindaOjo_">
            <span>Share on Twitter</span>
        </ShareNetwork>
    </button>
</template>

Now you can share your website on Twitter, Facebook, and much more 🎉.

Extending the network list

If the package does not support a network you desire by default, you can extend or override the list of available networks in your main.js file as shown below

    Vue.use(VueSocialSharing, {
        networks: {
            newNetwork: 'https://newnetwork.com/share?url=@url&title=@title'
        }
    })

Customise your sharing links on popular social media platforms (Optional)

Customising your share links makes it stand out hence increasing the likelihood of it being engaged with.

For instance, a link to my website on Twitter looks like this: twitter card

You can customise your share links by adding the right meta tags to the head section of your index.html.

Below are the meta tags I used to customise my share links.

Meta Tags
<head>
    <!-- Facebook, Whatsapp -->
    <meta property="og:site_name" content="Linda Ojo">
    <meta property="og:title" content="Linda Ojo's Personal website and Blog">
    <meta property="og:description" content="Articles on frontend development written by Linda Ojo, Frontend Developer">
    <meta property="og:image" content="logo.png">
    <meta property="og:url" content="https//www.lindaojo.com">

     <!-- Twitter -->
    <meta name="twitter:title" content="Linda Ojo's Personal website and Blog">
    <meta name="twitter:description" content="Articles on frontend development written by Linda Ojo, Frontend Developer">
    <meta name="twitter:image" content="logo.png">
    <meta property="twitter:url" content="https//www.lindaojo.com">
    <meta name="twitter:card" content="summary">
</head>

Subscribe to Newsletter

Be the first to know about quality articles and poems written by Linda Ojo.