it-swarm-es.tech

Cómo incrustar el feed de una página de Facebook en mi sitio web

Estoy trabajando con un grupo para ayudar a promover un evento de caridad. La página que me gustaría incrustar NO es mi perfil de Facebook, sino una página de Facebook que alguien ha creado.

Me gustaría mostrar esas noticias en mi página web. Si necesito obtener información/acceso desde esta página, hágamelo saber. Si alguien más tiene un ejemplo de trabajo, hágamelo saber. He estado usando jsfiddle.net para dibujarlo.

Aquí está la página: http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328

66
NickG

Ahhh, eso es super simple, no requiere programación.

Consulte: https://developers.facebook.com/docs/plugins/page-plugin

Querrás mantener la opción show stream activada. Puede ajustar el ancho y la altura y algunas otras cosas.

111
DMCS

Si está buscando un código personalizado en lugar de un complemento, esto podría serle de ayuda. El gráfico de Facebook ha sufrido algunos cambios desde que ha evolucionado. Estos pasos corresponden a la última API de gráficos que probé recientemente y funcionó bien.

Hay dos pasos principales involucrados: 1. Obtener el token de acceso de Facebook, 2. Llamar a la API de Graph pasando el token de acceso.

1. Obtención del token de acceso - Este es el proceso paso a paso para obtener el token de acceso para su página de Facebook. - Insertar alimentador de página de Facebook en mi sitio web . De acuerdo con esto, debe crear una aplicación en la página de desarrolladores de Facebook que le proporcione un Id. De aplicación y un Secreto de aplicación. Usa estos dos y obtén el token de acceso.

2. Llamar a Graph API - Esto sería bastante simple una vez que obtenga el token de acceso. Solo necesita formar una URL para Graph API con todos los campos/propiedades que desea recuperar y realizar una solicitud GET para esta URL. Aquí hay un ejemplo de cómo hacerlo en asp.net MVC. Incrustar feeds de facebook usando asp.net mvc . Esto debería ser bastante similar en cualquier otra tecnología, ya que sería solo una solicitud GET de HTTP.

Ejemplo de consulta de FQL: https://graph.facebook.com/FBPageName/posts?fields=full_picture,picture,link,message,created_time&limit=5&access_token=YOUR_ACCESS_TOKEN_HERE

6
Pranay

En el nuevo page-plugin puede hacer varias pestañas en su sitio web. El complemento de la página te permite insertar y promocionar fácilmente cualquier página de Facebook en tu sitio web. Al igual que en Facebook, a sus visitantes les puede gustar y compartir la página sin salir de su sitio.

  1. Incluya el SDK de JavaScript en su página una vez, idealmente justo después de la etiqueta de apertura <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/en_US/sdk.js#xfbml=1&version=v2.5&appId={APP_ID}";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  1. Coloque el código para su complemento donde quiera que aparezca en su página.
<div class="fb-page" 
     data-href="https://www.facebook.com/YourPageName" 
     data-tabs="timeline" 
     data-small-header="false" 
     data-adapt-container-width="true" 
     data-hide-cover="false" 
     data-show-facepile="true">
  <div class="fb-xfbml-parse-ignore">
    <blockquote cite="https://www.facebook.com/facebook">
      <a href="https://www.facebook.com/facebook">Facebook</a>
    </blockquote>
  </div>
</div>

También puede cambiar la siguiente configuración:

 enter image description here 

Además, ahora puede tener pestañas de línea de tiempo, eventos y mensajes con el nuevo complemento de página:

  • Pestaña Línea de tiempo: mostrará las publicaciones más recientes de la línea de tiempo de tu página de Facebook.
  • Pestaña Eventos: la gente puede seguir los eventos de tu página y suscribirse a los eventos desde el complemento.
  • Pestaña Mensajes: las personas pueden enviar mensajes a su página directamente desde su sitio web. Las personas deben iniciar sesión para utilizar esta función.
<div class="fb-page" 
  data-tabs="timeline,events,messages"
  data-href="https://www.facebook.com/YourPageName"
  data-width="380" 
  data-hide-cover="false">
</div>
3
Somnath Muluk

El plugin Like Box/Page es básicamente un iframe y feo: D

Así que creé mi propio complemento gratuito al que llamo complemento Famax para mostrar las fuentes de FanPage. Es similar al cuadro Me gusta pero tiene una mejor interfaz de usuario y es más personalizable.

Además, como el cuadro Me gusta se muestra en un iframe con un ancho y una altura fijos, etc., no es realmente sensible.

2
Patrick

Corríjame si me equivoco, pero parece que Facebook desaprobó el complemento de Feed de actividad. Además, ya no parece haber ningún complemento sustituto para la actividad.

Aquí está el enlace: https://developers.facebook.com/docs/plugins/activity

0
Maksim Luzik

Para los desarrolladores de sitios web, otra opción que tiene es seguir un tutorial funcional de la API de gráficos de Facebook, como este .

Pero si necesita una solución rápida donde pueda personalizar e incrustar instantáneamente un feed de página de Facebook, debe usar complementos para sitios web como this one .

Aquí hay una guía paso a paso:

  1. Obtenga una Clave libre o Clave pagada .
  2. Vaya a esta página de inicio de sesión y use la tecla para iniciar sesión.
  3. Una vez que haya iniciado sesión, haga clic en el botón "+ Crear fuente personalizada".
  4. En la ventana emergente, asigne un nombre a su página de Facebook personalizada.
  5. En el menú desplegable, seleccione la opción "Feed de página de Facebook en su sitio web".
  6. Ingrese su ID de página de Facebook.
  7. Haga clic en el botón "Continuar". Esto te mostrará las opciones de personalización.
  8. Haga clic en el botón "Incrustar en el sitio web" ubicado en la esquina superior derecha de la pantalla.
  9. En la ventana emergente, copie el código de inserción haciendo clic en el botón "Copiar código".
  10. Pegue el código de inserción en su sitio web.

Visite el enlace tutorial para ver una demostración en vivo allí también.

0
Emkey