Por mucho que los odiemos, los botones para compartir sociales son necesarios para hacer más fácil que los visitantes puedan compartir nuestro contenido entre sus amigos y redes profesionales. Pero los desarrolladores web, en general, empezamos a estar cansados de la desaceleración en la velocidad de la web que los botones para compartir en redes sociales provocan. Cada botón que incluyas en tu página cargará su propio conjunto de scripts y hojas de estilo que hacen que las páginas carguen más lentas.
Por eso, en este artículo, te presentamos un nuevo plugin de jQuery muy chulo que agrega botones para compartir sociales en tu sitio web sin que vaya más lenta. Es fácil de usar, potenciado con CSS3, totalmente responsive y completamente personalizable. ¿Qué quieres más?
¿Cómo funciona?
Todas las redes sociales tienen lo que se denomina como una “sharer page”, una URL especial que permite a los usuarios compartir cualquier contenido en la red social. Dichas URLs pueden ser abiertas en una nueva ventana o en un popup, y se cargarán exclusivamente cuando lo necesitemos, lo que acelera las cosas.
El plugin cuenta con soporte para estas redes sociales:
- Google+
- Tumblr
Además, es fácil añadir soporte para más redes sociales editando el código fuente del propio plugin.
¿Cómo se utiliza?
Para utilizar este plugin, descarga el archivo zip desde este enlace. Extrae los ficheros y copia el directorio assets/cool-share en tu proyecto. Después necesitarás incluir las hojas de estilo y el fichero de Javascript del plugin, junto a Font Awesoma, en tu página:
<!-- In the head section of your page --> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="assets/cool-share/plugin.css" media="all" rel="stylesheet" /> <!-- Near the closing body tag --> <script src="assets/cool-share/plugin.js"></script>
El plugin depende de jQuery, por lo que asegúrate de incluir la librería antes de incluir el fichero plugin.js. Cualquier versión reciente de lo popular librería funcionará sin problemas.
Lo próximo que necesitas hacer designar el elemento que llamará al plugin para que se convierta en el set de botones para compartir en redes sociales. Por ejemplo, podemos utilizar un elemento span.
<span class="socialShare"></span>
El nombre de la clase no es vital. He puesto ese sólo para que sea más fácil de recordar más tarde. Teniendo todo esto, estamos listos para inicializar el plugin.
var url = 'http://tutorialzine.com/2014/08/cool-share-jquery-plugin/'; var options = { twitter: { text: 'Tremendo plugin de jQuery para compartir en redes sociales ', via: '@noprog' }, facebook : true, googlePlus : true }; $('.socialShare').shareButtons(url, options);
El parámetro URL es opcional, si se omite, el plugin usará la URL de la página actual. El segundo parámetro es un objeto con las opciones de las redes sociales. Facebook y Google no son compatibles con las opciones adicionales, por lo que sólo pueden tener como valor o un true o un false. Con Twitter, por otro lado, puedes configurar previamente el contenido del tweet y, también, asociarlo a un usuario de Twitter.
El plugin es compatible con dos redes sociales más, Pinterest y Tumblr. La forma de utilizar dichas redes sociales es similar a la que te hemos mostrado previamente con Twitter y Facebook.
Fuente: tutorialzine.com