Comment intégrer Facebook Messenger sur votre site internet

Ce guide explique les différentes techniques que vous pouvez utiliser pour intégrer facilement le bouton Facebook Messenger sur votre site Web. Lorsque quelqu’un clique sur le bouton Messenger , il lancera directement l’application Facebook Messenger sur son téléphone mobile ou sur le site Web messenger.com s’il se trouve sur le bureau. Vous pouvez choisir de recevoir des messages dans votre profil Facebook ou votre page Facebook, si vous en avez un.

Un lien, tout simplement

Le bouton Facebook Messenger par défaut est rendu en JavaScript, mais vous pouvez également les écrire en HTML sans avoir besoin de JavaScript. L’avantage est que ces boutons, c’est qu’ils apparaissent même si l’utilisateur utilise un bloqueur de publicité.

[code lang=”html”] https://m.me/Votre-Identifiant-Facebook[/code]

Dans mon cas cela donnerait : https://m.me/servo.web.18

Pour un lien cliquable en HTML, cela donnerait :

[code lang=”html”] <a href="https://m.me/Votre-Identifiant-Facebook">Envoyez-nous un message sur Facebook</a> [/code]

Bouton Facebook Messenger

C’est le bouton Facebook Messenger par défaut ( voir la démo en direct ) rendu avec JavaScript. Contrairement à l’option précédente qui permet également de transmettre des messages à un profil personnel, ce bouton est uniquement disponible pour les propriétaires de pages Facebook afin qu’ils puissent recevoir des messages d’autres utilisateurs de Facebook.

Pour commencer, copiez-collez l’extrait suivant, mais n’oubliez pas de remplacer “XYZ” par l’ID numérique de votre page Facebook. Vous pouvez définir la couleur en blanc pour un texte bleu sur le bouton d’arrière-plan blanc.

[code lang=”js”]
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘95100348886’,
xfbml : true,
version : ‘v2.6’
});
};

(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
</script>

<div class="fb-messengermessageus"
messenger_app_id="95100348886"
page_id="XYZ"
color="blue"
size="large">
</div>
[/code]

Astuce:  Si vous ne parvenez pas à utiliser le bouton Facebook Messenger, il est probable que votre page Facebook soit configurée pour ne pas recevoir de messages. Accédez aux paramètres de votre page Facebook, choisissez Général, Messages et activez l’option “Autoriser les utilisateurs à contacter ma page en mode privé en affichant le bouton Message”.

Facebook Messenger Box

Vous avez vu la boîte Facebook Like intégrée dans des sites Web, mais saviez-vous que la même boîte peut également inclure un formulaire en ligne permettant à tout utilisateur Facebook de vous contacter sans même quitter votre page Web. Voici une démo en direct .

Dans ce cas, vous devez remplacer “XYZ” dans l’extrait ci-dessous avec le nom d’utilisateur ou l’identifiant de votre page Facebook. Toute personne connectée à Facebook peut vous envoyer un message à partir de votre site Web, similaire aux formulaires de contact habituels.

[code lang=”js”]

<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘95100348886’,
xfbml : true,
version : ‘v2.6’
});
};

(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
</script>

<div class="fb-page"
data-href="https://www.facebook.com/XZY/"
data-tabs="messages"
data-width="400"
data-height="300"
data-small-header="true">
<div class="fb-xfbml-parse-ignore">
<blockquote></blockquote>
</div>
</div>

[/code]

Ne partez pas si vite 😭