Si desea seleccionar el contenido de otras personas de las redes sociales o simplemente hacer que su propio contenido visual de redes sociales trabaje más para su estrategia de contenido general, necesita saber cómo incrustar código HTML en su blog o sitio web.
Pero espere 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 analizar los conceptos básicos.
¿Qué significa incrustar?
Insertar significa integrar contenido externo en otro sitio web o página. Incrusta algo cuando coloca un bloque de código, llamado código de inserción, 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 que se utilizan en la web para diseñar y diseñar páginas web.
A menudo ves este código cuando estás en el «back-end» de la publicación de tu blog. Allí es donde agregará su código de inserción.
¿Qué es un código de inserción?
Un código de inserción es un bloque de HTML que se coloca en otra página y muestra un elemento visual (un video, publicación en redes sociales, formulario o página) de otro sitio web o fuente. Puede incrustar videos de YouTube, publicaciones de Twitter, GIF y otros objetos multimedia en otro sitio web.
La mayoría de los sitios web sociales y multimedia tienen la opción de generar un código de inserción directamente en cada publicación individual. A continuación, se muestra un ejemplo de un código de inserción para un video de HubSpot en YouTube:
<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.
Cómo agregar código HTML para insertar a su sitio
- Vaya a la publicación social o página web que desea insertar.
- Genere el código de inserción usando las opciones de la publicación.
- Si corresponde, personalice la publicación incorporada, como la altura y el ancho del elemento.
- Resalta el código de inserción y luego cópialo en tu portapapeles.
- En su sistema de gestión de contenido, abra su visor HTML.
- Pegue el fragmento de HTML que acaba de copiar en la ventana del visor de HTML. Luego haga clic en ‘Aceptar’ o ‘Guardar’.
- ¡Finalizado! Ahora ha incrustado contenido en su sitio web o blog.
A continuación, cubrimos estos pasos con más detalle para cada plataforma. En general, querrás:
- Genere el código de inserción.
- Acceda a su sistema de administración de contenido y pegue el código de inserción en su visor HTML.
- ¡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 insertar una publicación de Facebook, haga lo siguiente:
- Navega a Facebook en tu navegador de escritorio y ve a la publicación que te gustaría incrustar.
- 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 Copiar código.
- ¡Finalizado! Tienes tu código de inserción.
Insertar una publicación de Instagram
¿Quieres insertar 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.
- Haga clic en los tres puntos en la esquina superior derecha de la publicación.
- Aparecerá una ventana emergente con varias opciones. Hacer clic Empotrar, la penúltima opción.
- Aparecerá una ventana emergente con su código de inserción. Tiene la opción de incluir o excluir el título.
- 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 las publicaciones de su blog de forma gratuita.
Para hacerlo, siga los siguientes pasos:
- Navegue hasta el video que le gustaría incrustar 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 posibilidad de compartir la publicación con otras redes sociales. Hacer clic Empotrar.
- YouTube creará un código de inserción, que puede 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 integrarse.
Insertar un tweet
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 insertar una publicación de Twitter, haga lo siguiente:
- En un navegador de escritorio, navega hasta la publicación que te gustaría insertar.
- Haga clic en los tres puntos en la esquina superior derecha de la publicación.
- Aparecerá un menú desplegable. Hacer clic Insertar Tweet.
- Twitter lo llevará a una página externa en publish.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 integrarse en su sitio.
Hay otra forma de generar un código de inserción para Twitter. Ir a publish.twitter.com e inserte la URL de la publicación que desea insertar. 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 a su perfil de Pinterest y ayudarlo a aumentar sus seguidores 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 justo al lado de la imagen (o debajo de la imagen, si está utilizando el sitio web móvil).
- En el menú desplegable, haga clic en Obtener 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.
Insertar una presentación de SlideShare
Si bien las presentaciones de SlideShare no son tan populares en estos días, aún pueden ser una útil herramienta multimedia para darle vida a las publicaciones y páginas de blogs. A continuación, le indicamos cómo insertar una presentación de SlideShare:
- Vaya a la presentación de SlideShare que le gustaría incorporar.
- Hacer clic Cuota bajo la presentación.
- En la misma ventana donde aparece la presentación, verá 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 de inserción y la diapositiva en la que 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.
Insertar una página web externa
¿No quieres insertar una publicación social sino una página web? Puede incrustar una página web externa utilizando el iframe Etiqueta HTML.
Todos los códigos de inserción, incluidos los de los sitios sociales, utilizan etiquetas iframe. Esto es lo que parecen:
<frame src="https://blog.hubspot.com/marketing/url" title="description" ></iframe>
Puede utilizar estas mismas etiquetas para incrustar una página web externa. Así es cómo:
- Navegue a la página web que le gustaría 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 de iframe. No olvide incluir https: // al principio de su URL y colocar el enlace dentro de las 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 pueda encontrar el visor HTML con pasos similares. Repasaremos cómo puede hacerlo en CMS Hub 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 HubSpot, navega hasta Márketing > Sitio web > Blog. Si planea agregar el código a la página de un sitio web, navegue hasta Márketing > Sitio web > Páginas del sitio web.
- Busque la publicación o la página a la que le gustaría agregar el código de inserción. Coloca el cursor sobre él y haz clic en Editar.
- Haga clic en el módulo donde le gustaría 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 en el menú desplegable.
- Aparecerá una ventana emergente. Pegue el código del 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. Luego 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 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.
- Pega tu código de inserción donde quieras que aparezca el módulo.
3. ¡Terminado! Tiene contenido incrustado en su sitio web o blog.
Una vez que recargues la página, aparecerá tu 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 lograr 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 HTML y observe cómo aumenta la participación de los usuarios.
Nota del editor: esta publicación se publicó originalmente en septiembre de 2013 y se ha actualizado para que sea más completa.