Si queremos introducir un banner de Amazon u otros de manera Responsive en PHP, tenemos el problema de no disponer en nuestra consola de Afiliados de un banner preparado para modo responsive, por lo que no discrimina si se está mostrando en un navegador móvil o de sobremesa.
Con estos sencillos pasos, vamos a preparar nuestra página para que, dependiendo del dispositivo (navegador web en PC o dispositivos móviles), el banner se muestre adaptado al formato de la página.
El tutorial se compone de dos códigos, uno primero que nos crea un estilo para las medidas de la página:
<style type="text/css">
@media only screen and (min-width: 500px) {div.movil {display: none;}div.sobremesa {display: block;}}
@media only screen and (max-width: 499px) {div.sobremesa {display: none;}div.movil {display: block;}}
</style>
El sitio ideal para insertar éste código es dentro del head, quedando de la siguiente forma:
<!DOCTYPE html>
<html lang="es">
<head>
<style type="text/css">
@media only screen and (min-width: 500px) {div.movil{display: none;}div.sobremesa {display: block;}}
@media only screen and (max-width: 499px) {div.sobremesa {display: none;}div.movil {display: block;}}
</style>
La otra parte del código la tenemos que introducir en el lugar que tenemos asignados para el banner y el código sería el siguiente:
<div class="movil"> Código del banner que queremos ver en los navegadores móviles </div> <div class="sobremesa"> Código del banner que queremos ver en los navegadores sobremesa </div>
Un ejemplo sería el siguiente:
<div class="movil"> <iframe src="http://rcm-eu.amazon-adsystem.com/e/cm?t=blogdemavk-21&o=30&p=42&l=ur1&category=premium&banner= 1HNZYTMS134RZ9Y5KQR2&f=ifr" width="234" height="60" style="border:none;max-width:800px;max-height:600px;"> </iframe> </div> <div class="sobremesa"> <iframe src="http://rcm-eu.amazon-adsystem.com/e/cm?t=blogdemavk-21&o=30&p=48&l=ez&f=ifr&f=ifr" width="728" height="90" style="border:none;max-width:800px;max-height:600px;"></iframe> </div>
Como podéis ver, no solo el banner se comporta de manera responsive, sino que además son banner completamente diferentes para la versión móvil y sobremesa.
El banner que muestro es de Amazon, que quizás ha sido uno de los que más problemas me ha dado para integrarlo debido a que en España no nos pone disponible una versión Responsive.
Si quereis comprobarlo podéis entrar en www.conoce-tu-ip.com, si entrais con el navegador de sobremesa muestra un anuncio de Amazon genérico y si es por la versión móvil, aparece otro banner diferente, relacionado con la oferta de 1 mes gratis de Amazon Premium.
Un saludo y hasta la próxima.
