Recibir mensajes de facebook mediante tu sitio web

Seguramente alguna vez te preguntaste como recibir mensajes en tu página del facebook mediante tu sitio web, algo así como un chat en línea.

Pues para esto la exitosa red social ha habilitado esta función mediante su renovado plugin para páginas web, en  donde no solamente podrás mostrar los likes y las actualizaciones de tu muro, sino ahora también un componente para enviar mensajes directamente a tu fan page y mantener la conversación mediante la aplicación del facebook messenger.

En este árticulo te enseñamos una forma de como agregar esta funcionalidad a tu sitio web.

Para empezar debes crear un botón o enlace, para ello debes ubicar el siguiente código HTML justo debajo de aperturar la tag body:

<a href="/mensajes-facebook.html" target="_blank" id="btn-msg-face">Envíanos un mensaje</a>

Seguidamente agregamos el estilo CSS:

#btn-msg-face{
  position: fixed;
  bottom: 0;
  height: 30px;
  right: 10px;
  min-width: 183px;
  z-index: 16000002;
  background: #1F93DF;
  color: #fff;
  font:bold 12px Verdana;
  line-height: 30px;
  overflow: hidden;
  text-align: center;
}

Con lo cual obtendremos lo siguiente:

boton-chat

Cada vez que el usuario haga click sobre el botón se abrirá una nueva ventana del navegador en donde se cargará el plugin de facebook, para lo cual anexaremos el siguiente código javacript con jquery:

$(document).ready(main);

function main(){
  $('#btn-msg-face').on('click', function(){
    PopupCenter(this.href, this.target, '350','450'); return false;
  });
}

function PopupCenter(url, title, w, h) {
    var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
    var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;

    width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    var left = ((width / 2) - (w / 2)) + dualScreenLeft;
    var top = ((height / 2) - (h / 2)) + dualScreenTop;
    var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

    if (window.focus) {
        newWindow.focus();
    }
}

Finalmente en el archivo “mensajes-facebook.html” colocaremos el código fuente que Page Plugin nos proporciona:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Envíanos un mensaje</title>
	<style>
		body{margin: 0;padding: 0}
	</style>
</head>
<body>
	<div id="fb-root"></div>
  <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.5&appId=xxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/foo" data-tabs="messages" data-width="350" data-height="450" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/foo">
Cargando chat...
</blockquote></div></div>
</body>
</html>

Con todo esto nuestros visitantes podrán interactuar con nuestras empresas mediante facebook :)

chat-facebook

Autor: Alain

Especialista en desarrollo de aplicaciones web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *