web-dev-qa-db-fra.com

Comment intégrer le flux d'une page Facebook dans mon site Web

Je travaille avec un groupe pour aider à promouvoir un événement de charité. La page que je voudrais intégrer n'est PAS mon profil Facebook, mais une page Facebook créée par quelqu'un.

Je voudrais montrer ce fil de nouvelles dans ma page Web. Si j'ai besoin d'informations/d'accès depuis cette page, veuillez me le faire savoir. Si quelqu'un d'autre a un exemple de travail, s'il vous plaît faites le moi savoir. J'ai utilisé jsfiddle.net pour le rédiger.

Voici la page: http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328

javascripthtmlfacebookfacebook-pagefacebook-feed
64
NickG

Ahhh, c'est super simple, aucune programmation n'est requise. 

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

Vous voudrez garder l'option show stream activée. Vous pouvez ajuster la largeur et la hauteur et quelques autres choses. 

111
DMCS

Si vous recherchez un code personnalisé au lieu d'un plugin, cela pourrait vous aider. Le graphique Facebook a subi quelques changements depuis son évolution. Ces étapes concernent la dernière API Graph que j'ai récemment testée et qui a bien fonctionné.

Deux étapes principales sont impliquées: 1. Obtenir le jeton d'accès à Facebook, 2. Appeler l'API Graph en transmettant le jeton d'accès.

1. Obtenir le jeton d'accès - Voici le processus étape par étape pour obtenir le jeton d'accès de votre page Facebook. - Intégrer le flux de page Facebook sur mon site Web . En tant que tel, vous devez créer une application dans la page de développeurs Facebook qui vous donnerait un identifiant et un secret pour l'application. Utilisez ces deux et obtenez le jeton d'accès.

2. Appel de l'API Graph - Ce serait assez simple une fois que vous aurez obtenu le jeton d'accès. Vous devez simplement former une URL vers l'API Graph avec tous les champs/propriétés que vous souhaitez récupérer et envoyer une demande GET à cette URL. Voici un exemple sur la façon de le faire dans asp.net MVC. Incorporation de flux facebook avec asp.net mvc . Cela devrait être assez similaire dans n'importe quelle autre technologie, comme ce serait juste une requête HTTP GET.

Exemple de requête 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

Dans new page-plugin vous pouvez créer plusieurs onglets sur votre site Web. Le plugin Page vous permet d'intégrer et de promouvoir facilement n'importe quelle page Facebook sur votre site Web. Comme sur Facebook, vos visiteurs peuvent aimer et partager la page sans quitter votre site.

  1. Incluez le SDK JavaScript sur votre page une fois, idéalement juste après la balise <body> d'ouverture. 

<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. Placez le code de votre plugin où vous voulez qu'il apparaisse sur votre page.

<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>

Vous pouvez également modifier les paramètres suivants:

 enter image description here

Aussi, vous pouvez maintenant avoir des onglets chronologie, événements et messages avec le nouveau plugin de page:

  • Onglet Chronologie: affiche les messages les plus récents de la chronologie de votre page Facebook.
  • Onglet Événements: les utilisateurs peuvent suivre les événements de votre page et s'abonner à des événements depuis le plug-in.
  • Onglet Messages: les utilisateurs peuvent envoyer un message directement à votre page à partir de votre site Web. Les utilisateurs doivent être connectés pour utiliser cette fonctionnalité.

<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

Le plugin Like Box/Page est fondamentalement un iframe et laid: D

J'ai donc créé mon propre plugin gratuit que j'appelle plugin Famax pour afficher les flux FanPage. Elle ressemble à la même boîte mais offre une meilleure interface utilisateur et est plus personnalisable.

De plus, parce que la zone Like est affichée dans un iframe avec une largeur et une hauteur fixes, etc., ce n'est pas très réactif.

2
Patrick

Corrigez-moi si je me trompe, mais il semble que Facebook ait déconseillé le plug-in Activity Feed. De plus, il ne semble plus y avoir de plug-in de substitution pour l'activité.

Voici le lien: https://developers.facebook.com/docs/plugins/activity

0
Maksim Luzik

Pour les développeurs de sites Web, une autre option consiste à suivre un didacticiel de travail sur l'API Graph de Facebook, tel que celui-ci .

Mais si vous avez besoin d'une solution rapide permettant de personnaliser et d'intégrer instantanément un flux de page Facebook, vous devez utiliser des plug-ins de site Web tels que celui-ci .

Voici un guide étape par étape:

  1. Obtenez une clé gratuite ou clé payante .
  2. Allez à cette page de connexion et utilisez la clé pour vous connecter.
  3. Une fois connecté, cliquez sur le bouton “+ Créer un flux personnalisé”.
  4. Dans la fenêtre contextuelle, nommez votre flux de page Facebook personnalisé.
  5. Dans le menu déroulant, sélectionnez l’option «Flux de page Facebook sur votre site Web».
  6. Entrez votre identifiant de page Facebook.
  7. Cliquez sur le bouton «Continuer». Cela vous montrera les options de personnalisation.
  8. Cliquez sur le bouton "Intégrer sur le site Web" situé dans le coin supérieur droit de l'écran.
  9. Dans la fenêtre contextuelle, copiez le code d'intégration en cliquant sur le bouton «Copier le code».
  10. Collez le code d'intégration sur votre site Web.

Visitez le lien tutorial pour y voir une démonstration en direct.

0
Emkey