Social Networks Admin

Hola en esta entrada les hablare de SNA, (Social Networks Admin) en un plugins poderoso que nos permite crear links de redes sociales, botones para compartir y botones flotantes, muy elegantes y modernos cuenta con un  grupo de redes sociales predeterminadas pero podemos agregar nuestras redes sociales a nuestro gusto.

Antes de empezar si desean ver la documentación oficial puedes verlo aquí.

¿Que es SNA?

Como ya menciones es un plugins de administración de redes sociales el

Este cuenta con 3 Modalidades o SubPlugins para los 3 usos mas populares de las redes sociales.

Las modalidades son:

• Sígueme (SNA_followme) : Permite colocar nuestras redes sociales donde deseemos dentro de nuestra web una o mas veces como por ejemplo esta página que tiene 3 veces colocados.
• Compartir (SNA_share) : Permite colocar iconos o botones de compartir con todas las redes sociales que deseemos incluso con Whatsapp.
• Botón Flotante (SNA_button) : Permite agregar botones flotantes a nuestra web para el chat de nuestra red social favorita.

Instalación

Para usarlo copie la carpeta dist y lib y el archivo config.json a su proyecto luego incluya las siguientes lineas:

<link rel="stylesheet" type="text/css" href="dist/css/sna.css"> <!-- En el Head -->
<script src="dist/js/sna.js"></script> <!-- Antes del cierre del Body -->

Uso

Su uso es muy sencillo ya que SNA aprovecha al máximo el uso de los atributos data ( DataSet ) por ejemplo si deseamos colocar un grupo de botones flotante a la derecha de nuestra web solo basta con colocar lo siguiente en cualquier parte del código de nuestro sitio web.

<div 
    data-role="snafollowme"
    data-inline="true"
    data-pos="right-center"
    data-links='{"facebook":"rep190","twitter":"Robert_saer","instagram":"robertperez757", "mailto":"delfinmundo@gmail.com"}'>
</div>

En caso de que sea un grupo de botones de compartir podemos usar la siguiente sintaxis:

<div data-role="snashare"
     data-only="icon"
     data-target="dialog"
     data-size="small"
     data-social="facebook,twitter,mailto"
     data-title="Titulo"
     data-description="Descripción">
</div>

Ahora si lo que deseamos es un botón flotante solo usemos la siguiente linea esto es JAVASCRIPT:

SNA.btnfloat.create({
  data:{
    phone:'+584241922546',
    text:'Me gusta Tu sistio'
  }
});

Como hemos notado es sencillo su uso, un par de lineas y listo. podemos descargarlos desde GitHub.

Si te gusta comenta y comparte