En este tutorial les enseñare a instalar el Hack "jQuery Social Modal Box"
Creado por Necter para http://Clubdle.com .
1.- Preambulo
Antes que nada les comentare un preambulo acerca de este “Plugin” y el uso que podemos darle.
“jQuery Social Modal Box” Es un “Plugin” basado en librerias javascript y CSS. Este plugin nos da la facilidad de Viralizar el contenido de nuestra web, es decir mediante el uso de las redes sociales podemos difundir el contenido de nuestra web. Su uso Basicamente consiste en: “La implementacion de una Ventana emergente invitandonos a difundir el contenido de nuestra web en las redes sociales ( Facebook, Twitter, Google+ ) para desbloquear contenidos en nuestro sitio. Si el Usuario que desea obtener el contenido de nuestra web no desea compartir en las redes sociales tendra que esperar un lapso de tiempo para poder ingresar a nuestra pagina. Esto se hace en todas las paginas web de nuestro sitio* , Una vez que el usuario comparte la pagina en las redes sociales el contenido de la pagina se desbloquea alacenando la Opcion mdiante Cookies en el navegador”. Este sistema ha crecido enormemente en internet y se ha implementado en millones de paginas. Aunque en lo personal nunca ha sido de mi agrado el viralizar el contenido de una web. Aunque la decision esta en los webmaster en implementar o no este sistema. Lo dejo como una opcion. ( * cada que ingresen a cualquier pagina web de nuestro sitio el sistema pedira viralizar el contenido o esperar el lapso de tiempo establecido)
Descarga el paquetes desde este enlace
2 .- Instalacion y contenido de el paquete.
A .-) El contenido de el paquete esta conformado por las siguientes carpetas y archivos :
social media box, js, style, images (carpetas)
Jquery.js, jquery.cookie.js, jquery.socialmodal.js, close.png, socialmodal.css, tutorial y captura de pantalla. (archivos)
B .-) INSTALACION Paso 1
El primer paso consiste en subir las carpetas js, style e images a el template que tienes asignado por default es tu sitio para poder combinar su contenido.
Instalacion Paso 2
En tu template que tengas asignado como Default (predeterminado) abrimos el archivo main.tlp y buscamos la etiqueta </head>
Pegamos una linea antes este codigo.
<!-- comienza compartir pagina scripts y css-->
<link media="screen" href="{THEME}/style/socialmodal.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/js/jquery.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery.cookie.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery.socialmodal.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script>
<script language="javascript">
$(document).ready(function() {
$('body').socialmodal({
uniqueName: 'showmodal',
count: 15,
});
});
</script>
<!-- finaliza compartir pagina scripts y css-->
Nota: Recuerda respaldar tus template main.tpl por si acaso algo sale mal
Paso 3 : Como configurar el plugin.( lapso de espera)
En el plugin existen algunos parametros que puedes personalizar, para aumentar o disminuir el lapso de tiempo tienes que cambiar el valor del contador que viene en esta parte de el codigo que ingresamos previamente en nuestro main.tlp :
$(document).ready(function() {
$('body').socialmodal({
uniqueName: 'showmodal',
count: 15, <---------- Si quieres cambiar el lapso de tiempo que deben esperar los usuarios aumenta este numero debe ser en segundos
});
});
</script>
<!-- finaliza compartir pagina scripts y css-->
</head>
Nota: si pones el contador es cero el usuario tendra que cerrar la ventana manualmente.
Configurar el cierre automatico de la ventana emergente:
Dentro de el archivo jquery.socialmodal.js ( social media box/js/ jquery.socialmodal.js) se encuentra este fragmento de codigo ( linea 18 ):
para configurar los mensajes y el cierre automatico de la ventana.
var defaults = {
uniqueName: 'socialmodal',
title: 'Compartir esta Pagina', <------------------- mensaje para invitar a compartir la pagina lo puedes cambiar por uno personalizado
subtitle: null,
content: null,
count: 0,
warning: 'Activa las cookies para guardar la configuracion', <----- puedes cambiar el mensaje por uno personalizado
facebook: null,
plusone: null,
twitter: null,
opacity: '0.4',
manualClose: false, <-------- Si deseas que la ventana NO se cierre automaticamente cambia false por true . En caso que hayas puesto el count en 0
onclick: null,
afterDocReady: false,
callback: function() {},
};
Esta es la configuracion basica de “jQuery Social Modal Box” si tienen alguna duda acerca de su uso dejen su comentario en este articulo para responder dudas o a necter57@gmail.com
http://skillsletaltes.tk
hiphop & underground
