Facebook : Intégrer sa timeline, ses événements et/ou les messages

Depuis quelques temps Facebook a fait quelques modifications sur l’intégration du fil d’actualité ou de la “timeline”, vous pouvez désormais intégrer votre fil d’actualité (comme avant) mais aussi les événements et/ou les messages sur votre site internet.

La technique via un iframe fonctionne toujours, celle-ci ne correspond plus “à l’usage” recommander par Facebook mais vous permettra d’intégrer votre fil d’actualité sans souci.

Tout d’abord, connectez-vous à la “Page Plugin” de Facebook et allez ajouter votre nom de page dans “Facebook Page URL”, la partie “Tabs” va vous permettre de définir si vous souhaitez avoir la timeline, les événements ou les messages sur votre site internet avec les mots clefs suivants : “timeline”, “messages” ou “events”, comme toujours vous pouvez définir la taille en largeur et en hauteur pour adapter au mieux l’intégration.

2016-02-17 17_48_41-Page Plugin - Social Plugins

En cliquant sur “Get Code” vous allez devoir insérez votre code en deux parties :

Le SDK JavaScript a insérer dans votre fichier header.php :

<div id="fb-root"></div>
<p>
<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/fr_FR/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Et enfin le code suivant dans votre page :

<br />
<div class="fb-page" data-href="https://www.facebook.com/creazo.web" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<br />
<div class="fb-xfbml-parse-ignore">
<br />
<blockquote cite="https://www.facebook.com/creazo.web"><a href="https://www.facebook.com/creazo.web">CreaZo</a>
</p></blockquote>
<p>
</div>
<p>
</div>
<p>








Vous pouvez aussi le faire directement par un shortcode comme celui-ci [ FacebookTimeline ] (sans les espaces) :

function FacebookTimeline_creazo( ) 
{ 
	$codehtml = '
<br />
<div id="fb-root"></div>
<p>
<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/fr_FR/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));</script>
<br />
<div class="fb-page" data-href="https://www.facebook.com/creazo.web" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<br />
<div class="fb-xfbml-parse-ignore">
<br />
<blockquote cite="https://www.facebook.com/creazo.web">
<a href="https://www.facebook.com/creazo.web">CreaZo</a>

</p></blockquote>
<p>
</div>
<p>
</div>
<p>
'; 
	return 
	$codehtml;
} 
add_shortcode( 'FacebookTimeline', 'FacebookTimeline_creazo' );