Cómo centrar las publicaciones de Instagram en tus artículos

3 septiembre, 2017Cristina Ortiz

 

El principal problema que he me encontrado a la hora de insertar las fotos de Instagram en los artículos de mi blog, es la posibilidad de centrarlos. Por defecto, el post de Instagram se posiciona a la izquierda de nuestro artículo y estéticamente no es la mejor manera de añadirlo.

Hay diferentes formas de insertar publicaciones de Instagram, pero esta es la mejor forma para hacer que tu tráfico vaya desde tu blog a la red social de fotos por excelencia, además, también le das la posibilidad al usuario, de que además visite tu perfil y se convierta en un nuevo seguidor. También existe la posibilidad de insertar la publicación a través de su URL.

Cómo encontrar el código de inserción de la publicación de Instagram

Lo primero que tenemos que hacer es elegir la publicación de Instagram que queremos insertar en cualquier parte de nuestro artículo del blog. Para ello, iremos a dicha publicación y le daremos en la parte inferior derecha, donde aparecen tres puntos. Al clicar allí, se nos abre una ventana emergente y seleccionamos “Código de inserción“:

insertar foto instagram en articulo

 

Una vez seleccionamos esta opción, nos aparece esto:

codigo de insercion publicacion instagram

Podéis elegir incluir el título y os aparecerá la imagen + el texto que acompaña a la publicación (junto los # utilizados, etc), o bien, omitir el título.

En el caso que os explico, he copiado el código sin incluir el título, puesto que estéticamente queda algo mejor, sobre todo si sois de los que utilizan muchos hashtags o acompañáis la foto de bastante texto.

Una vez copiado el código, nos vamos a nuestra entrada del blog, localizamos el sitio donde queremos que se muestre y en la parte de HTML, lo copiamos.

copiar codigo de insercion foto instagram

Ahora bien, si queremos modificar tanto el tamaño como centrarlo en el texto, tendremos que hacer algunas pequeñas modificaciones en este código, ya que por defecto se muestra a un tamaño de imagen concreto (bastante grande) y alineado a la izquierda del texto de nuestro artículo.

Para ello, solo tenemos que modificar la parte en rojo de este código de inserción que os añado a continuación:

<div align=”center”><blockquote class=”instagram-media” data-instgrm-version=”7″ 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:658px; padding:0; width:99.375%; width:-webkit-calc(100% – 2px); width:calc(100% – 2px);”><div style=”padding:8px;”> <div style=” background:#F8F8F8; line-height:0; margin-top:40px; padding:34.81894150417828% 0; text-align:center; width:100%;”> <div style=” background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;”></div></div><p style=” color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;”><a href=”https://www.instagram.com/p/BYh_j5whu6S/” style=” color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;” target=”_blank”>Una publicación compartida de Viajes Mochileros (@viajesmochileros)</a> el <time style=” font-family:Arial,sans-serif; font-size:14px; line-height:17px;” datetime=”2017-09-02T08:00:03+00:00″>2 de Sep de 2017 a la(s) 1:00 PDT</time></p></div></blockquote></div>
<script async defer src=”//platform.instagram.com/en_US/embeds.js”></script>

El valor de max-width:658px; que le demos, determinará el tamaño de la imagen que se muestre en el artículo

Y el código que incluimos en el inicio y final del código de inserción (seguido del cierre de la etiqueta </blockquote>): <div align=”center”> … </div>, va a darle la orden de que se muestre con una alineación centrada.

Leave a comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

cuatro × dos =

Anterior Siguiente