Contao-Camp 2024
Ergebnis 1 bis 26 von 26

Thema: Facebook Chat Plugin einbinden

  1. #1
    Contao-Nutzer
    Registriert seit
    12.02.2018.
    Beiträge
    21

    Standard 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
    Geändert von xchs (06.01.2020 um 00:32 Uhr) Grund: Code-Tags

  2. #2
    Contao-Fan
    Registriert seit
    16.11.2012.
    Ort
    Freiburg
    Beiträge
    539

    Standard

    Was geht nicht? Erhältst du eine Meldung?
    Grüße
    Alex

  3. #3
    Contao-Nutzer
    Registriert seit
    12.02.2018.
    Beiträge
    21

    Standard

    Zitat Zitat von 07alex07 Beitrag anzeigen
    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

  4. #4
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    Wie hast Du den JS-Code eingebunden? Was steht im erzeugten HTML, das Contao ausliefert?
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  5. #5
    Contao-Nutzer
    Registriert seit
    12.02.2018.
    Beiträge
    21

    Standard

    Zitat Zitat von fiedsch Beitrag anzeigen
    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
    Geändert von xchs (06.01.2020 um 00:32 Uhr) Grund: Code-Tags

  6. #6
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    Dann hast Dum mit dem escapten Script-Tag (&lt;script&gt;) 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.
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  7. #7
    Contao-Nutzer
    Registriert seit
    12.02.2018.
    Beiträge
    21

    Standard

    Zitat Zitat von fiedsch Beitrag anzeigen
    Dann hast Dum mit dem escapten Script-Tag (&lt;script&gt;) 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

  8. #8
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    Zitat Zitat von Schaubi1901 Beitrag anzeigen
    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.
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  9. #9
    Contao-Fan
    Registriert seit
    30.06.2009.
    Beiträge
    370

    Standard

    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.
    Servicepoint.de - Angebote, Empfehlungen und Dienstleistungen

  10. #10
    Contao-Nutzer
    Registriert seit
    12.02.2018.
    Beiträge
    21

    Standard

    Zitat Zitat von fiedsch Beitrag anzeigen
    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

  11. #11
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.897
    Partner-ID
    10107

    Standard

    Poste einen Link zur Seite.

  12. #12
    Contao-Nutzer
    Registriert seit
    12.02.2018.
    Beiträge
    21

    Standard

    Zitat Zitat von servpoint Beitrag anzeigen
    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

  13. #13
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.897
    Partner-ID
    10107

    Standard

    Zitat Zitat von Schaubi1901 Beitrag anzeigen
    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.

  14. #14
    Contao-Nutzer
    Registriert seit
    12.02.2018.
    Beiträge
    21

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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

  15. #15
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.897
    Partner-ID
    10107

    Standard

    Du musst, wie schon gesagt, einen Link posten.

  16. #16
    Contao-Nutzer
    Registriert seit
    12.02.2018.
    Beiträge
    21

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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

  17. #17
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

  18. #18
    Contao-Nutzer
    Registriert seit
    12.02.2018.
    Beiträge
    21

    Standard

    Zitat Zitat von lucina Beitrag anzeigen
    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

  19. #19
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Der Fehlermeldung in der Konsole zufolge
    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

  20. #20
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    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.
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  21. #21
    Contao-Nutzer
    Registriert seit
    12.02.2018.
    Beiträge
    21

    Standard

    Zitat Zitat von lucina Beitrag anzeigen
    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

  22. #22
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  23. #23
    Contao-Nutzer
    Registriert seit
    12.02.2018.
    Beiträge
    21

    Standard

    Zitat Zitat von lucina Beitrag anzeigen
    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

  24. #24
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

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

  25. #25
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von folkfreund Beitrag anzeigen
    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.
    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)

  26. #26
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

    Oh - wieder was gelernt :-)

    Ich hatte meine Annahme geschlossen aus
    Setting this directive to 'none' is similar to X-Frame-Options: deny
    in der weiter oben verlinkten Doku. Sorry für die Verwirrung .

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •