En este tutorial vamos a crear un anuncio parecido al que ven a la derecha, no molesta a los usuarios ya que se localiza en la parte derecha de nuestro sitio en Elgg y tiene la opción para cerrar.

Se recomienda para la versión de Elgg 1.8, pero las demás también están soportadas.
Dificultad: fácil.

Ejemplo funcionando: http://meerkat.jarodtaylor.com/demo/basic-usage/

Comenzamos a hacer nuestro anuncio:

- Primer paso:

Tenemos que descargarnos la última versiónde jQuery, ya que el script esta soportado bajo este.

Página de descarga de jQuery: http://jquery.com/

El archivo descargado, lo renombramos con el nombre de: "jquery.min.js", una vez hecho el paso anterior, procedemos a crear una carpeta dentro de nuestro servidor, fuera de elgg, llamada js. Un ejemplo:

Si su sitio esta en:
carpeta-publica/elgg

La carpeta js, deberá de esta en:

carpeta-publica/js

- Segundo paso:

Una vez realizado el paso anterior, vamos a crear un archivo llamado "jquery.meerkat.js" y dentro de este, deberá de estar el siguiente script:

jQuery.fn.extend({ 
 meerkat: function(options) {
 var defaults = { background: 'none', opacity: null, height: 'auto', width: '100%', position: 'bottom', close: '.close', dontShowAgain: '#dont-show', dontShowAgainAuto: false, animationIn: 'none', animationOut: null, easingIn: 'swing', easingOut: 'swing', animationSpeed: 'normal', cookieExpires: 0, removeCookie: '.removeCookie', delay: 0, onMeerkatShow: function() {}, timer: null };
var settings = jQuery.extend(defaults, options); if(jQuery.easing.def){ settings.easingIn = settings.easingIn;settings.easingOut = settings.easingOut; }else { settings.easingIn = 'swing'; settings.easingOut = 'swing'; }
if(settings.animationOut === null){ settings.animationOut = settings.animationIn; }
settings.delay = settings.delay * 1000; if(settings.timer != null){ settings.timer = settings.timer * 1000; }
function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else {  var expires = ""; }document.cookie = name+"="+value+expires+"; path=/"; }
function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)===' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) {createCookie(name,"",-1); } jQuery(settings.removeCookie).click(function(){ eraseCookie('meerkat')});
return this.each(function() { var element = jQuery(this); if(readCookie('meerkat') != "dontshow"){settings.onMeerkatShow.call(this);
function animateMeerkat(showOrHide, fadeOrSlide){ var meerkatWrap = jQuery('#meerkat-wrap');if(fadeOrSlide === "slide"){ if(settings.position === "left" || settings.position === "right"){ var animationType = 'width'; } else { var animationType = 'height'; } } else { var animationType = "opacity"; }  var animationProperty = {}; animationProperty[animationType] = showOrHide;
if(showOrHide === "show"){ if(fadeOrSlide !== "none"){ if(settings.delay > 0){jQuery(meerkatWrap).hide().delay(settings.delay).animate(animationProperty,settings.animationSpeed, settings.easingIn); } else { jQuery(meerkatWrap).hide().animate(animationProperty,settings.animationSpeed, settings.easingIn); } } else if ((fadeOrSlide === "none")&&(settings.delay > 0)){jQuery(meerkatWrap).hide().delay(settings.delay).show(0); } else { jQuery(meerkatWrap).show(); }jQuery(element).show(0); }
if(showOrHide === "hide"){ if(fadeOrSlide !== "none"){ if(settings.timer !== null){jQuery(meerkatWrap).delay(settings.timer).animate(animationProperty,settings.animationSpeed, settings.easingOut,  function(){    jQuery(this).destroyMeerkat();     if(settings.dontShowAgainAuto === true) { createCookie('meerkat','dontshow', settings.cookieExpires); }  }); } jQuery(settings.close).click(function(){jQuery(meerkatWrap).stop().animate(animationProperty,settings.animationSpeed, settings.easingOut, function(){jQuery(this).destroyMeerkat();}); return false; }); jQuery(settings.dontShowAgain).click(function(){jQuery(meerkatWrap).stop().animate(animationProperty,settings.animationSpeed, settings.easingOut, function(){jQuery(this).destroyMeerkat();}); createCookie('meerkat','dontshow', settings.cookieExpires); return false; }); } else if((fadeOrSlide === "none")&&(settings.timer !== null)) {jQuery(meerkatWrap).delay(settings.timer).hide(0).queue(function(){ jQuery(this).destroyMeerkat(); }); } else {jQuery(settings.close).click(function(){ jQuery(meerkatWrap).hide().queue(function(){jQuery(this).destroyMeerkat(); }); return false; }); jQuery(settings.dontShowAgain).click(function(){jQuery(meerkatWrap).hide().queue(function(){ jQuery(this).destroyMeerkat(); });createCookie('meerkat','dontshow', settings.cookieExpires); return false; }); } } }

jQuery('html, body').css({'margin':'0', 'height':'100%'}); jQuery(element).wrap('

 

'); jQuery('#meerkat-wrap').css({'position':'fixed', 'z-index': '10000', 'width': settings.width, 'height': settings.height}).css(settings.position, "0"); jQuery('#meerkat-container').css({'background': settings.background, 'height': settings.height});
if(settings.position === "left" || settings.position === "right"){ jQuery('#meerkat-wrap').css("top", 0);}
if(settings.opacity != null){ jQuery("#meerkat-wrap").prepend('

 

');jQuery('#meerkat-container').css({'background': 'transparent', 'z-index' : '2', 'position': 'relative'});jQuery(".opacity-layer").css({ 'position': 'absolute',  'top' : '0',  'height': '100%',  'width': '100%',   'background': settings.background,  "opacity" : settings.opacity }); 
} if(jQuery.browser.msie && jQuery.browser.version  jQuery('#meerkat-wrap').css({'position':'absolute', 'bottom':'-1px', 'z-index' : '0'}); if(jQuery('#ie6-content-container').length == 0){ jQuery('body').children().filter(function (index) { return jQuery(this).attr('id') != 'meerkat-wrap'; }) .wrapAll('

 

'); jQuery('html, body').css({'height':'100%', 'width':'100%', 'overflow':'hidden'}); jQuery('#ie6-content-container').css({'overflow':'auto', 'width':'100%', 'height':'100%', 'position':'absolute'}); var bgProperties = document.body.currentStyle.backgroundColor+ " "; bgProperties += document.body.currentStyle.backgroundImage+ " "; bgProperties += document.body.currentStyle.backgroundRepeat+ " "; bgProperties += document.body.currentStyle.backgroundAttachment+ " "; bgProperties += document.body.currentStyle.backgroundPositionX+ " "; bgProperties += document.body.currentStyle.backgroundPositionY; jQuery("body").css({'background':'none'}); jQuery("#ie6-content-container").css({'background' : bgProperties}); } var ie6ContentContainer = document.getElementById('ie6-content-container'); if((ie6ContentContainer.clientHeight < ie6ContentContainer.scrollHeight) && (settings.position != 'left')) { jQuery('#meerkat-wrap').css({'right' : '17px'}); } }
switch (settings.animationIn) { case "slide": animateMeerkat("show", "slide"); break; case "fade":animateMeerkat("show", "fade"); break; case "none": animateMeerkat("show", "none"); break; default: alert('The animationIn option only accepts "slide", "fade", or "none"'); }
switch (settings.animationOut) { case "slide": animateMeerkat("hide", "slide"); break;
case "fade": animateMeerkat("hide", "fade"); break;
case "none": if(settings.timer != null){ jQuery('#meerkat-wrap').delay(settings.timer).hide(0).queue(function(){jQuery(this).destroyMeerkat(); }); } jQuery(settings.close).click(function(){ jQuery('#meerkat-wrap').hide().queue(function(){ jQuery(this).destroyMeerkat(); }); });jQuery(settings.dontShowAgain).click(function(){ jQuery('#meerkat-wrap').hide().queue(function(){jQuery(this).destroyMeerkat(); }); createCookie('meerkat','dontshow', settings.cookieExpires); }); break;
default:  alert('The animationOut option only accepts "slide", "fade", or "none"'); } } else {jQuery(element).hide(); } }); }, destroyMeerkat: function() { jQuery('#meerkat-wrap').replaceWith( jQuery('#meerkat-container').contents().hide() ); }});

- Tercer paso:

Ya tenemos la mitad de nuestro proyecto realizado, ahora nos toca ensamblarlo, dentrod de nuestra red. En este paso, vamos hacer que nuestro anuncio se muestre en todas las páginas o en la página que deseemos, con este script:

 

 

// <![CDATA[    <br>$(document).ready(function(){ 
$('.meerkat').meerkat({ 
height: '100%', 
width: '150px', 
position: 'right', 
close: '.close-meerkat', 
animationIn: 'slide', 
animationSpeed: 500});});    
// ]]>

cerrar

 
<!--?php /*?-->CÓDIGO PUBLICIDAD AQUÍ<!--?php */?-->     

 

 

Sustituimos tuurl por la nuestra y colocamos nuestro código, en el sitio que queramos como en el ejemplo de abajo y sustituimos "<!--?php /*?-->CÓDIGO PUBLICIDAD AQUÍ<!--?php */?-->" por nuestro código de publicidad vertical que deseemos.

Ejemplo:

Colocar los anuncios dentro de todas las páginas de Elgg, en la parte derecha:

Elgg 1.7.x:
Tan solo tendríamos que ir a carpeta-elgg/views/default/page_elements/ y buscar el archivo: footer.php. Una vez dentro, añadir el código anterior.

Elgg 1.8. Beta
Ir a carpeta-elgg/views/default/page/elements/ y buscar el archivo: footer.php. Una vez dentro, añadir el código anterior.

Espero que este tutorial les haya servido.

Un salduo, Oranyero.