Podrán percatarse que nuestro blog actualmente incluye publicidad de Google Adsense, justo luego del cuarto párrafo y al final de la pagina, pero eso no es nada nuevo. Lo interesante y diferente en nuestro sitio es que es publicidad responsive, notaran a continuación que la publicidad sera del tamaño adecuado según la resolución de sus pantallas, si nos visitan desde un Tablet, Smartphone, escritorio buscara la publicidad responsive que se adecue lo mejor posible a su lectura, Inclusive si minimizan o maximizan manual u automáticamente la pagina, la publicidad responsive podrá ir variando.


Para ser mas claro el crearemos publicidad de adsense de 3 tamaños diferentes y la mostraremos según el monitor o el tamaño de la ventana del navegador del usuario. Hay que tener cuidado, si la resolución cambia una vez cargada la pagina, mostrara un mensaje con lo que desees.

Para entender un mejor ejemplo, minimicen el navegador y luego actualicen la pagina. y vean la reacción que toma la publicidad responsive en nuestra web.

Los cambio que realizara pasaran por tres factores importantes en la publicidad responsive.

if (width > 1216) {
// Si Resolución del navegador es mayor a 1216 Mostraremos Publicidad
// de 768 x 90
} else if ((width < 1216) && (width > 500)) {
// Si la Resolución del navegador es menos que 1216 y mayor que 500
//Mostraremos publicidad de 336 x 280
} else {
Para el reto de resoluciones menores a 500
//Mostraremos publicidad de 250 x 250
}

Hay que tener en cuenta que la resolución que se esta considerando es la que entrega el navegador del cliente y no la que tiene actualmente el <div> de su web, por lo cual se debe considerar ese factor como minimo.

Ahora, ese pequeño script, solo nos detectara la resolución actual del cliente al ingresar por primera vez en nuestra pagina, pero no detectara si es que cambia la resolución mientras esta en ella, entonces deberemos añadir un poco de JQuery para lograr esto.

Publicidad Responsive

Publicidad Responsive con 768 x 90

Publicidad Responsive

Publicidad Responsive con 336 x 280

Publicidad Responsive – Google Adsense

Para este Tutorial me basare en el puglins Functions.php de Wordpress, si no utilizan esa técnica, pueden adaptarlo a sus necesidades facilmente.

Primero que todo, añadiremos entre nuestras etiquetas <head> </head> el siguiente código.

add_action('wp_head', 'adsense_responsive');

function adsense_responsive() { ?>
<!-- RECARGAS DIV AL REDIMENSIONAR, MINIMIZAR O MAXIMIZAR -->
<script type='text/javascript'>
jQuery.noConflict();
	var resizeTimer;
        //Event to handle resizing
		jQuery(window).resize(function () // comprueba siempre
        {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(Resized, 100);
        });

        //Actual Resizing Event
        function Resized()
        {
			jQuery(document).ready(function() {
				jQuery("#TiAddsIn").fadeOut("slow").html("[adsense]").fadeIn("slow");
				jQuery("#TiAddsCenter").fadeOut("slow").html("[adsense]").fadeIn("slow");
				jQuery("#TiAddsOut").fadeOut("slow").html("[adsense]").fadeIn("slow");
			});
        }
</script>
<?php }

Deben llamar a la librería jquery, para que el código funcione.

<script src=http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

Ahora por comodidad, añadiremos un shourtcode llamado [ adsense ] en nuestro plugins Fuctions.php de esta forma poder llamar al código responsive sin necesidad de estar escribiendo todo el código cada vez que lo necesitemos.

Para saber mas sobre como crear shourtcodes, pueden visitar http://ayudawordpress.com/que-son-los-shortcodes-y-como-crearlos

El siguiente Código, incluye el Shortcode y el script para la publicidad responsive de google Adsense.

function adsense_shortcode( $atts ) {
extract(shortcode_atts(array(
'format' => '1',
), $atts));

switch ($format) {
case 1 :
$ad = '<script type="text/javascript">

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

google_ad_client = "ca-pub-IDGOOGLE-ADSENSE";

if (width > 1216) {
// Load the Leaderboard 728x90 Unit for wide screen
google_ad_slot = "IDANUNCIO-728x90";
google_ad_width = 728;
google_ad_height = 90;
} else if ((width < 1216) && (width > 500)) {
// Load the Leaderboard 336x280 Unit for wide screen
google_ad_slot = "IDANUNCIO-336x280";
google_ad_width = 336;
google_ad_height = 280;
} else {
// For small screens, load the 468x60 banner
google_ad_slot = "IDANUNCIO-250x250";
google_ad_width = 250;
google_ad_height = 250;
}

</script>

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>';
break;
}
return $ad;
}
add_shortcode('adsense', 'adsense_shortcode');

Remplacen donde dice “GOOGLEID” por su ID de google Adsense y la ID en cada anuncio por el correspondiente suyo. (las ID son números).

Publicidad Responsive – Google Adsense

Expliquemos un poco el proceso.

En la primera parte del código, el que contiene el head, es un Jquery que actualizara los DIV con la información de la nueva resolución y así que publicidad deberá mostrar al usuario. estos encierran las etiquetas [ adsense ], que llama el shourtcode que creamos en el segundo código.

El segundo código es mas sencillo, se crea un ShourtCode llamado [ adsense ] y este contiene la publicidad responsive de nuestros anuncios, cada vez que un usuario ingrese, detectara su resolución y mostrara el anuncio adecuado para esa resolución. (No habrá problemas con adsense por esto, siempre y cuando no intenten que cambie cada vez que el usuario cambie su resolución)

veamos el código completo.

Cambiar la publicidad adsense, según la resolución del usuario

add_action('wp_head', 'adsense_responsive');

function adsense_responsive() { ?>
<!-- RECARGAS DIV AL REDIMENSIONAR, MINIMIZAR O MAXIMIZAR -->
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type='text/javascript'>
jQuery.noConflict();
	var resizeTimer;
        //Event to handle resizing
		jQuery(window).resize(function () // comprueba siempre
        {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(Resized, 100);
        });

        //Actual Resizing Event
        function Resized()
        {
			jQuery(document).ready(function() {
				jQuery("#TiAddsIn").fadeOut("slow").html("<h1>Podemos mostrar un mensaje</h1>").fadeIn("slow");
				jQuery("#TiAddsCenter").fadeOut("slow").html("[adsense]").fadeIn("slow");
				jQuery("#TiAddsOut").fadeOut("slow").html("[adsense]").fadeIn("slow");
			});
        }</script>
<?php }

function adsense_shortcode( $atts ) {
extract(shortcode_atts(array(
'format' => '1',
), $atts));

switch ($format) {
case 1 :
$ad = '<script type="text/javascript">

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

google_ad_client = "ca-pub-TUIDADSENSE";

if (width > 1216) {
// Load the Leaderboard 728x90 Unit for wide screen
google_ad_slot = "TUIDANUNCIO-1";
google_ad_width = 728;
google_ad_height = 90;
} else if ((width < 1216) && (width > 500)) {
// Load the Leaderboard 336x280 Unit for wide screen
google_ad_slot = "TUIDANUNCIO-2";
google_ad_width = 336;
google_ad_height = 280;
} else {
// For small screens, load the 468x60 banner
google_ad_slot = "TUIDANUNCIO-3";
google_ad_width = 250;
google_ad_height = 250;
}

</script>

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>';
break;
}
return $ad;
}
add_shortcode('adsense', 'adsense_shortcode');

Listo, ya tienen todo para hacer funcionar su Publicidad Responsive.

Ahora solo queda añadir la publicidad responsive donde quieran que aparezca, agregando la siguiente etiqueta <div>.

<div id="TiAddsIn" align="center">[adsense]</div>

Pueden ir mas lejos y hacer que la publicidad responsive se muestre automáticamente con su plugins Fuctions.php agregando el siguiente código.

function insertaNotaFinal($content) {
if(!is_feed() && !is_home() && !is_page()) {
$content.= '<div id="TiAddsOut" align="center">[adsense]</div>';
} 
return $content;
}
add_filter ('the_content', 'insertaNotaFinal');

De esta forma la publicidad responsive se añadirá al final de cada contenido.

También pueden mostrarla cada cierta cantidad de párrafos.

add_filter( 'the_content', 'publicidad_tras_parrafo' );
function publicidad_tras_parrafo( $content ) {
if( !is_single() )
return $content;

$paragraphAfter = 3; //Este es el numero del parrafo tras el que ira la publicidad
$content = explode ( "</p>", $content );
$new_content = '';
for ( $i = 0; $i < count ( $content ); $i ++ ) {
if ( $i == $paragraphAfter ) {
$new_content .= '<div id="TiAddsIn" align="center">[adsense]</div>';
}
$new_content .= $content[$i] . "</p>";
}
return $new_content;
}

Pueden obtener mas información sobre el plugins Functions.php en:

http://ayudawordpress.com/insertar-anuncio-despues-de-un-parrafo-concreto-en-wordpress/
http://ayudawordpress.com/anade-cualquier-cosa-al-final-de-las-entradas/

Importante: Si desean que el código se ejecute una sola vez, al momento de redimencionar la ventana por primera vez, remplazen lo siguiente en el evento resize.

Busquen:


$(window).resize(function ()

Remplacen por:

$(window).one('resize', function()

Suscribete a nuestra lista

Mantente informado sobre las novedades que ofrecemos en nuestra web, no te llenaremos de Spam ni entregaremos tus datos a terceros.

Gracias por suscribirte a nuestra lista

Pin It on Pinterest

Compártelo!

Háblale a tus amigos sobre este articulo!