icono_twiter
José María Masip Díaz

Técnico en artes gráficas, experto en preimpresión y webmaster.

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2012-09-27

Tutorial visitado 6.148 veces Descargar en PDF
Muro de Facebook: cómo publicarlo en tu web

Muro de Facebook: cómo publicarlo en tu web

0. Índice de contenidos.

1. Introducción

En este tutorial vamos a ver cómo podemos publicar el muro de facebook en una web para hacer uso del mismo, por ejemplo, como un gestor de noticias. De este modo, al publicar en facebook cualquier comentario se mostrará en nuestra web como si fuera una noticia.

Para ello usaremos el plugin de neosmart STREAM

Neosmart Stream.

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Hp Pavilion dv7 Notebook PC (Intel Core 2 Duo a 2.26 GHz, 4 GB RAM, 450 GB HD).
  • Sistema operativo: Windows Home Premium.
  • Facebook, plugin neosmart STREAM y editor texto Sublime text 2 Unregistered.

3. Pasos a seguir para instalar el muro de facebook en una página web.

Lo primero que necesitamos saber es el Facebook ID?.

Para conocerlo vamos a facebook y entramos en la cuenta de la que queremos publicar su muro, vamos al perfil y copiamos lo que aparece en la URL después de https://www.facebook.com/************

Luego vamos a Neosmart Stream y escribimos el Facebook ID y damos a Connect and create access token.

Nos pide iniciar sesión con facebook.

Después nos pedira permiso Neosmart Social para las siguientes acciones. Cliqueamos permitir.

Ahora cliqueamos en REFRESH y nos aparecera un previo del muro de facebook y un Live Demo Code que debemos copiar.

Ahora tenemos que descargar el plugin dando al Botón de Download.

Lo descomprimimos y editamos el archivo index.html.

index.html

Y escribimos el Live Demo Code que generó Neosmart Stream.

4. Resultado.

Lo abrimos en el navegador y Voila aquí esta el muro de facebook funcionando.

Solo quedaria incluir el <div id="live-demo"></div> en nuestra web.

Podemos modificar el estilo Css y las Properties del Plugin para cambiar el diseño acorde a nuestra web.

5. Referencias.

Neosmart Stream.

6. Conclusión.

Usando este plugin podemos usar facebook como un gestor de noticias

Un saludo.

Chema

mailto:chmadi@gmail.com

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2013-10-09-16:20:08

Autor: Chmadi

Buenas tardes Carlos. Veo que el plugin neosmart funciona bien. El pase de fotos puedes ser que el javascript de NeoSmart choca con jquery. Prueba a poner:

<link href="jquery.neosmart.fb.wall.css" rel="stylesheet" type="text/css"/>
<script src="jquery.neosmart.fb.wall.js" type="text/javascript"></script>

encima de:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

después de los meta



Fecha publicación: 2013-09-29-21:43:19

Autor: Chmadi

Buenas tardes, Carlos. Te recomiendo este enlace https://neosmart-stream.de/docs/installation/step-by-step/

Aquí te explican paso a paso como instalar este plugin. Espero que te solucione el problema.

Fecha publicación: 2013-09-26-15:56:53

Autor: croon

Hola buenos dias, soy Carlos !

Primero felicitarte por el tutorial, que es muy completo intuitivo y facil de seguir.

He seguido todos los pasos y funciona perfectamente, pero pasado un rato, detecta que la acces token no coincide y para de mostrar-se para dejar paso a un mensage de error.

Agraderecia mucho si tienes alguna solucion como ir canviando la token automaticamente cada X tiempo, o algo que solucione el problema.

Muchas gracias de antemano y un saludo

Fecha publicación: 2013-09-26-15:44:47

Autor: croon

Hola buenos dias, soy Carlos !

Primero felicitarte por el tutorial, que es muy completo intuitivo y facil de seguir.

He seguido todos los pasos y funciona perfectamente, pero pasado un rato, detecta que la acces token no coincide y para de mostrar-se para dejar paso a un mensage de error.

Agraderecia mucho si tienes alguna solucion como ir canviando la token automaticamente cada X tiempo, o algo que solucione el problema.

Muchas gracias de antemano y un saludo

Fecha publicación: 2013-09-26-15:26:54

Autor: croon

Hola buenos dias, soy Carlos !

Primero felicitarte por el tutorial, que es muy completo intuitivo y facil de seguir.

He seguido todos los pasos y funciona perfectamente, pero pasado un rato, detecta que la acces token no coincide y para de mostrar-se para dejar paso a un mensage de error.

Agraderecia mucho si tienes alguna solucion como ir canviando la token automaticamente cada X tiempo, o algo que solucione el problema.

Muchas gracias de antemano y un saludo

Fecha publicación: 2013-03-01-11:31:44

Autor: pos2005

Hola de nuevo,

Bien, al final pude visualizar el muro en el web, aunque al cabo de un rato (quizá una hora)desapareció para dejar el siguiente mensaje:

Error validating access token: Session has expired at unix time 1360954800. The current unix time is 1362133623.

Parece que la llave de acceso que facilita nerosmart caducase.

Agradeceré vuestra ayuda!

Fecha publicación: 2013-02-16-01:18:28

Autor: Chmadi

Tienes mal el accessToken. Tiene que generarlo en Neosmart Stream.
Un saludo

Fecha publicación: 2013-02-06-20:40:57

Autor: pos2005

Primero quiero agradecer tu aportacion a ese tutorial.

Sin embargo quiero informarte que no me funciona. He seguido todos los pasos, pero en el momento que pido que se me habra el navegador, aparece el texot "fb.wall - a Facebook Wall jQuery Plugin" pero no el contenido del muro. Y eso que en el web de neosmart, sí que aparece.

Incluyo el HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fb.wall - a Facebook Wall jQuery Plugin</title>
<link href="jquery.neosmart.fb.wall.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery.neosmart.fb.wall.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#live-demo').fbWall({
id:'*********',
accessToken:'***************************************************************************************************************',
showGuestEntries:true,
showComments:true,
max:5,
timeConversion:24
});
});
</script>
</head>

<body>
<h1>fb.wall - a Facebook Wall jQuery Plugin</h1>
<div id="live-demo"></div>
</body>
</html>