Lo que para unos es fácil para otros es una odisea, y en Bloggin Red todo lo que se pueda enseñar se hará, hoy veremos como integrar publicaciones de Instagram en las entradas, páginas estáticas o simplemente como un gadget en nuestros blogs, aclaro que desde luego sólo funcionará con cuentas que no sean privadas ya que en caso contrario si la cuenta que sigues es privada entonces solo tú podrás ver la foto o vídeo pero los demás no.
¿Y cómo se verá? bueno aquí dejo un ejemplo (Al final explico como ajustar el tamaño de la publicación insertada):
Insertar publicación Instagram en entrada o página estática
1. Sólo se puede insertar haciendo todo desde la versión escritorio de Instagram vamos a la publicación y damos clic en los tres puntos que tiene la misma:
2. Luego saldrá una ventana y allí damos clic en insertar:
3. Copiamos el código que nos dan allí, si deseamos incluir la descripción de la publicación seleccionamos "Incluir pie de foto":
4. Ahora vamos a ir a la pestaña "HTML" de la entrada o página estática donde queremos insertar la publicación y allí pegamos el código:
Finalmente podemos publicar nuestra entrada o dar en vista previa, para así darnos una idea de como saldrá, y sería todo para la entrada o página estática.
Insertar publicación Instagram como un Gadget
5. Ahora insertaremos la publicación de Instagram como gadget en cualquier parte del blog es fácil a partir del código copiado en el paso 3, iremos a Blogger > Diseño > Añadir gadget > HTML/Javascript.
6. Pega el código allí y da clic en guardar, luego observa en tu blog si todo sale bien.
+Aclaraciones y dudas
- La publicación insertada es por defecto muy grande para ajustar el tamaño de la misma en el código buscaremos algo similar a lo siguiente:
Y cambia los números por una medida que consideres justa para tu publicación insertada.max-width:540px; min-width:326px;
- La publicación por defecto no está centrada y estéticamente no se ve bien, así que basta con usar las siguientes etiquetas HTML para centrar el contenido insertado:
<center> Pega aquí el código </center>
Y eso sería todo en este post ¿Alguna duda? comenta.
0 comentarios:
Publicar un comentario