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:
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 :)
Tweet
Escrito por Alain para TECNato
Acerca del autor
Artículos destacados
Categorías
Miembros
TECNato
TECNato nace de la idea de crear una comunidad tecnológica, un espacio virtual para compartir conocimientos sobre TIC’s (Tecnologías de la Información y Comunicación).
Hazte miembro
TECNato es libre y abierto a nuevos miembros que estén dispuestos a compartir sus conocimientos en TIC’s, así que no dudes en escribirnos para mas detalles.
Soporte
Diseño Web:
Grupo Sistemas
CMS:
WordPress