Facebook like box, également connu sous le nom de Facebook fan box, est devenu un élément incontournable pour de nombreux sites Web. Il permet aux propriétaires de sites Web de fournir à leurs utilisateurs un moyen simple de rejoindre leur communauté Facebook et d’obtenir des mises à jour directement dans leur fil d’actualité Facebook. Récemment, l’un de nos utilisateurs a attiré notre attention sur le fait que nous n’avons pas abordé le sujet de la façon d’ajouter la boîte de type Facebook dans WordPress. Bien que nous ayons expliqué comment ajouter le bouton Facebook comme, le bouton d’envoi Facebook et les commentaires Facebook. Dans cet article, nous allons vous montrer comment ajouter la fan box facebook dans WordPress.
Ajout de Like Box à l’aide du plugin Facebook officiel pour WordPress
Le moyen le plus simple d’ajouter une boîte de type Facebook à votre site WordPress est peut-être d’utiliser le plugin Facebook officiel pour WordPress. La première chose que vous devez faire est d’installer et d’activer le Facebook brancher. Après avoir activé le plugin, allez à Apparence » Widgets. Faites simplement glisser et déposez le widget Facebook like box dans votre barre latérale. Vous devrez fournir l’URL de votre page fan facebook dans les configurations du widget.
Le widget a les mêmes options que les plugins sociaux Facebook pour les sites Web. Vous pouvez choisir d’afficher un flux, d’afficher des visages, de supprimer l’en-tête, de changer la couleur de la bordure. Il n’y a actuellement que deux thèmes disponibles clair et sombre.
Ajouter manuellement une boîte similaire sans utiliser de plugin
Il est possible d’ajouter Facebook like box manuellement sans utiliser de plugin. Aller à Boîte de J’aime du plugin social Facebook page. Fournissez l’URL de votre page Facebook et configurez l’apparence de la boîte de like.
appuyez sur la Obtenir le code bouton pour obtenir le code de la boîte Like.
Facebook vous offre plusieurs façons d’ajouter le code de boîte similaire sur votre site Web. Vous pouvez choisir entre HTML5, XFBML et iframe. Nous allons vous montrer comment ajouter chacun d’eux, mais vous devez en choisir un. À notre avis, HTML5 est une option raisonnablement bonne pour la plupart des sites Web alimentés par WordPress. XFBML est bon pour les personnes utilisant d’autres plugins Facebook qui utilisent XFBML pour afficher les boutons Facebook. Utilisez iframe si les deux premières options ne fonctionnent pas pour vous.
Ajout du code HTML5 Facebook Like Box dans WordPress
Cliquez sur l’onglet HTML5 de la fenêtre de code et copiez la première partie du code. Ils vous recommandent de le coller juste après <body> balise qui se trouve généralement dans votre fichier header.php. Cependant, cela fonctionnera n’importe où dans le corps. Pour vous faciliter la tâche, vous pouvez simplement l’ajouter dans le pied de page en utilisant notre Insérer le plug-in d’en-têtes et de pieds de page. La première partie du code ressemblerait à ceci :
<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/all.js#xfbml=1&appId=403924843027405";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Ce javascript connecte votre site Web à la bibliothèque javascript de Facebook. Copiez maintenant la deuxième partie du code, qui ressemblerait à ceci :
<div class="fb-like-box" data-href="http://www.facebook.com/wpbeginner" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
Cette partie du code indique au javascript que vous avez chargé précédemment d’afficher la boîte similaire à cet emplacement et avec ces paramètres. Pour les besoins de cet exemple, nous allons coller ce code dans les widgets de la barre latérale. Aller à Apparence » Widgets. Faites glisser et déposez un widget de texte dans votre barre latérale et collez le code à l’intérieur. Enregistrez votre widget et consultez votre site Web.
Cela fonctionnera également dans n’importe quelle autre zone de votre site. Si vous maîtrisez le code, vous pouvez le coller dans votre pied de page, après la publication, etc.
N’oubliez pas de changer l’URL de la page fan facebook en votre propre URL de page.
Ajout du code XFBML Facebook Like Box dans WordPress
Cliquez sur l’onglet XFBML pour obtenir le code pour XFBML Facebook like box. Pour ajouter une Facebook Like Box XFBML, vous devez ajouter trois petits morceaux de code dans WordPress.
Copiez le premier morceau de code et collez-le dans votre thème header.php déposer juste après <body> étiqueter. Semblable au dernier, ce code fonctionnera n’importe où dans le corps. Pour vous faciliter la tâche, vous pouvez simplement l’ajouter dans le pied de page en utilisant notre Insérer le plug-in d’en-têtes et de pieds de page. Ce code voudrait quelque chose comme ceci :
<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/all.js#xfbml=1&appId=403924843027405";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Cette petite fonction javascript connecte votre site Web à la bibliothèque javascript de Facebook.
La deuxième ligne de code est une déclaration d’espace de noms XML, et vous devez l’ajouter dans le <html>balise de votre site. Le plus simple serait d’ouvrir votre thème functions.php fichier, collez le code suivant :
//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
Enfin, copiez la troisième ligne de code qui ressemblerait à ceci :
<fb:like-box href="http://www.facebook.com/wpbeginner" width="292" show_faces="true" stream="true" header="true"></fb:like-box>
Ce code indique au javascript que vous avez chargé à la première étape, d’afficher la boîte similaire à cet endroit et avec ces paramètres. Aller à Apparence » Widgets. Faites glisser et déposez un widget de texte dans votre barre latérale et à l’intérieur de ce widget de texte, collez la troisième ligne de code. Enregistrez vos modifications et prévisualisez votre site Web.
Ajouter l’iframe Facebook Likebox dans WordPress
Cliquez sur l’onglet IFRAME pour copier le code iframe. Aller à Apparence » Widgets et faites glisser et déposez un widget Texte dans votre barre latérale. Collez le code iframe dans le widget de texte et enregistrez les modifications. Ouvrez votre site pour prévisualiser la fanbox facebook.
Nous espérons que cet article vous a aidé à ajouter Facebook Like box / Fan box sur votre site WordPress. Pour des questions et des commentaires, veuillez laisser un commentaire. Vous pouvez également suis nous sur Facebook.
