DEV Community

Cover image for How to add Social Media Sharing Links to a Vue Website
Linda
Linda

Posted on

How to add Social Media Sharing Links to a Vue Website

This article was originally published on lindaojo.com

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


Enter fullscreen mode Exit fullscreen mode

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);


Enter fullscreen mode Exit fullscreen mode

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


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


Enter fullscreen mode Exit fullscreen mode

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>



Enter fullscreen mode Exit fullscreen mode

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>



Enter fullscreen mode Exit fullscreen mode

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'
        }
    })


Enter fullscreen mode Exit fullscreen mode

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.



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


Enter fullscreen mode Exit fullscreen mode

You could support my work by sharing this article, thanks!

Read more of my articles

Top comments (3)

Collapse
 
joaquinpereira profile image
Joaquin Pereira

Hey, your article is great!
But I don't understand one thing, this only builds the links to the social networks, do you know if it manages the meta tags? I have a spa in vue and I need a link to show an image of the product, but as the app is a spa, it's a headache to solve this.

Do you know of any strategy for metatags with a spa in vue?

Collapse
 
brainuso profile image
brainuso

Thanks for this article. Very simple and straightforward

Collapse
 
lindaojo profile image
Linda

Thank you!