Giter Club home page Giter Club logo

sofy-share's Introduction

Sofy Sharer

Simplemente una pequña libreria que permite crear ventanas modales para compartir contenido en las redes sociales (Facebook, Twitter, Google+ y Linkedin).

Para utilizar la libreria solamente necesitas agregar dos data atributos a tu etiqueta <a></a>, a continuacion un ejemplo del marcado:

<a href="#" class="btn-primary social-share" data-network="facebook" data-url="http://www.example.com">Facebook</a>
<a href="#" class="btn-primary social-share" data-network="twitter" data-url="http://www.example.com">Twitter</a>

Donde data-network es la red social a la que queremos compartir y data-url la url a compartir.

Para ejecutar esto tenemos que integrar jquery y el el archivo de sofysharer:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../your-js/sofysharer.min.js"></script>

Luego solamente ejecutamos:

$(function(){
  $('.social-share').sofyShare();
});

y Listo!

Si quisieramos cambiar los valores por defecto, aca tenemos las opciones:

{
    facebookUrl: shareLinks.facebook, // url de facebook para compartir contenido
    twitterUrl: shareLinks.twitter, // url de twitter para compartir contenido
    googleUrl: shareLinks.google, // url de google para compartir contenido
    linkedinUrl: shareLinks.linkedin, // url de linkdin para compartir contenido
    networkData: 'network', // data atributo que selecciona la red social a compartir
    urlData: 'url', // url a compartir
    windowWidth: 350, // ancho del modal
    windowHeight: 550 // altura del modal
}

Podemos modificar estos valores por defectos como por ejemplo si quisieramos cambiar el nombre del data atributo que se encarga de detectar la red social a la que quisieramos compartir:

$(function(){
  $('.social-share').sofyShare({
    networData: 'social-network'
  });
});

para que luego podamos utilizarlo con el siguiente marcado:

<a href="#" class="btn-primary social-share" data-social-network="facebook" data-url="http://www.example.com">Facebook</a>
<a href="#" class="btn-primary social-share" data-social-network="twitter" data-url="http://www.example.com">Twitter</a>

sofy-share's People

Contributors

dgaitan avatar noelfloresr avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.