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

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.

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=" 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. ¡Finalizado! 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.

• 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.

• ¡Finalizado! 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.

• 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.

• ¡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.

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

• 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.

• ¡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.

• 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.

• Una vez que lo haya personalizado, haga clic en Actualizar.
• Hacer clic Copiar código.
• ¡Finalizado! 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.

• 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.

• Una vez que personalice el tamaño, resalte el código y haga clic en Comando + C o CTRL + C.
• ¡Finalizado! 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.

• 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 marco flotante 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=" 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=" 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=" title="Embedded Page Title" width=”” height=””></iframe>

• Cambie el ancho y la altura del marco si lo desea.

 
<iframe src=" 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.

• 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.

• 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.

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

• Hacer clic Insertar.
• ¡Finalizado! 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.

• 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.

Agregar…