Saltar al contenido

Cómo agregar códigos de inserción HTML a su sitio web [Quick Tip]

febrero 16, 2022
embed codes.jpegkeepProtocol

Si desea seleccionar el contenido de otros de las redes sociales o simplemente crear el suyo propio contenido visual de redes sociales trabajar más duro para su estrategia de contenido general, necesita saber cómo incrustar código HTML en su blog o sitio web.→ Haga clic aquí para descargar nuestra guía gratuita sobre los fundamentos del marketing digital  [Download Now].

Pero espera un segundo… antes de entrar en el meollo de este consejo, ¿qué diablos significa «incrustar»? ¿Y qué es HTML? Si no sabe cómo codificar, no se preocupe: incrustar contenido externo es extremadamente fácil. Tomemos un segundo para desglosar los conceptos básicos.

¿Qué significa incrustar?

Incrustar significa integrar contenido externo en otro sitio web o página. Incrustas algo cuando colocas un bloque de código, llamado código incrustado, en el editor HTML de otro sitio web. Cuando presiona ‘Guardar’ o ‘Publicar’, los medios se muestran en la página publicada.

El contenido incrustado se referencia con HTML. HTML es uno de los lenguajes más básicos utilizados en la web para diseñar y maquetar páginas web.

A menudo ve este código cuando está en el «back-end» de su publicación de blog. Allí es donde agregará su código de inserción.

La mayoría de los sitios web sociales y multimedia tienen una opción para generar un código de inserción directamente en cada publicación individual. Este es un ejemplo de un código de inserción para un video de YouTube de HubSpot:

 
<iframe width="560" height="315" src="https://www.youtube.com/embed/eGUEAvNpz48" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Y aquí está el resultado incrustado.

¿Quieres hacer lo mismo en las publicaciones y páginas de tu blog? Repasemos cómo puede generar un código de inserción para los principales sitios sociales.

A continuación, cubrimos estos pasos con más detalle para cada plataforma. En general, querrás:

  1. Genere el código de inserción.
  2. Acceda a su sistema de administración de contenido y pegue el código de inserción en su visor HTML.
  3. ¡Terminado! Tiene contenido incrustado en su sitio web o blog.

Vamos a sumergirnos en cada paso.

1. Genere el código de inserción.

Antes de incrustar contenido externo, primero debe generar un código de incrustación para la publicación o página que desea incrustar en su sitio web.

Repasaremos cómo puede hacerlo en la mayoría de las principales redes sociales y de contenido.

Insertar una publicación de Facebook

Para incrustar una publicación de Facebook, haga lo siguiente:

  • Navegue a Facebook en su navegador de escritorio y vaya a la publicación que desea insertar.
  • Haga clic en los tres puntos en la esquina superior derecha de la publicación.
  • En el menú desplegable, haga clic en Empotrar.

Botón de código incrustado en una publicación de Facebook

  • Aparecerá una ventana emergente, donde tiene la opción de incluir la publicación completa y acceder a la configuración avanzada. Para los principiantes, recomendamos dejar las opciones como están y simplemente hacer clic en Copiar código.

Opciones de código incrustado en una publicación de Facebook

  • ¡Terminado! Tienes tu código de inserción.

Insertar una publicación de Instagram

¿Quieres incrustar una publicación de Instagram? El proceso es similar al de Facebook. Tenga en cuenta que solo puede insertar publicaciones desde la versión de escritorio y no desde la aplicación móvil.

  • Haz clic en los tres puntos en la esquina superior derecha de la publicación.
  • Aparecerá una ventana emergente con varias opciones. Hacer clic Empotrarla penúltima opción.

insertar-instagram-post

  • Aparecerá una ventana emergente con su código de inserción. Tiene la opción de incluir o excluir el pie de foto.
  • Una vez que haya terminado de personalizar sus opciones, haga clic en Copie el código insertado.

Copie la ventana emergente del código de inserción en Instagram

  • ¡Completo! Tienes tu código de inserción de Instagram.

Insertar un video de YouTube

Los videos de YouTube pueden llevar las publicaciones de su blog al siguiente nivel, y la mejor parte es que puede incrustar su gran cantidad de contenido en sus publicaciones de blog de forma gratuita.

Para hacerlo, siga los siguientes pasos:

  • Navegue hasta el video que desea insertar en su sitio web.
  • Debajo del video, junto a donde se encuentran los Me gusta, haz clic en Cuota.

Botón Compartir debajo de un video de YouTube

  • Aparecerá una ventana emergente con varias opciones, incluida la de compartir la publicación en otras redes sociales. Hacer clic Empotrar.

Compartir opciones para un video de YouTube

  • YouTube creará un código para insertar, que puedes personalizar. Puede iniciar el video en un punto determinado u ocultar los controles del reproductor.
  • Después de elegir sus opciones, haga clic en Dupdo en la esquina inferior derecha de la ventana emergente.

Código de inserción generado para un video de YouTube

  • ¡Completo! Su video de YouTube está listo para insertarse.

Insertar un tuit

Si inserta un Tweet en las páginas de su sitio web o blog, puede generar participación para su perfil de Twitter sin depender de sus seguidores de Twitter. Los visitantes del sitio web también pueden interactuar con su contenido de Twitter.

Para incrustar una publicación de Twitter, haga lo siguiente:

  • En un navegador de escritorio, navegue hasta la publicación que desea insertar.
  • Haga clic en los tres puntos en la esquina superior derecha de la publicación.
  • Aparecerá un menú desplegable. Hacer clic Insertar tuit.

Insertar botón Tweet en Twitter

  • Twitter te llevará a una página externa en publicar.twitter.com, donde puede personalizar aún más el aspecto del Tweet antes de insertarlo en su sitio. Por ejemplo, puede configurarlo en modo oscuro y cambiar el idioma de visualización del Tweet.

Opciones para incrustar un Tweet

  • Una vez que lo haya personalizado, haga clic en Actualizar.
  • Hacer clic Copiar código.
  • ¡Terminado! El Tweet está listo para insertarse en su sitio.

Hay otra forma de generar un código de inserción para Twitter. Ir publicar.twitter.com e inserte la URL de la publicación que desea insertar. Luego, Twitter generará el código de inserción y puedes personalizarlo usando el mismo proceso que el último método.

Insertar una publicación de Pinterest

Incrustar una publicación de Pinterest puede llevar a los usuarios del sitio web de regreso a su perfil de Pinterest y ayudarlo a aumentar su seguimiento de Pinterest. Para comenzar, haga lo siguiente:

  • Navega hasta la publicación de Pinterest que te gustaría insertar.
  • Haga clic en los tres puntos junto a la imagen (o debajo de la imagen, si está utilizando el sitio web móvil).
  • En el menú desplegable, haga clic en Obtener el código de inserción de PIN.

Botón

  • Aparecerá una ventana emergente con el código de inserción. Tiene la opción de crear un pin incrustado pequeño, mediano, grande o extra grande.

Código de inserción generado para un pin en Pinterest

  • Una vez que personalice el tamaño, resalte el código y haga clic en Comando + C o CTRL + C.
  • ¡Terminado! Tu Pin está listo para insertarse.

Incrustar una presentación de SlideShare

Si bien las presentaciones de SlideShare no son tan populares en estos días, aún pueden ser una herramienta multimedia útil para animar publicaciones y páginas de blogs. Aquí se explica cómo incrustar una presentación de SlideShare:

  • Ve a la presentación de SlideShare que quieras insertar.
  • Hacer clic Cuota bajo la presentación.
  • En la misma ventana donde aparece la presentación, verás la opción de compartirla a través de las redes sociales. El código de inserción estará debajo de eso.

Comparta las opciones de SlideShare con un código de inserción

  • Elija el tamaño de la ventana incrustada y en qué diapositiva desea que comience la presentación.
  • Resalte el código de inserción y haga clic en Comando + C o CTRL + C.
  • ¡Listo! Ahora puede incrustar la presentación de SlideShare en una página web o publicación.

Incrustar una página web externa

¿No quieres incrustar una publicación social sino una página web? Puede incrustar una página web externa usando el iframe etiqueta HTML.

Todos los códigos de inserción, incluidos los de los sitios sociales, usan etiquetas iframe. Esto es lo que parecen:

 
<frame src="https://blog.hubspot.com/marketing/url" title="description" ></iframe>

Puede usar estas mismas etiquetas para incrustar una página web externa. Así es cómo:

  • Vaya a la página web que desea insertar en su sitio.
  • Abre la aplicación de bloc de notas en tu computadora. Pegue el siguiente código en él:
 
<iframe src="https://blog.hubspot.com/marketing/url" title="description" width=”” height=””></iframe>
  • Regrese a la página web y copie la URL.
  • Pegue la URL completa donde dice URL en su código iframe. No olvides incluir https:// al principio de su URL y colocar el enlace entre comillas. Así es como debería verse su código:
 
<iframe src="https://example.com/embedded-page" title="Embedded Page Title" width=”” height=””></iframe>
  • Cambie el ancho y la altura del marco si lo desea.
 
<iframe src="https://example.com/embedded-page" title="Website Page Title" width=”750” height=”500”></iframe>
  • Copie toda la línea de código. Después, la página web está lista para integrarse en su sitio web.

2. Acceda a su sistema de administración de contenido y pegue el código de inserción en su visor HTML.

Aunque cada CMS es diferente, probablemente puedas encontrar el visor HTML con pasos similares. Repasaremos cómo puedes hacerlo en Centro de CMS y WordPress.

Centro de CMS

En CMS Hub, en realidad no necesita agregar su contenido incrustado usando el editor HTML (aunque tiene la opción de hacerlo). Así es cómo:

  • En tu panel de control de HubSpot, navega hasta Márketing > Sitio web > Blog. Si planea agregar el código a la página de un sitio web, vaya a Márketing > Sitio web > Páginas del sitio web.

Botones de Blog y Páginas del sitio web en HubSpot CMS

  • Busca la publicación o la página a la que te gustaría agregar el código para insertar. Pase el cursor sobre él, luego haga clic en Editar.

cms-hub-website-page-list

  • Haga clic en el módulo donde desea agregar el código de inserción. Aparecerá una barra de opciones cerca de la parte superior de la pantalla. En el lado derecho, haga clic en Insertar.
  • Escoger Empotrar del menú desplegable.

Botón Insertar en HubSpot CMS

  • Aparecerá una ventana emergente. Pegue el código iframe en la barra de texto.

Insertar ventana emergente incrustada en HubSpot CMS

  • Hacer clic Insertar.
  • ¡Terminado! Puede editar el ancho y el alto del contenido incrustado para personalizarlo aún más.

Para acceder al editor HTML, complete los pasos 1-3 anteriores. En la barra de opciones superior, haga clic en Avanzado > Código fuente. A continuación, puede pegar su código de inserción manualmente. Tenga en cuenta que el resultado final es el mismo.

WordPress

Para pegar un código de inserción en su sitio web de WordPress, siga los siguientes pasos:

  • Acceda a su área de administración y vaya a cualquiera Paginas o Publicaciones.
  • Haga clic en el título de la publicación a la que desea agregar el código de inserción. Esta acción lo llevará al editor de publicaciones.
  • Haga clic en el Texto pestaña en la esquina superior derecha del editor de texto.

Editor de texto sin formato de WordPress

  • Pegue su código de inserción donde desea que aparezca el módulo.

3. ¡Terminado! Tiene contenido incrustado en su sitio web o blog.

Una vez que vuelva a cargar la página, aparecerá su publicación social incrustada.

Agregue contenido incrustado para aumentar la participación del usuario

Al incorporar contenido externo en sus páginas y publicaciones, puede aumentar la participación en su sitio web y hacer que los visitantes de su sitio interactúen con el contenido que publica en las redes sociales. La mejor parte es que es fácil de hacer: simplemente genere el código de inserción, péguelo en su editor de HTML y observe cómo crece la participación de sus usuarios.

Nota del editor: esta publicación se publicó originalmente en septiembre de 2013 y se actualizó para que sea más completa.

Nueva llamada a la acción