Skip to content

miguelcolmenares/share-widget

Repository files navigation

Share widget

GitHub Actions Status Badge GitHub release (latest by date)

Add a floating widget to open Share options

Getting Started

Add this javascript at the end of your page:

<script type="text/javascript">
        !function (s, h, a, r, e, w) {
            s.shareWidget || (
                e = h.createElement(a),
                e.src = r,
                w = h.getElementsByTagName(a)[0],
                w.parentNode.insertBefore(e, w)
            )
        }(window, document, "script", "https://cdn.jsdelivr.net/gh/miguelcolmenares/share-widget/dist/js/share-widget.js");
        window.addEventListener('load', function () {
            new shareWidget({
                header: {
                    background: "#dd181c",
                    title: "Share this on",
                },
                button: {
                    color: "#dd181c"
                },
                networks: [{
                        network: "whatsapp",
                        name: "Whatsapp",
                        color: "#18e27a"
                    },
                    {
                        network: "facebook",
                        name: "Facebook",
                        color: "#3a559f"
                    },
                    {
                        network: "twitter",
                        name: "Twitter",
                        color: "#55acee"
                    },
                    {
                        network: "email",
                        name: "Correo",
                        color: "#000"
                    }]
            })
        });
    </script>

Widget Options

Argument Type Default
button Object {}
header Object {}
networks Array []

Header Options

Argument Type Default
background String ""
title String ""

Button Options

Argument Type Default
color String ""

Network Options

Argument Type Default Options
color String ""
name String ""
network String "" email, facebook, twitter, whatsapp

Example:

new shareWidget({
    header: {
        background: "#dd181c",
        title: "Share this on",
    },
    button: {
        color: "#dd181c"
    },
    networks: [
    {
        network: "facebook",
        name: "Facebook",
        color: "#3a559f"
    },
    {
        network: "twitter",
        name: "Twitter",
        color: "#55acee"
    }]
})