Cómo hacer que tu publicación de Instagram quede centrada y se vea profesional
Si estás buscando cómo centrar una publicación de Instagram en tu sitio web o blog, has llegado al lugar correcto. A veces, cuando insertamos una publicación de Instagram, no queda tan alineada como nos gustaría. Pero tranquilo, hay una solución fácil y rápida para esto. En este artículo te explicaré paso a paso cómo lograrlo, y te daré algunos trucos para ajustar el tamaño de las publicaciones.
Paso 1: Inserta el código de la publicación de Instagram
Lo primero que debes hacer es obtener el código de inserción de la publicación que quieres agregar.
- Ve a la publicación de Instagram que deseas insertar.
- Haz clic en el menú de tres puntos en la parte superior derecha de la publicación.
- Selecciona «Código de inserción» y copia el código que aparece.
Pega este código en tu editor de texto o en el HTML de tu página web. El código se verá algo así:
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/XXXXXXXXXX/" style="background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"></blockquote>
<script async src="//www.instagram.com/embed.js"></script>Sin embargo, al pegar este código, notarás que la publicación puede quedar alineada a la izquierda. Para centrarla, sigue leyendo.
Paso 2: Cómo centrar la publicación de Instagram
Para centrar la publicación, solo necesitas envolver el código de la publicación en un contenedor <div> con la propiedad de alineación. Así:
<div align="center">
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/XXXXXXXXXX/" style="background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"></blockquote>
<script async src="//www.instagram.com/embed.js"></script>
</div>Con este simple ajuste, tu publicación de Instagram debería aparecer centrada en tu página web.
Posibles problemas y soluciones
En algunos casos, puede que este método no funcione debido a las propiedades de estilo de tu página. Si es así, puedes usar CSS para forzar la alineación centrada:
<style>
.instagram-media {
display: block;
margin: 0 auto;
}
</style>Este código de CSS asegura que cualquier elemento con la clase instagram-media quede centrado.
Ajusta el tamaño de la publicación de Instagram
A veces, la publicación insertada puede ser demasiado grande o pequeña para tu página. Puedes ajustar el tamaño modificando las propiedades de ancho y alto del código.
Ejemplo:
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/XXXXXXXXXX/" style="width:50%; height:auto;">
</blockquote>Alternativa con iframe
Si los métodos anteriores no te funcionan o quieres más control sobre la publicación, también puedes usar un iframe. Este es un ejemplo de cómo se haría:
<div align="center">
<iframe src="https://instagram.com/p/XXXXXXXXXX/embed/" width="400" height="480" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
</div>Con este enfoque, puedes ajustar los valores de width y height según lo necesites para que la publicación se vea bien en tu página.
