Cómo ajustar el tamaño de las fotos de Instagram usando web embed

Hace apenas un par de semanas te presentábamos la nueva función web embed de Instagram para los perfiles web, con la que ya es posible insertar fotos y vídeos de Instagram en cualquier web sin necesidad de instalar aplicaciones de terceros.

Como la tendencia es que cada vez usemos más los dispositivos móviles para navegar, debemos también adaptar el contenido de nuestros sitios webs a las dimensiones de esos dispositivos y por esa razón vamos a explicarte en este artículo cómo ajustar el tamaño de las fotos de Instagram usando web embed para que se visualicen correctamente en cualquier dispositivo.

2 Formas de hacer que tus fotos de Instagram encajen en cualquier web.

Puede que en un principio no le des importancia a eso de tener que modificar el código web embed de Instagram para que las fotos encajen bien en todos las webs o en cualquier tamaño de pantalla. Total, si Instagram nos da el código así, para que cambiarlo.

Pues básicamente por una sencilla razón, de nada sirve insertar fotos de Instagram en tu web si la inmensa mayoría de tus visitantes no las pueden ver o las ven cortadas. Así que mejor echa un vistazo a esto que te vamos a enseñar y empieza a aplicarlo en todas las fotos que insertes de ahora en adelante.

• Modificando el código web embed. Para ajustar el tamaño de la foto a través del código fuente, simplemente tienes que modificar los valores de los parámetros «width» y «height«, siempre teniendo en cuenta no romper la relación entre el ancho y el alto para no deformar la foto. A continuación te mostramos un ejemplo de como sería el código original y como quedaría después de ajustar el tamaño a la mitad.
  • Código original:
    
  • Código modificado:
    

  Así quedaría la foto después de ajustar el tamaño a la mitad.
  

• Usando la aplicación web Embed Responsively. Esta opción tiene la gran ventaja de que el tamaño de la foto se ajusta dinámicamente a las dimensiones de la pantalla. Lo único que tienes que hacer es:
  1. Copiar la url de la foto de Instagram que quieras insertar. La url tendrá una forma parecida a esta «http://instagram.com/p/b0pXsFIqPy/«
  2. Después ve a la web de Embed Responsively, selecciona Instagram como fuente, pega la url que has copiado antes y haz clic en «Embed«.
     
  3. Para terminar copia el código que se ha generado y pégalo en la sección de tu web donde quieras mostrar la foto.
     

  Este sería el resultado final.

  A priori te puede parecer que no cambia nada de copiar el código directamente de Instagram, pero si haces la prueba con tu navegador y vas reduciendo el tamaño de la ventana, verás como también va cambiando el tamaño de la foto. Esa es la gran ventaja de la que te hablábamos al principio, sobre todo si buscas que tu foto se vea en el tamaño ideal para cada dispositivo; smartphone, tablet o PC.

Esperamos que después de leer este artículo te haya quedado claro la importancia de modificar las dimensiones de las fotos en función del dispositivo y cómo es posible ajustar el tamaño de las fotos de Instagram usando web embed.