Social-contact NPM

Social Contact Web Component

A web component that displays your contact information across the most popular social networks.

Social Network	Social Contact attribute
Twitter	twitter
LinkedIn	linkedin
Facebook	facebook
Instagram	instagram
GitHub	github

The component itself renders like below:

Each one of the social profile links will open in a new tab when clicked.

Try it out yourself! (codepen)

Usage

Via script tag

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Social Contact - Web Component</title>
    <style>
        social-contact {
            display: block;
            width: 320px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <social-contact
        github="rcasto"
        linkedin="rcasto">
    </social-contact>

    <script async src="https://cdn.jsdelivr.net/npm/social-contact@1.0.5/dist/socialcontact.min.js"></script>
</body>
</html>

Via module bundler

Install package via package manager of your choice.

npm install social-contact

import 'social-contact' as part of your app module, it should then be included as part of your bundle.

import 'social-contact';

// Rest of your code...

You can now use <social-contact></social-contact> in your app views!

If any of these properties is omitted, then that social contact method is simply not rendered.

For each of the social contact methods, all you need to provide to the web component property is the username associated with the social network profile.