Ajout du plugin Facebook Messenger sur toutes les pages

par Invité Dim 1 Nov 2020 - 14:27

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.caverne-partitions.com

Description du problème

Bonjour,

Ce message car j'essaye désespérément d'installer le plugin de messagerie Messenger (Facebook) sur toutes les pages de mon forum.
Voilà le code qu'on me propose d'installer :

Code::  <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v8.0' }); }; (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 = 'https://connect.facebook.net/fr_FR/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>  <div class="fb-customerchat" attribution=setup_tool page_id="108396201749" logged_in_greeting="Bonjour ! Comment pouvons-nous vous aider ?" logged_out_greeting="Bonjour ! Comment pouvons-nous vous aider ?"> </div>

Est-ce bien un javascript ? Ou dois-je l'installer autre part ?

Grand merci pour votre aide.
Melchior

par **Pinguino** Lun 2 Nov 2020 - 9:32

Bonjour,

Non, ce code ne doit pas être placé dans la gestion des Javascripts. Quand vous le récupérez sur Facebook, Facebook vous indique où le placer. Généralement ce type de code doit aller après la balise <head>, après la balise <body> où à l'endroit où afficher le widget. Donc d'abord, lisez bien ce que Facebook vous indique sur la page où vous avez récupérer ce code.

De mémoire pour ce code, l'ayant déjà installé, c'est après la balise <body>.

Ensuite, le plus simple est de l'insérer dans le template adéquate tout simplement. Généralement dans overall_header ou dans un widget du forum si vous les avez activés.

par Invité Lun 2 Nov 2020 - 13:19

Merci Pinguino pour votre réponse !
J'avoue être une "bille" comme on dit, et je ne maitrise pas forcément le codage. Je suis dans mes templates, en l'occurrence overall_header et après ?
Je ne vois pas la balise <body>, mais uniquement <header> au début du code. J'ai essayé de coller le code, cela n'a pas fonctionné. Est-ce que je dois rajouter manuellement la balise <body> ? Si oui, à quel endroit dans le code du tempalate ?

Merci pour votre aide, et désolé pour mon amateurisme Sad

Bonne journée

par **Pinguino** Lun 2 Nov 2020 - 14:31

Ce n'est pas très compliqué, surtout que vous avez de nombreux templates modifiés déjà. Voici les étapes à suivre :

1 - Il vous suffit sur la page du template overall_header de recherche "<body" via la barre de recherche.
2- Vous copiez collez le code juste en-dessous et vous enregistrez.
3- Vous faites attention de publier le template en ligne sur la page qui liste tous les templates et c'est bon.

Ajout du plugin Facebook Messenger sur toutes les pages Bodd10

par Invité Lun 2 Nov 2020 - 14:48

Merci pour cette réponse. C'est ce que j'ai fait mais il n'y a aucun changement, quand j'actualise.

Ajout du plugin Facebook Messenger sur toutes les pages Captur20

Pourtant c'est le bon code, et j'ai bien tout validé du côté de Facebook.. étrange ! Sad

par **Pinguino** Lun 2 Nov 2020 - 15:26

Je pense qu'il y a des erreurs dans votre templates modifiés. Par exemple, il y a bien la balise ouvrante <head> mais nul part la balise fermante </head> que vous avez du supprimer par erreur lors de modifications passées.

De même, avez-vous bien ajouté le nom de domaine dans la configuration sur Facebook avant de récupérer le code ? C'est à renseigner quand on récupère le code :

Ajout du plugin Facebook Messenger sur toutes les pages Code12

par Invité Lun 2 Nov 2020 - 20:49

Re-bonsoir,

Je viens de vérifier toutes les balises et en effet, il y avait quelques incohérences. Je pense ne pas me tromper en disant qu'elles sont désormais toutes bonnes et valides, mais encore une fois je ne suis pas un expert. Le code ne fonctionne toujours pas.. et j'ai bien respecté la procédure par Facebook. C'est vraiment incompréhensible Sad

par **Pinguino** Mar 3 Nov 2020 - 14:04

Bonjour,

Pouvez-vous nous envoyer une capture d'écran de la page Facebook sur laquelle nous pouvons voir l'adresse que vous avez renseigné svp ? Il s'agit de la même page que j'ai partagé plus haut. Si le code est bon et que le template est bien publié (ce qui me semble être le cas), je pense que l'erreur est là.

par Invité Mar 3 Nov 2020 - 15:24

Bonjour Pinguino,

Voici la capture demandée : (j'ai ajouté également le nom de domaine "forumpro.fr")

Ajout du plugin Facebook Messenger sur toutes les pages Captur21

Bonne journée

par **Pinguino** Mer 4 Nov 2020 - 10:13

JE vais transmettre le problème à l'équipe technique mais je me demande si cela ne vient pas de la fonction de minification des codes JS sur FA qui doit minifier mais insérer une erreur dans le code Facebook. Car c'est vraiment étrange ...

par Invité Mer 4 Nov 2020 - 11:34

Merci @Pinguino pour cette réponse.
En complément, et au cas où voici le template "overall_header" installé sur mon forum :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta charset="iso-8859-1" /> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}> <head> <link href='http://fonts.googleapis.com/css?family=Open+Sans|Great+Vibes|Gudea|Dancing+Script:700,400' rel='stylesheet' type='text/css' /> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" />  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />  {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script> <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>  <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[ /* Definir le sens de direction en fonction du panneau admin */ var tickerDirParam = "{switch_ticker.DIRECTION}"; var slid_vert = false; var auto_dir = 'next'; var h_perso = parseInt({switch_ticker.HEIGHT}); switch( tickerDirParam ) { case 'top' : slid_vert = true; break; case 'left': break; case 'bottom': slid_vert = true; auto_dir = 'prev'; break; case 'right': auto_dir = 'prev'; break; default: slid_vert = true; } $(document).ready(function() { var w_cont = $('#fa_ticker_container').width(); if (w_cont > 0) { $('#fa_ticker_container').width(w_cont); /* Affichage de la liste */ $('#fa_ticker_content').css('display','block'); /* Calcul des dimensions du conteneur et des elements */ var width_max = $('ul#fa_ticker_content').width(); var width_item = Math.floor(width_max / {switch_ticker.SIZE}); var height_max = h_perso; /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */ $('ul#fa_ticker_content li').each( function () { if ($(this).height() > height_max) { height_max = $(this).height(); } } ); /* Redimensionnement des elements et des images trop larges */ $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () { if ($(this).width() > width_item) { var ratio = $(this).width() / width_item; var new_height = Math.round($(this).height() / ratio); $(this).height(new_height).width(width_item); } }); /* Redimensionnement et centrage du conteneur en mode vertical */ if (slid_vert) { $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto'); } /* Initialisation du caroussel */ $('#fa_ticker_content').jcarousel({ vertical: slid_vert, wrap: 'circular', auto: {switch_ticker.STOP_TIME}, auto_direction: auto_dir, scroll: 1, size: {switch_ticker.SIZE}, height_max: height_max, animation: {switch_ticker.SPEED} }); } else { $('ul#fa_ticker_content li:not(:first)').css('display','none'); $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center'); } }); //]]> </script>  <script type="text/javascript">//<![CDATA[ $(document).ready(function(){  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); pm.focus();   report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); report.focus();   ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});  });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;   $(document).ready( function() { $(window).resize(function() { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth/2 - popupWidth/2 }); }); });  //]]> </script> {GREETING_POPUP}  <style> .jcarousel-skin-tango .jcarousel-item { text-align:center; width: 10px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; } </style>  {HOSTING_JS}  <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script>  </head> <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">  <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v8.0' }); }; (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 = 'https://connect.facebook.net/fr_FR/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>  <div class="fb-customerchat" attribution=setup_tool page_id="108396201749" logged_in_greeting="Bonjour ! Comment pouvons-nous vous aider ?" logged_out_greeting="Bonjour ! Comment pouvons-nous vous aider ?"> </div>  <div id="hitskin_preview" style="display: block;"> <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br /> <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div>   <div id="login_popup"> <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0"> <tr height="25"> <td class="catLeft"> <span class="genmed module-title">{SITENAME}</span> </td> </tr> <tr height="{LOGIN_POPUP_MSG_HEIGHT}"> <td class="row1" align="left" valign="top"> <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="mainoption" value="{L_LOGIN}" /> <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> <span class="genmed">{LOGIN_POPUP_MSG}</span> </td> </tr> </table> </div>  <a name="top"></a> <table id="corps" class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="2" cellpadding="10" border="2" align="center"> <tr> <td id="navigation_father"> <div id="navigation">{GENERATED_NAV_BAR}</div> </td> </tr> <tr> <td class="bodyline"> <table id="i_logo" width="100%" cellspacing="2" cellpadding="0" border="0"> <tr>  <td><a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a> </td>  <td align="center" width="100%" valign="middle">  <a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a> <br/>  </td>  <td><a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a> </td>  </tr> </table> <div style="clear: both;"></div>  <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> </td> </tr> </table> </div>   <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </td> </tr> </table> </div>  <div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <table cellpadding="0" cellspacing="0" width="100%" class="three-col"> <tbody> <tr> <td valign="top" width="{C1SIZE}"> <div id="{ID_LEFT}">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> </td> <td valign="top" width="100%">  </td> </tr> </tbody> </table> </div> </div> </td> </tr> </table> </body> </html>

J'espère que nous allons arriver à trouver une solution au problème !
Bonne journée

par Invité Jeu 5 Nov 2020 - 12:05

Des nouvelles à me transmettre @Pinguino ?

Merci

par **Pinguino** Jeu 5 Nov 2020 - 14:22

Bonjour,

EDIT : le code est fonctionnel. Vous aviez supprimé par erreur des guillemets et cette suppression cassait le code.

par Invité Jeu 5 Nov 2020 - 16:02

EDIT : De quels guillemets parlez-vous ?
Je viens de changer la configuration (via Facebook), et ça ne fonctionne plus, pourtant j'ai bien collé le code ..

Code::  <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v8.0' }); }; (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 = 'https://connect.facebook.net/fr_FR/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>  <div class="fb-customerchat" attribution=setup_tool page_id="108396201749" logged_in_greeting="Bonjour ! Comment pouvons-nous vous aider ?" logged_out_greeting="Bonjour ! Comment pouvons-nous vous aider ?"> </div>

par **Pinguino** Jeu 5 Nov 2020 - 17:13

Nous avions directement corrigé le code sur votre forum et cela fonctionnait pour information. Voici le code corrigé :

Code::  <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v8.0' }); }; (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 = 'https://connect.facebook.net/fr_FR/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>  <div class="fb-customerchat" attribution="setup_tool" page_id="108396201749" logged_in_greeting="Bonjour ! Comment pouvons-nous vous aider ?" logged_out_greeting="Bonjour ! Comment pouvons-nous vous aider ?"> </div>

Ajout du plugin Facebook Messenger sur toutes les pages