Cómo Agregar un Catálogo de Productos de Amazon en Blogger

Catálogo de Productos de Amazon adaptados para Blogger

agregar productos de amazon afiliados que se adapte a blogger responsive

{tocify} $title={Tabla de Contenido}

Si cuentas con un blog monetizado con Amazon afiliados, de seguro has intentado colocar productos de Amazon tal como trabaja el Plugin de Wordpress: AAWP. El AAWP es un plugin que trabaja con productos de Amazon basado en una API diseñada exclusivamente para quienes monetizan como afiliados de Amazon.

En alguna ocasión has tratado de adaptar los productos que tienen buen diseño cuando se visualizan en una PC o incluso desde un dispositivo móvil o tablet. Bueno, tengo buenas noticias para ti, en este sección voy a desvelarte como poner un catalogo de productos de Amazon adaptados a cualquier pantalla e incluso si usas Blogger.

Si eres afiliado de Amazon, entonces, esto va encantarte cuando lo pongas en unas de tus entradas para reseñas. He extraído el código CSS del plugin AAWP para darle forma nuestro catálogo de productos en HTML/Blogger.

Video Explicativo: Cómo Crear un Catálogo de Productos de Amazon para Blogger


Código CSS

Para darle forma al Producto que quieres insertar, se debe llamar la función de la hoja de estilo(css), en mi caso, vi donde tienen en uso el Plugin y lo copie.

Debes copiar el LINK entre los tag <head> </head> de la plantilla. Luego que copias, guarda la plantilla para que pueda tomar efecto.


<link href='https://barbacoas.online/wp-content/plugins/aawp/assets/dist/css/main.css?ver=3.15.2' id='aawp-css' media='all' rel='stylesheet' type='text/css'/>

DIV  para llamar la función

Crea una entrada nueva, coloca en Vista HTML. Copia y pega el div para llamar la función del CSS.


<div class="aawp">
    <div class="aawp-grid aawp-grid--col-2">    
        <div class="aawp-grid__item">
            <div class="aawp-product aawp-product--vertical aawp-product--ribbon aawp-product--sale aawp-product--bestseller" >
                <span class="aawp-product__ribbon aawp-product__ribbon--sale">Rebajas</span>
                <a class="aawp-product__image--link aawp-product__image" href="ID-Afiliado-AMZN" title=" " rel="nofollow" target="_blank">
                    <img class="aawp-product__image" src="imagen-de-amazon.jpg" alt=" ">
                </a>
                <div class="aawp-product__content">
                    <a class="aawp-product__title" href="ID-Afiliado-AMZN" title=" " rel="nofollow" target="_blank">
                        Texto Titulo del Producto
                    </a>
	               <div class="aawp-product__meta">
                        <a class="aawp-check-prime" href="ID_AFILIADO_AMAZN" title="Amazon Prime" rel="nofollow" target="_blank"></a>
                    </div>   
                </div>
                <div class="aawp-product__footer">
                    <div class="aawp-product__pricing">
            		    <span class="aawp-product__price aawp-product__price--old">55,99 EUR</span>
                        <span class="aawp-product__price aawp-product__price--current">$1,299.00</span>
                    </div>
                    <a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="https://amzn.to/3xl3eBQ" title="Comprar en Amazon" target="_blank" rel="nofollow">Comprar en Amazon
                    </a>
                </div>
            </div>
        </div>               
        <div class="aawp-grid__item">
            <div class="aawp-product aawp-product--vertical aawp-product--ribbon aawp-product--sale aawp-product--bestseller">
                <span class="aawp-product__ribbon aawp-product__ribbon--sale">Rebajas</span>
                <a class="aawp-product__image--link aawp-product__image" href="ID-Afiliado-AMZN" rel="nofollow" target="_blank">
                    <img class="aawp-product__image" src="URL-DE-LA-IMAGEN.jpg" alt=" ">
                </a>
                <div class="aawp-product__content">
                    <a class="aawp-product__title" href="ID-Afiliado-AMZN" title=" " rel="nofollow" target="_blank">
                        Titulo del producto
                    </a>
                    <div class="aawp-product__meta">
                        <a class="aawp-check-prime" href="ID_AFILIADO_AMAZN" title="Amazon Prime" rel="nofollow" target="_blank"></a>
                    </div>
                </div>
                <div class="aawp-product__footer">
                    <div class="aawp-product__pricing">
                            <span class="aawp-product__price aawp-product__price--old">55,99 EUR</span>
                            <span class="aawp-product__price aawp-product__price--current">49,99 EUR</span>
                    </div>
                    <a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="ID-Afiliado-AMZN" title="Comprar en Amazon" target="_blank" rel="nofollow">Comprar en Amazon</a>
                </div>
            </div>
        </div>    
    </div>
</div>

<div class="aawp">                   
    <div class="aawp-product aawp-product--horizontal aawp-product--ribbon aawp-product--sale" >
        <span class="aawp-product__ribbon aawp-product__ribbon--sale">Rebajas</span>
            <div class="aawp-product__thumb">
                <a class="aawp-product__image-link" href="ID-Afiliado-AMZN" title=" " rel="nofollow" target="_blank">
                    <img class="aawp-product__image" src="URL-DE-LA-IMAGEN.jpg" alt="Barbacoa Kamado Joe">
                </a>
            </div>
        <div class="aawp-product__content">
            <a class="aawp-product__title" href="ID-Afiliado-AMZN" title=" " rel="nofollow" target="_blank">
            Titulo del Producto
            </a>
            <div class="aawp-product__description">
                <ul>
                    <li>Control de la Temperatura en la parte superior</li>
                    <li>Amplia parrilla de 18" para la cocción</li>
                </ul>        
            </div>
        </div>
        <div class="aawp-product__footer">
            <div class="aawp-product__pricing">
                <span class="aawp-product__price aawp-product__price--old">$1,449,99</span>                                
                <span class="aawp-product__price aawp-product__price--current">$1,299.00</span>
                <a class="aawp-check-prime" href="ID-Afiliado-AMZN" title="Amazon Prime" rel="nofollow" target="_blank">
                </a>
            </div>
                <a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="ID-Afiliado-AMZN" title="Comprar en Amazon" target="_blank" rel="nofollow">Comprar en Amazon
                </a>
        </div>
    </div>
</div>

Si quieres los archivos de la hoja de cascada junto con las imágenes, lo puedes alojar en donde desees.

PROs y CONs

Puedes adaptar esta función del plugin aawp para blogger/html sin conocimiento previo de Html. Solo debes reemplazar por tus ID de afiliado de Amazon y la URL de la imagen del producto que vayas agregando. Puedes poner tantos productos quieras.

La parte no favorable es que debes agregar manualmente tus ID de afiliado y colocar una imagen a cada producto. Esto puede tomar algo de tiempo y no trabaja automáticamente como el plugin aawp, con este plugin solo necesitas el ASIN para extraer automáticamente la información desde Amazon.

3 Comentarios

Déjame un mensaje.

  1. Respuestas
    1. Que tal Daniel, en este caso no se actualiza automáticamente porque no es un plugin. Para estos casos te recomiendo quitar el precio y poner comprar Amazon o ver producto.

      Eliminar
  2. Muy buenn post, te consulto, hay alguna manera de aplicarle el fondo transpartente, porque en mi blogg el fondo es negro y letras blancas y no se ve nada

    ResponderEliminar
Publicar un comentario
Artículo Anterior Artículo Siguiente