Cómo compartir audios/videos en Facebook

Hace tiempo nos surgió la curiosidad de saber cómo hacen algunos sitios (como por ejemplo, YouTube, Vimeo, Bandcamp, etc) para que al compartir contenido multimedia propio (audio o video) en Facebook cualquier usuario pueda hacer click en la imagen y reproducirlo directamente, sin necesidad de abrir una nueva página.

Comenzamos a investigar y lo único que encontramos (en este blog) al respecto fue la explicación del protocolo Open Graph, el cual se utiliza para configurar la información de meta-tags que querramos que sea accedida por Facebook al momento de que alguien comparta una URL de nuestro sitio (por ejemplo, http:\\www.comunidadfusa.com).

Configurando los meta-tags OG en nuestro sitio

Existe una excelente herramienta (Debugger) provista por Facebook para evaluar los meta-tags de nuestro sitio y verificar su completitud.

Por ejemplo, si ingresamos «http:\\www.comunidadfusa.com» y analizamos el contenido obtendremos lo siguiente.

Como se puede observar en la sección Object Properties se visualiza cómo Facebook interpreta los meta-tags de nuestro sitio y en la sección Raw Open Graph Document Information cuáles son los meta-tags OG que tenemos configurados en el <header> de nuestro sitio.

Un punto importante a tener en cuenta es que para que Facebook lea los meta-tags configurados en nuestro sitio es necesario configurar el tag <html> de la siguiente forma:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">

Cómo obtener tu código identificador (ID) de Facebook

El valor que se debe utilizar en el tag <meta property=»fb:admins» content=»YOUR-FACEBOOK-ID» /> corresponde al Código identificador de el/los usuario/s (ojo, usuarios y no páginas eh!) administrador/es del sitio. Con lo cual para obtener este código deberás ingresar en http://graph.facebook.com/USERNAME y reemplazar USERNAME por tu nombre de usuario. En nuestro caso:

{
"id": "100001358048142",
"name": "Comunidad Fusa",
"first_name": "Comunidad",
"last_name": "Fusa",
"link": "http://www.facebook.com/comunidadfusaoficial",
"username": "comunidadfusaoficial",
"gender": "male",
"locale": "es_LA"
}

Hasta acá pudimos configurar los meta-tags OG en nuestro sitio sin mucha complicación, sumado a que pudimos verificar su correctitud ingresando en el Debugger de Facebook. Ojo, si hacen pruebas directamente compartiendo la URL de su sitio en Facebook no siempre van a visualizar la información correcta, ya que existe algún tipo de cache que utiliza Facebook cuando compartimos una URL.

Cómo compartir contenido multimedia

Utilizando el potencial de los meta-tags OG podemos configurar contenido multimedia (audio o video) para compartir en Facebook directamente. En nuestro caso hemos utilizado la siguiente configuración:


<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Escuchá a Banda demo en Comunidad Fusa</title>
<meta property="fb:admins" content="100001358048142" />
<meta property="og:title" content="Escuchá a Banda demo en Comunidad Fusa" />
<meta property="og:type" content="band" />
<meta property="og:image" content="URL_IMAGEN_BANDA/BANDA_201.jpg" />
<meta property="og:url" content="URL_COMPARTIR_AUDIO" />
<meta property="og:site_name" content="Comunidad Fusa" />
<meta property="og:description" content="El under suena en lo mas alto de la mano de Banda demo y su tema Tema demo" />
<meta property="og:video" content="URL_FLASH"/>
<meta property="og:video:height" content="40"/>
<meta property="og:video:width" content="400"/>
<meta property="og:video:type" content="application/x-shockwave-flash"/>

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
</head>
<body>
<p>Serás redirigido a Banda demo en Comunidad Fusa.</p>

<script language="javascript" type="text/javascript">
$(function(){
window.location.href = "URL_BANDA_DEMO";
});
</script>
</body>
</html>

Pasaremos a explicar cada una de las variables que deberás configurar en tus meta-tags OG:

  • URL_IMAGEN_BANDA:  representa la URL absoluta (http://www.misitio.com/images… por ejemplo) de la imagen que se va a visualizar en la publicación de Facebook (y a la que se le va a poder hacer click en el icono de «play»).
  • URL_COMPARTIR_AUDIO: representa la URL absoluta de la página que el usuario deberá compartir en Facebook para que se acceda a los meta-tags OG. Por ejemplo http://www.misitio.com/compartir/contenido/og/1212.
  • URL_FLASH: acá está la clave de todo esta cuestión ya que se deberá incluir la URL absoluta del archivo SWF que Facebook incluirá en la publicación luego de que un usuario haga click en el icono de «play». Por ejemplo, http://www.misitio.com/flash/reproductor.swf.
    Importante: en esta publicación incluímos un player (archivo SWF y su correspondiente archivo FLA)  para que puedas utilizar rápidamente sin necesidad de crearte uno propio.
    Importante 2:  en nuestro caso hemos decidido enviar por parámetros query string la URL del archivo MP3 a reproducir y el título que se visualizará en el reproductor. Por ejemplo, http://www.misitio.com/flash/reproductor.swf?url=URL_ABSOLUTA_MP3&text=NOMBRE_TEMA
  • URL_BANDA_DEMO: representa la URL absoluta a la que será redirigido cualquier visitante que intente ingresar de forma manual a la URL_COMPARTIR_AUDIO. Ya que solo permitiremos que sea accedida por Facebook para la correcta lectura de los meta-tags.

 

2 opiniones en “Cómo compartir audios/videos en Facebook”

    1. Facebook cambió su interface y lo que posteamos ya no
      funciona, hay que investigar un toque mas. Si encontras la solución,
      avisanos! Asi lo arreglamos nosotros tambien.
      Un abrazo!

Comentarios cerrados.