Cómo insertar contenido externo

El proceso de insertar contenido de terceros en un archivo HTML suele ser bastante sencillo y generalmente está explicado en la página de cada red social o plugin. Agregar este tipo de contenidos no sólo va a enriquecer nuestro sitio, sino que a la vez vamos a poder aumentar la interactividad con las redes sociales y de este modo fomentamos el tráfico a la página.

Insertar videos de Youtube

1. Elegimos el video y debajo damos click a la opción “compartir“.

Compartir video de Youtube

2. Dentro de la opción compartir aparecen nuevas opciones. Vamos a elegir “insertar“. Ahí nos va a proporcionar un código que vamos a copiar y pegar en el lugar que tengamos asignado, puede ser dentro de una <div>.

La etiqueta <iframe>

Esta etiqueta representa un espacio a través del cual se puede visualizar contenido externo a nuestro sitio. Entre los atributos que tiene el principal es src que muestra la url de la página incrustada. También suele tener los atributos width y height de html para asignarle una medida.

Volviendo a nuestro video de YouTube la etiqueta que nos proporciona es similar a ésta:

<iframe width="560" height="315" src="https://www.youtube.com/embed/KnLPPaK-GzI?si=IkwdVJ0I4ZtfuKF1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Probablemente las medidas que vienen por defecto no se adapten a nuestro trabajo, asi que conviene borrar estos atributos y asignarle un class a través del cual podamos personalizar nuestro video.

<iframe class="video" src="" ... ></iframe>

No es sencillo hacer que un video sea responsive (que se adapte en ancho y alto a los diferentes dispositivos). Bootstrap lo hace muy bien y también existen plugins que resuelven la vista de un video en un popup responsive como este: https://dimsemenov.com/plugins/magnific-popup/

Insertar Mapa de Google

1. Elegimos el punto en el mapa que queremos insertar. Y vamos a la opción “compartir”.

Botón compartir en Google Maps

2. Dentro de compartir hacemos click sobre la opción “Incorporar mapa”. Nuevamente el sitio nos proporciona el código de una etiqueta <iframe> que debemos copiar y pegar en el lugar asignado en nuestro archivo HTML. En esta ventana se nos proporcionan medidas predeterminadas que por lo general no se adaptan a nuestras necesidades, asi que, como en el caso de los videos, es conveniente borrar los atributos width y height y agregar un class para definir las medidas por css.

Ejemplo de código HTML de mapa de Google

Insertar una publicación de Instagram

Ir al menu de la derecha de la publicación, y hacer clic en “Código de inserción”. Copiar ese código, y pegarlo en nuestro HTML. En este caso el contenido se ve cuando el archivo HTML está subido al servidor de hosting.

Código de inserción de Instagram

Insertar plugins, widget o botones de Facebook

Para insertar alguno de los plugins o botones de Facebook, tenemos que abrir la siguiente página: https://developers.facebook.com/docs/plugins. Es importante aclarar que todas estas funcionalidades sirven haciendo referencia a una fan page y que no funcionan con perfiles personales. En la columna izquierda aparecen todas las opciones, donde están entre otras el botón “Me Gusta”, el botón de “Compartir” la opción de “Comentarios” o el “Plugin de Página” entre otros. Seguir los pasos hasta obtener el código HTML.

Como vimos la inserción de contenido de terceros es bastante sencilla, la mayoría de las redes sociales tienen la posibilidad de insertar sus botones o widgets.

Carrito de compra
USD Dólar de los Estados Unidos (US)