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.

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 :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

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

[/pastacode]

Et enfin le code suivant dans votre page :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

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

[/pastacode]

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

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

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' );

[/pastacode]

[FacebookTimeline]