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
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:
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>
You could support my work by sharing this article, thanks!
Top comments (3)
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?
Thanks for this article. Very simple and straightforward
Thank you!