Facebook Chat Plugin einbinden

Liebe Community,

ich versuche seit einiger Zeit den Facebook Chat in Contao mit folgendem Script einzubinden:

HTML-Code:

---

<script>
  var div = document.createElement('div');
  div.className = 'fb-customerchat';
  div.setAttribute('page_id', 'XXXXXXXXXXX');
  div.setAttribute('ref', 'XXXXXXXXX');
  div.setAttribute('logged_in_greeting', 'Text text ????');
  div.setAttribute('logged_out_greeting', 'Text text ????');
  div.setAttribute('theme_color', '#ccd626');
  document.body.appendChild(div);
  window.fbMessengerPlugins = window.fbMessengerPlugins || {
    init: function () {
      FB.init({
        appId            : 'XXXXXXXXXXXX',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v3.3'
      });
    }, callable: []
  };
  window.fbAsyncInit = window.fbAsyncInit || function () {
    window.fbMessengerPlugins.callable.forEach(function (item) { item(); });
    window.fbMessengerPlugins.init();
  };
  setTimeout(function () {
    (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/xfbml.customerchat.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  }, 0);
</script>

---

Leier funktioniert dies nicht. Hätte vielleicht jemand einen Tipp für mich, wie ich das realisieren könnte?

Vielen Dank und viele Grüße
Schaubi

Was geht nicht? Erhältst du eine Meldung?

Zitat:

---

Zitat von 07alex07

Was geht nicht? Erhältst du eine Meldung?

---

Hallo Alex,

vielen Dank für Deine Antwort. Leider passiert gar nichts. Keine Fehlermeldung, etc.

Viele Grüße
Schaubi

Wie hast Du den JS-Code eingebunden? Was steht im erzeugten HTML, das Contao ausliefert?

Zitat:

---

Zitat von fiedsch

Wie hast Du den JS-Code eingebunden? Was steht im erzeugten HTML, das Contao ausliefert?

---

Hallo Fiedsch,

vielen Dank für Deine Antwort. Habe das ganze schon über mehrere Arten versucht einzubinden: Html, JavaScript, etc..

Der ausgegebene Code sieht so aus:

HTML-Code:

---

<fieldset id="pal_text_legend" class="tl_box">
<legend onclick="AjaxRequest.toggleFieldset(this,'text_legend','tl_content')">Text/HTML/Code</legend>
<div class="widget">
  <h3><label for="ctrl_html" class="monospace"><span class="invisible">Pflichtfeld </span>HTML-Code<span class="mandatory">*</span></label> <a href="contao/help?table=tl_content&amp;field=html" title="Den Hilfe-Assistent aufrufen" onclick="Backend.openModalIframe({'title':'HTML-Code','url':this.href});return false"><img src="system/themes/flexible/icons/about.svg" width="16" height="16" alt="Den Hilfe-Assistent aufrufen"></a></h3>
  <textarea name="html" id="ctrl_html" class="tl_textarea monospace noresize" rows="12" cols="80" required onfocus="Backend.getScrollOffset()">&lt;script&gt;
  var div = document.createElement('div');
  div.className = 'fb-customerchat';
  div.setAttribute('page_id', 'xxxxxxxx');
  div.setAttribute('ref', 'b64:V0VCX0RF');
  div.setAttribute('logged_in_greeting', 'Entdecke den König Ludwig Lauf mit KINI');
  div.setAttribute('logged_out_greeting', 'Entdecke den König Ludwig Lauf mit KINI');
  div.setAttribute('theme_color', '#ccd626');
  document.body.appendChild(div);
  window.fbMessengerPlugins = window.fbMessengerPlugins || {
    init: function () {
      FB.init({
        appId            : '1678638095724206',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v3.3'
      });
    }, callable: []
  };
  window.fbAsyncInit = window.fbAsyncInit || function () {
    window.fbMessengerPlugins.callable.forEach(function (item) { item(); });
    window.fbMessengerPlugins.init();
  };
  setTimeout(function () {
    (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 = &quot;//connect.facebook.net/en_US/sdk/xfbml.customerchat.js&quot;;
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  }, 0);
&lt;/script&gt;</textarea><script>

---

Viele Grüße und vielen Dank.
Schaubi

Dann hast Dum mit dem escapten Script-Tag (<script>) die Erklärung, warum es nicht funktioniert.

Du musst also entweder script zu den erlaubten Tags hinzufügen (Systemeinstellung) oder das Skript anders einbinden.

Ich würde Dir den zweiten Weg empfehlen. Du könntest dazu ein eigenes Template (z.B. j_facebookchat.html5) erstellen und im Seitenlayout einbinden.

Zitat:

---

Zitat von fiedsch

Dann hast Dum mit dem escapten Script-Tag (<script>) die Erklärung, warum es nicht funktioniert.

Du musst also entweder script zu den erlaubten Tags hinzufügen (Systemeinstellung) oder das Skript anders einbinden.

Ich würde Dir den zweiten Weg empfehlen. Du könntest dazu ein eigenes Template (z.B. j_facebookchat.html5) erstellen und im Seitenlayout einbinden.

---

Hallo Fiedsch,

erstmal vielen Dank für Deine Antwort und Deine Zeit. <script> ist als Tag erlaubt, ich kann es mir leider nicht erklären. Habe jetzt ein Template angelegt, nur wie kann ich es aufrufen?

Viele Grüße und vielen Dank
Schaubi

Zitat:

---

Zitat von Schaubi1901

Habe jetzt ein Template angelegt, nur wie kann ich es aufrufen?

---

Das Template solltest Du im Seitenlayout einbinden können (unter Javascript oder bei jQuery, glaube ich).

Das gilt dann zwar für alle Seiten, die mit diesem Layout ausgeliefert werden, aber wahrscheinlich passt das auch bei Dir, denn ich nehme an, Du willst den Chat auf jeder Seite haben.

Du kannst es auch mal nach dem Muster

{{file::j_facebookchat.html5}}

versuchen zur Verwendung als Contentelement.

j_facebookchat.html5 sollte im Templateverzeichnis abgelegt werden.

Zitat:

---

Zitat von fiedsch

Das Template solltest Du im Seitenlayout einbinden können (unter Javascript oder bei jQuery, glaube ich).

Das gilt dann zwar für alle Seiten, die mit diesem Layout ausgeliefert werden, aber wahrscheinlich passt das auch bei Dir, denn ich nehme an, Du willst den Chat auf jeder Seite haben.

---

Hallo Fiedsch,

vielen Dank für Deine Hilfe. Habe das Script im Seitenlayout aktiviert, leider passiert ebenfalls nichts. Irgendetwas scheint nicht zu funktionieren oder unterdrückt zu werden. Hast Du noch eine Idee?

Viele Grüße
Schaubi

Poste einen Link zur Seite.

Zitat:

---

Zitat von servpoint

Du kannst es auch mal nach dem Muster

{{file::j_facebookchat.html5}}

versuchen zur Verwendung als Contentelement.

j_facebookchat.html5 sollte im Templateverzeichnis abgelegt werden.

---

Hallo,

vielen Dank für den Tipp, auch das funktioniert leider nicht. Hast Du vielleicht noch eine Idee?

Viele Grüße

Zitat:

---

Zitat von Schaubi1901

Hallo Fiedsch,

vielen Dank für Deine Antwort. Habe das ganze schon über mehrere Arten versucht einzubinden: Html, JavaScript, etc..

Der ausgegebene Code sieht so aus:

HTML-Code:

---

<fieldset id="pal_text_legend" class="tl_box">
<legend onclick="AjaxRequest.toggleFieldset(this,'text_legend','tl_content')">Text/HTML/Code</legend>
<div class="widget">
  <h3><label for="ctrl_html" class="monospace"><span class="invisible">Pflichtfeld </span>HTML-Code<span class="mandatory">*</span></label> <a href="contao/help?table=tl_content&amp;field=html" title="Den Hilfe-Assistent aufrufen" onclick="Backend.openModalIframe({'title':'HTML-Code','url':this.href});return false"><img src="system/themes/flexible/icons/about.svg" width="16" height="16" alt="Den Hilfe-Assistent aufrufen"></a></h3>
  <textarea name="html" id="ctrl_html" class="tl_textarea monospace noresize" rows="12" cols="80" required onfocus="Backend.getScrollOffset()">&lt;script&gt;
  var div = document.createElement('div');
  div.className = 'fb-customerchat';
  div.setAttribute('page_id', 'xxxxxxxx');
  div.setAttribute('ref', 'b64:V0VCX0RF');
  div.setAttribute('logged_in_greeting', 'Entdecke den König Ludwig Lauf mit KINI');
  div.setAttribute('logged_out_greeting', 'Entdecke den König Ludwig Lauf mit KINI');
  div.setAttribute('theme_color', '#ccd626');
  document.body.appendChild(div);
  window.fbMessengerPlugins = window.fbMessengerPlugins || {
    init: function () {
      FB.init({
        appId            : '1678638095724206',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v3.3'
      });
    }, callable: []
  };
  window.fbAsyncInit = window.fbAsyncInit || function () {
    window.fbMessengerPlugins.callable.forEach(function (item) { item(); });
    window.fbMessengerPlugins.init();
  };
  setTimeout(function () {
    (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 = &quot;//connect.facebook.net/en_US/sdk/xfbml.customerchat.js&quot;;
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  }, 0);
&lt;/script&gt;</textarea><script>

---

Viele Grüße und vielen Dank.
Schaubi

---

Das, was du da gepostet hast, ist der ausgegebene HTML Code aus dem Backend, nicht aus dem Frontend.

Zitat:

---

Zitat von Spooky

Das, was du da gepostet hast, ist der ausgegebene HTML Code aus dem Backend, nicht aus dem Frontend.

---

Hallo Spooky,

vielen Dank für Deine Nachricht. Im ersten Post steht der zu implementierende Code. Eine Idee?

Viele Grüße

Du musst, wie schon gesagt, einen Link posten.

Zitat:

---

Zitat von Spooky

Du musst, wie schon gesagt, einen Link posten.

---

Hallo Spooky,

würde gerne auf diese Seite den Chat einbinden: https://koenig-ludwig-lauf.com/News_de.html

VG
Schaubi

Soweit der Quelltext das zeigt hast Du das FB-Teil zweimal eingebunden ...

Zitat:

---

Zitat von lucina

Soweit der Quelltext das zeigt hast Du das FB-Teil zweimal eingebunden ...

---

Hallo Lucina,

war tatsächlich zweimal eingebunden. Habe es jetzt einmal entfernt, ändert aber nichts am Ergebnis.

Viele Grüße
Schaubi

Der Fehlermeldung in der Konsole zufolge

Zitat:

---

Refused to display 'https://www.facebook.com/v3.3/plugins/customerchat.php (...) ' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.facebook.com".

---

geht es hier für Dich weiter: https://developer.mozilla.org/en-US/...rame-ancestors

Wenn Du in die Console Deines Browsers schaust, siehts Du, daß es beim Einbinden einen Fehler gab.

Code:

---

[Error] Refused to load https://www.facebook.com/v3.3/plugins/customerchat.php?...  because it does not appear in the frame-ancestors directive of the Content Security Policy.

---

Was das bedeutet und was Du ändern musst, kann ich Dir aber nicht sagen.

Edit: zu spät.

Zitat:

---

Zitat von lucina

Der Fehlermeldung in der Konsole zufolge

geht es hier für Dich weiter: https://developer.mozilla.org/en-US/...rame-ancestors

---

Hallo Lucina,
vielen Dank für Deinen Input. Kannst DU mir sagen, wo ich das Ganze ändern muss?

Viele Grüße

Naja, Du müsstest halt da, wo Du die CSP eingestellt hast, facebook.com als Ausnahme hinzufügen - das steht doch aber auch alles in dem Mozilla-Link.

Zitat:

---

Zitat von lucina

Naja, Du müsstest halt da, wo Du die CSP eingestellt hast, facebook.com als Ausnahme hinzufügen - das steht doch aber auch alles in dem Mozilla-Link.

---

Hallo Lucina,
vielen Dank für die schnelle Antwort. Leider habe ich keine CSP erstellt. Dass muss Contao automatisch gemacht haben, somit weiss ich leider nicht wo ich diese finde.

Viele Grüße
Schaubi

CSP wird an der Quelle eingestellt, also bei dem Server, der den Inhalt des Frames liefern soll (soweit ich weiß).

Zitat:

---

Zitat von folkfreund

CSP wird an der Quelle eingestellt, also bei dem Server, der den Inhalt des Frames liefern soll (soweit ich weiß).

---

Nö, das bestimmt ja, von welchen Servern nachgeladen werden soll und darf.

Zitat:

---

Fetch directives control locations from which certain resource types may be loaded.

---

Man kann das serverseitig einstellen (durch Header-Direktiven) oder, falls man da nicht drankommt, auch durch <meta>-Tags (beispielsweise im Seitenlayout oder direkt in der fe_page).

Nur https erlauben:

HTML-Code:

---

<meta http-equiv="Content-Security-Policy" content="default-src https:">

---

Nachladen von example.com erlauben:

HTML-Code:

---

<meta http-equiv="Content-Security-Policy" content="default-src https://example.com; child-src 'none'; object-src 'none'">

---

Und so weiter und so fort ... ;-)

(ungetestet dahingeschlurt, lies Dich mal selbst durch die Dokumentation bitte)

Oh - wieder was gelernt :-)

Ich hatte meine Annahme geschlossen aus

Zitat:

---

Setting this directive to 'none' is similar to X-Frame-Options: deny

---

in der weiter oben verlinkten Doku. Sorry für die Verwirrung :o.