Main menu

Comparte tus redes sociales con el plugin ClassySocial

¿Te imaginas encontrar hoy en día una página web moderna que no permita compartir su contenido en varias redes sociales? Yo tampoco. Ya que pertenecer a diversas redes sociales es algo habitual y casi obligatorio en toda organización, vamos a presentar las redes a las que pertenecemos con un elegante efecto visual gracias al plugin jQuery ClassySocial.

Este plugin permite ver las redes sociales a las que perteneces y visitar las respectivas páginas. Actualmente permite enlazar con Facebook, Twitter, Dribbble, Socl, Youtube, Vimeo, Google Plus, Pinterest, LinkedIn, Instagram, Flickr, Blogger, GitHub, DeviantArt, Skype, Steam, WordPress, Yahoo y correo electrónico.

Qué necesitamos

  • Biblioteca jQuery
  • Fichero javascript jquery.classysocial.min.js
  • Fichero CSS jquery.classysocial.min.css

Descargar ficheros del plugin ClassySocial

Preparando el terreno

Deberemos colocar el fichero .js en nuestra carpeta de scripts y el fichero .css en nuestra carpeta de hojas de estilo. Además, haremos la llamada a la biblioteca jQuery, de modo que el código resultante sería algo así:

<!-- Classy Social y jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.classysocial.min.js"></script>
<!-- ClassySocial CSS -->
<link rel="stylesheet" type="text/css" href="css/jquery.classysocial.min.css" />

También deberás incluir la carpeta de imágenes que trae el plugin, en la misma ruta donde tienes las carpetas de tus CSS y de tus javascript.

El HTML de ClassySocial

La estructura básica sobre la que el plugin tendrá efecto, puede variar bastante según nuestras necesidades. Este es un ejemplo:

<div class="classysocial"
data-theme="default"
data-image-type="picture"
data-picture="images/endeos.jpg"
data-facebook-handle="endeos"
data-google-handle="+Endeos"
data-twitter-handle="Endeos_SL"
data-orientation="line"
data-arc-length="360"
data-radius="90"
data-networks="facebook,twitter,google"></div>

En general la estructura sigue esta forma:

<div class="nuestra-clase"
<!-- parámetros -->
</div>

¿Fácil verdad? Después comentaremos todos los parámetros posibles.

Empieza la acción

Para que todo funcione, solamente nos falta hacer la llamada, desde nuestro fichero de funciones javascript, al plugin usando la clase CSS que hemos usado en nuestro <div> anterior:

jQuery('.nuestra-clase').ClassySocial();

Nada más, este plugin no permite pasar parámetros a través de javascript, todo se hace desde el HTML.

Parámetros HTML

  • data-theme: estilo o tema que se usará. Puede ser default, square o slick
  • data-networks: lista de redes sociales que vamos a enlazar separadas con coma
  • data-image-type: puede ser facebook si quieres la imagen que tengas de perfil en Facebook para que se muestre por defecto, o puede ser picture para llamar a una imagen diferente. Por defecto es picture
  • data-picture: puede ser tanto el nombre del perfil de Facebook (para usar dicha imagen), una url donde se encuentre el archivo que queremos utilizar (images/prueba.jpg) o none para ignorar este parámetro. Por defecto es none
  • data-YYY-handle: con este parámetro indicaremos, por cada red social a la que queremos enlazar, cual es el nombre del perfil. Donde hay “YYY” deberemos poner el nombre de la red social, mientras que el valor será el nombre del perfil. Algunos ejemplos:


  • data-orientation: orientación del efecto, que puede ser arc, line, o linedown. Por defecto es arc
  • data-gap: espacio en píxeles entre las cajas de perfiles sociales
  • data-arc-start: ángulo donde empieza el arco, valor entre 1 i 360. Por defecto es 0
  • data-arc-length: largada del arco que se forma en grados, de 1 a 360. Por defecto es 180
  • data-radius: curvatura del arco. Por defecto es 80

Si te ha gustado este artículo síguenos en nuestras redes sociales y no te pierdas los que vendrán después. En caso de que tengas algún problema para usar el plugin, no dudes en dejarnos un comentario.

Puedes ver algunos ejemplos hechos en nuestra demo, las combinaciones de efectos son muy grandes, así que puedes crear un efecto a tu gusto. También puedes visitar la página web del autor del plugin, dónde encontrarás más ejemplos.

Ver demo Descargar ejemplo

Compartir en redes sociales

Si este artículo te ha sido de ayuda o te parece interesante, ayúdanos a difundirlo.

Compartir en Facebook Compartir en Twitter Compartir en Linkedin

Al usar este sitio acepta el uso de cookies para análisis y contenido personalizado. Leer más

ACEPTAR
Aviso de cookies