README.md

Share widget

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"
    }]
})