Merida Design Blog

Publicado el | Recursos / ,

Sharer.js: Crea tus propios botones para compartir con elementos del DOM

Sharer.js es una librería pequeña pero bastante útil, con esta librería puedes crear tus propios botones para compartir en varias plataformas sin necesidad de cargar pesadas librerías o sdk’s para cada opción, basta con asignar algunos atributos a un elemento HTML y listo, tu defines los estilos según las necesidades de tu sitio.


Forma de uso

Para comenzar a usar la librería solo debes incluir sharer.js en tu HTML dentro de la etiqueta head y posteriormente asignar el atributo data-sharer con el nombre de la plataforma a la que deseas compartir, la url y la clase sharer para que la librería detecte el elemento. Adicionalmente puedes incluir otros atributos como data-title que dependerán de la plataforma a la que se desea compartir.

Veamos un ejemplo de un botón para compartir en Twitter.


    <!DOCTYPE html>
    <html>
        <head>
            <title>Twitter Share Button</title>
            <script src="https://cdn.jsdelivr.net/sharer.js/0.2.3/sharer.min.js"></script>
        </head>
        
        <body>
            <button class="sharer" 
                data-sharer="twitter"
                data-title="Merida Design Blog"
                data-url="http://blog.meridadesign.com">Compartir en twitter</button>
        </body>
    </html>

A continuación te dejo un demo funcional con todas las opciones que soporta esta librería.
Nota: algunas de las opciones solo funcionan al ser usadas desde un teléfono móvil (como whatsapp o telegram).

See the Pen Custom share buttons with SharerJS by Iván Villamil (@ivillamil) on CodePen.15465

Por cierto, FontAwesome no cuenta con todos los logos así que para algunas opciones solo use unas aproximaciones, lo comento por si quieres copiar el código para tu(s) proyecto(s).

Página: http://ellisonleao.github.io/sharer.js



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: