¿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:
- nuestra página de Facebook es: https://es-es.facebook.com/endeos (le puedes dar a me gusta) por lo tanto, este parámetro quedaría así: data-facebook-handle=”endeos”
- nuestra página de Twitter es: https://twitter.com/Endeos_SL (¿todavía no nos sigues?) de tal manera que este parámetro quedaría así: data-twitter-handle=”Endeos_SL”
- Para enlazar con nuestro perfil de Google: data-google-handle=”+Endeos”
- 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.
Fuente:
http://blog.endeos.com/
Sin comentarios