Sígueme (SNA_followme)

Como ya mencionamos gracias e este modulo podemos agregar nuestras redes sociales, por defecto trae pero podemos agregar mas si lo deseamos.

Las Redes sociales por defecto son:

Uso

Su uso es muy sencillo, veamos un ejemplo:

							<div data-role="snafollowme" 
								data-inline="true"
								data-links='{"facebook":"name_Perfil",...."mailto":"tucorreo@gmail.com"}'>
							</div>
						

Como podemos observar una linea de código y listo, es esta linea le establecemos el parámetro inline para que lo muestre en unas sola linea y el parámetro links es donde agregamos todas nuestros perfiles.

Para agregar nuevos linsk distintos SNA pone a nuestra disposición un método llamado SNA.newlinks el cual explicaremos en la sección de utilidades.

Iconos

Por defecto SNA cuenta con 3 Temas de iconos, el tema FontICons (establecido por defecto), image-circle e image-square, ademas de estos 3 themas podemos agregar otros si deseamos usando el parámetro data-themen.

							<div data-role="snafollowme" 
								data-inline="true" 
								 data-themen="default"
								data-links='{"facebook":"name_Perfil",...."mailto":"tucorreo@gmail.com"}'>
							</div>
							<div data-role="snafollowme" 
								data-inline="true"
								 data-themen="image-circle"
								data-links='{"facebook":"name_Perfil",...."mailto":"tucorreo@gmail.com"}'>
							</div>
							<div data-role="snafollowme" 
								data-inline="true"
								 data-themen="image-square"
								data-links='{"facebook":"name_Perfil",...."mailto":"tucorreo@gmail.com"}'>
							</div>
						

En caso de que deseemos colocar iconos distintos o imágenes debemos colocar para los iconos solo debemos poner la clase del icono y/o el prefijo por ejemplo en caso de que deseemos usar Font Awesome seria asi data-themen="fa fa-" donde fa es la clase del icono y fa- es el prefijo.

							<div data-role="snafollowme" 
								data-inline="true" 
								data-cls-link="m-0 p-0"
								data-themen="mif-"
								data-links='{"facebook":"name_Perfil",...."mailto":"tucorreo@gmail.com"}'>
							</div>
							<div data-role="snafollowme" 
								data-inline="true" 
								data-themen="image"
								data-image='{"facebook":"facebook.png"... }'
								data-links='{"facebook":"name_Perfil",...."mailto":"tucorreo@gmail.com"}'>
							</div>
						

Esta documentación usa el Framework Metro el cual tiene su propia fuente de iconos que usan la clase mif-*

Texto

Podemos agregar texto a nuestro botones, con el parámetro data-text, podemos agregar un texto general o un texto para cada Red Social, a demás podemos simplemente establecerlo a True, y el sistema asignara el texto basado en la configuración del idioma.

							<div data-role="snafollowme" 
								data-inline="true" 
								data-only="duo"
								data-text="Sigueme"
								data-links='{"facebook":"name_Perfil",...."mailto":"tucorreo@gmail.com"}'>
							</div>
							<div data-role="snafollowme" 
								data-inline="true" 
								data-only="duo"
								data-text='{"facebook":"Sigueme","twitter":"Tweet","instagram":"Mirame"}' 
								data-links='{"facebook":"name_Perfil",...."mailto":"tucorreo@gmail.com"}'>
							</div>
						

Idioma

SNA ofrece por defecto 2 idiomas es-VE y en-US, pero también nos ofrece una función que nos permite agregar la cantidad de idiomas que deseemos. para establecer un idioma se usa el atributo data-locale.

							<div data-role="snafollowme" 
								data-inline="true" 
								data-only="duo"
								data-text="true" data-locale="es-VE"
								data-links='{"facebook":"name_Perfil",...."mailto":"tucorreo@gmail.com"}'>
							</div>
						

Tamaños

SNA posee 3 tamaños diferentes para todos su componentes, los cuales son small, medium y large para ello se usa el atributo data-size

							<div data-role="snafollowme" 
								data-inline="true" 
								data-size="large"
								data-links='{"facebook":"name_Perfil",...."mailto":"tucorreo@gmail.com"}'>
							</div>
						

parámetros

											{
											  bg:true,//Establece el color de fondo, si se coloca true sera el de la red social
											  fg:'white', // Establece el color de la fuente
											  bgColors:null, //si bg es true podemos usar este parámetro para darle otra tonalidad por ejemeplo la google podemos colocaar green, yellow, red.
											  shadow:true, //Si se muestra o no la sombre
											  notspace:true //Si no se deja espacios en entre los iconos
											}
											

Javascript

También podemos usar Javascript para crear nuestros links.

							var div = $('<div>').appendTo('body');
							  	div.snafollowme({
								pos: 'right-center',
								links:{
									facebook:"rep190",
									twitter:"Robert_saer",
									instagram:"robertperez757",
									mailto:"delfinmundo@gmail.com"
								}
							});
						

Además de todas estas opciones y acciones también se cuenta con unos métodos que nos permite establecer u obtener información en tiempo real.

Métodos

• getLang()

  Retorna la plantilla de idioma establecido

  									var snaFw = $("#mielemento").data('snafollowme');
  									    snaFW.getLang();
  									return
  									-> {langText: "nombre_del_idioma" , social: {...}, 
  									-> mailto: {...}, buttoms: {...}, validation: {...} }	
  								

  Para conocer la plantilla de idiomas valla a Utilidades > idiomas

• setLang(lang)

  Establece un nuevo idioma al elemento

  									var snaFw = $("#mielemento").data('snafollowme');
  										snaFw = snaFW.setLang('en-US');
  									return
  									Object snafollowme
  								

• setPosition(pos)

  Permite restablecer una posición al elemento.

  									var snaFw = $("#mielemento").data('snafollowme');
  									    snaFw = snaFW.setPosition('top-left');
  									return
  									Object snafollowme
  								

• getPosition(cls)

  Si cls es igual a verdadero (true) retornara el nombre de la clase asignada, en caso de lo contrario retornara un objeto con las medidas.

  									var snaFw = $("#mielemento").data('snafollowme');
  									    snaFW.getPosition(true);
  									return "top-left"
  										snaFW.getPosition(false);
  									return {top: 212, left: 0}
  								

• setLinks(link)

  Establece los nuevos links al elemento en tiempo de ejecución.

  									var snaFw = $("#mielemento").data('snafollowme');
  									    snaFw = snaFW.setLinks({
  											linkedin:'sna'
  										});
  									return
  									Object snafollowme
  								

• getLinks()

  Obtiene una lista de los links pasados al elemento.

  									var snaFw = $("#mielemento").data('snafollowme');
  									    snaFW.getLinks();
  									return
  									{...}
  								

• setSize()

  Establece una de las 3 medidas a nuestro elemento.

  									var snaFw = $("#mielemento").data('snafollowme');
  									    snaFw = snaFW.setSize('small');
  									return
  									Object snafollowme
  								

Compartir (SNA_share)

Este modulo nos permite crear botones de compartir con muchas redes sociales, inclucibe Whatsapp.

							<div data-role="snashare" data-only="icon" data-size="small" 
								data-social="facebook,twitter,mailto" 
								data-title="Desierto" data-description="#postdata">
							</div>
						

Al igual que los demás módulos podemos agregar nuevos link, pero los links predeterminados son:

parámetros de Configuración

Algunas redes sociales nos permite además de darles la URL, podemos darles otras cosas como TITULO, DESCRIPCIÓN u otros, SNA SHARE nos ofrece la posibilidad de establecer dichos parámetros basados en los atributos data.

							 <div data-role="snashare" data-only="icon" data-target="dialog" 
							      data-size="small" data-social="facebook,twitter,pinterest,linkedin,tumblr,whatsapp" data-title="Flores de Ensueño" 
							      data-description="#postdata1" data-media="http://10.42.0.1/plugins/sna/docs/img/Dreamlike_flowers.jpg"
							      data-via="Robert_Saer" data-post-type="article"></div>
						

La URL el sistema lo toma de manera automática, pero podemos usar el atributo data-url para establecer una url para compartir, además todos los parámetros necesarios el sistema los toma de los metadatos de la página actual, de forma predeterminada.

Como opción adicional y como podemos notar en el ejemplo el attributo data-description, no solo podemos pasarle un texto podemos pasarle un elemento al cual se le obtendrá el texto dado. Los atributos que aceptan elementos son: data-description, data-title, data-media.

Parámetros

											{
											  bg:true,//Establece el color de fondo, si se coloca true sera el de la red social
											  fg:'white', // Establece el color de la fuente
											  bgColors:null, //si bg es true podemos usar este parámetro para darle otra tonalidad por ejemplo la google podemos colocar green, yellow, red.
											  shadow:true, //Si se muestra o no la sombre
											  notspace:true //Si no se deja espacios en entre los iconos
											}
											

Métodos

• getLang()

  Retorna la plantilla de idioma establecido

  									var snaFw = $("#mielemento").data('snashare');
  									    snaFW.getLang();
  									return
  									-> {langText: "nombre_del_idioma" , social: {...}, 
  									-> mailto: {...}, buttoms: {...}, validation: {...} }	
  								

  Para conocer la plantilla de idiomas valla a Utilidades > idiomas

• setLang(lang)

  Establece un nuevo idioma al elemento

  									var snaFw = $("#mielemento").data('snashare');
  									    snaFw = snaFW.setLang('en-US');
  									return
  									Object snashare
  								

• setSocial(link)

  Establece las nuevas redes sociales a compartir

  									var snaFw = $("#mielemento").data('snashare');
  									    snaFw = snaFW.setSocial(['faceboo','twitter']);
  									return
  									Object snashare
  								

• getSocial()

  Obtiene una lista de las redes sociales con las cuales compartes y su links

  									var snaFw = $("#mielemento").data('snashare');
  									    snaFW.getSocial();
  									return
  									{...}
  								

• setSize()

  Establece una de las 3 medidas a nuestro elemento.

  									var snaFw = $("#mielemento").data('snashare');
  									    snaFw = snaFW.setSize('small');
  									return
  									Object snashare
  								

Boton Flotante (SNA_button)

Es un pequeño plugin que nos permite agregar botones flotantes a nuestro sistema, para el envio de msj a nuestra redes soiales, como Whatsapp, Skype, Telegram, Vibe, Line, entre otras.

Su uso es muy sencillo, se trabaja desde javascript para mejorar el contro del botón.

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

No solo podemos colocar un links podemos crear un boton con multiples links.

							SNA.btnfloat.create({
							  listSocial:{
								whatsapp:{
									data:{
										phone:'+584241922546',
										text:'Bienvenido a mis sitema'
									}
								},
								skype:{
									data:{
										live:'shellrumm.fp',
										sms:'Hola en que puedo ayudarte?'
									}
								}
							  }
						 });
						

Parámetros

												{
												  nombre_de_mi_red_social:{
													data:{}, //Datos
													theme:"sna-icon-",//Tema de Icons
													squema:{},//Squema de Colores para esta red
												 }
												}
											

												{
												  text:{
												  	welcome:'Bienvenido a mi sistema',
												  	welcome2:'¿En que te puedo Ayudar?'
												  }
												}
											

Métodos

• create(options)

  Permite crear el botón flotante

  									var btnF = SNA.btnfloat.create();
  									return
  									Object btnfloat
  								

• setSize(size)

  Establece una de las 3 medidas a nuestro elemento o una medidad pasada como número

  									var btnF = SNA.btnfloat.create();
  									    btnF = btnF.setSize('small'); //Se le asigna el tamaño small
  									    btnF = btnF.setSize(120); //El botón sera de 120px x 120px
  									return
  									Object btnfloat
  								

• getSize(int)

  Permite obtener en tamaño del elemento, si int es True se devolvera un objeto con el ancho y alto, de lo contrario se devolvera el valor del parámentro size.

  									var btnF = SNA.btnfloat.create();
  									var objSize = btnF.getSize(true);
  									return
  									Object { width: '48px', height: '48px'}
  
  									var Size = btnF.getSize(false);
  									return 
  									String medium
  								

• setPosition(position, fixed)

  Establece la posición del elemento, el parametro position puede ser left,right como también podemos darle un objeto compuesto por el tipo de posición, el top y el left, el segundo parámetro permite establecer si es una posición fija o absoluta;

  									var btnF = SNA.btnfloat.create();
  										btnF = btnF.setPosition('right',true);
  									return
  									Object btnfloat
  
  								

• getPosition()

  Obtiene la posición del elemento.

  									var btnF = SNA.btnfloat.create();
  									var pos = btnF.getPosition();
  									return
  									Object {position:'fixed', top:'200px', left:'5px'}