Escrito por Eugenia Molinero
El proceso de insertar contenido de terceros 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.
1. Elegimos el video y debajo damos click a la opción "compartir".
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>.
Esta etiqueta representa un espacio a través del cual se puede visualizar otra página, en este caso externa 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/l9uq4RXWSm8" frameborder="0" allowfullscreen></iframe>
Probablemente las medidas que vienen por defecto no se adapten a nuestro trabajo, asi que preferimos borrarle estos atributos y asignarle un class a través del cual podamos personalizar nuestro video.<iframe class="video" src="https://www.youtube.com/embed/l9uq4RXWSm8" allowfullscreen ></iframe>
En el caso de querer ajustar nuestro video por ejemplo a un ancho de columna en porcentaje tenemos que tener en cuenta que podemos usar el width al 100%, pero la altura no se ajusta a proporción por si sola. Así que tenemos que ponerle una altura absoluta (en px) que consideremos adecuada para mantener la proporción.
En el caso de querer que el video sea responsive, podemos usar un plugin de jQuery que permitirá una mejor adaptación del ancho y la altura, una opción es: http://fitvidsjs.com/
1. Elegimos la ubicación del mapa que queremos. Y vamos a la opción "compartir".
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 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 que le borremos los atributos que trae por defecto (width, height, frameborder y style) y le agreguemos un class para darle mediante css, las características que mejor se adapten a nuestro diseño.
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" o el "Plugin de Página" entre otros. Nosotros vamos a usar como ejemplo el botón "Me Gusta".
Dentro de la página del Botón "Me Gusta", vamos a la parte de configuración. Lo principal que vamos a completar en este formulario es la url de la fan page, y luego podemos configurar las diferentes opciones adicionales.
Luego presionamos el botón de "Obtener código", y nos va a abrir una ventana.
En esta ventana nos ofrece el código para insertar el plugin a través de javascript o de un iframe. Vamos a elegir la primera opción que es la recomendada para html5.
Son dos bloques de código que debemos copiar y pegar. El primero lo vamos a pegar debajo de la etiqueta de apertura del <body>, y el segundo bloque de código lo vamos a insertar en el lugar donde queremos que se vea el plugin. Para ver el resultado es necesario subir el sitio al servidor.
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.
