Tutorial: Extracción de datos JSON de enlaces adjuntos en Blogger

  • Autor Autor Toranpu
  • Fecha de inicio Fecha de inicio
Toranpu

Toranpu

Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Demo: ver

1) Activar los enlaces adjuntos


Para blogger nuevo: Configuración -> Feed del sitio -> Vínculos de redifusión y título -> Habilitar

1.webp


2) Agregar datos

Una vez que hayas habilitado los enlaces adjuntos, cuando crees una publicación, la barra lateral derecha tendrá la palabra Vínculos. Al hacer clic en él se abrirá el enlace adjunto.

2.webp


- En el segundo cuadro (Agregar vínculo) debes ingresar un enlace arbitrario (preferiblemente la dirección del blog -> https://tublog.blogspot.com/).
- En el tercer cuadro (Agregar tipo MIME) ingresaremos el json.

3) Ejemplo JSON

Insertar CODE, HTML o PHP:
{
    imagen: "https://1.bp.blogspot.com/-cpmYySbuV2o/X7E4F9M-UVI/AAAAAAAAAZw/ATSzNoWWFVw8g-rrqW8neTJ7UsxAUu97QCLcBGAsYHQ/s0-e120/zapatos-deportivos-bota-jordan-34.webp",
    producto: "Air Jordan Modelo 34",
    modelo: "Nike",
    precio: 153,
    colores: [
        {
        color: "Púrpura"
        },
        {
        color: "Rojo"
        },
        {
        color: "Verde"
        }
    ]
}

4) Extraer datos del json

Para acceder a los datos json, usaremos <b:with>

Nota: estoy utilizando la plantilla canvas de zkreations y solo mostraré los datos en los posts. En otras plantillas debes insertar el código donde corresponda mostrarse el widget Blog1.

Insertar CODE, HTML o PHP:
  <b:loop index='i' values='data:post.enclosures' var='enclosure'>
      <b:with expr:value='data:enclosure.mimeType' var='producto'>  

      <b:if cond='data:producto.imagen'>
          <img expr:src='data:producto.imagen'/>
      </b:if>
      <br/>
        
      <b:if cond='data:producto.producto'>
          Producto: <b:eval expr='data:producto.producto'/>
      </b:if>
      <br/>
        
      <b:if cond='data:producto.modelo'>
        Modelo: <b:eval expr='data:producto.modelo'/>
      </b:if>
      <br/>
        
      <b:if cond='data:producto.precio'>
          Precio: <b:eval expr='data:producto.precio'/>$
      </b:if> 
      <br/> 
      <br/> 
        
      <b:if cond='data:producto.colores'> 
      Colores:
      <b:loop values='data:producto.colores' var='colores'>
          <li><b:eval expr='data:colores.color'/></li>
      </b:loop> 
      </b:if>

       </b:with>
      </b:loop>

Cuando lo rendericemos tendremos:

zapatos-deportivos-bota-jordan-34.webp

Producto: Air Jordan Modelo 34
Modelo: Nike
Precio: 153$

Colores:
Púrpura
Rojo
Verde

Nota: el archivo adjunto es la plantilla del tutorial, pueden instalarla en un blog de pruebas y luego buscar la siguiente línea <!--{{ Posts }}--> para ver como funciona.
 

Adjuntos

Gracias por compartir esta valiosa información. Estoy buscando algún método para integrar JSON API en publicaciones de blog y los productos se publican automáticamente.
 
en que aplicacion se puede utilizar esto?
 
Empleándolo bien, se podría hacer plantillas muy pero muy buena, la personalización sería muy buena.
 
Gracias por compartir 👌
Empleándolo bien, se podría hacer plantillas muy pero muy buena, la personalización sería muy buena.
Pensé lo mismo, se pueden hacer ajustes buenos personalizando bien una plantilla.
 
Muy buen aporte. Felicitaciones.
 
Atrás
Arriba