Skip to main content

How to include multiple instances of GraphComment on the same page

GraphComment support team
  • Updated

CASE 1

If you want to include multiples instances of GraphComment on the same page when you have 2 different WEBSITES in GraphComment Admin (you must have created them before),
you can use following code snippet:

<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
</head>
<body>
<div id="graphcomment-1"></div>
    <div id="graphcomment-2"></div>

    <script type="text/javascript">
      window.gc_ready = function() {
        window.graphcomment({
          graphcomment_id: 'website_id_1',
          target: document.getElementById('graphcomment-1'),
        });

        window.graphcomment({
          graphcomment_id: 'website_id_2',
          target: document.getElementById('graphcomment-2'),
        });
      };

      /* - - - DON'T EDIT BELOW THIS LINE - - - */

      (function() {
        var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
        gc.src = 'https://graphcomment.com/js/integration.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
      })();

    </script>
</body>
</html>>

 

 

By using the `target` parameter, you can define in which HTML element GraphComment will be rendered.

 

CASE 2

If you have only 1 WEBSITE and you want to combine 2 GraphComment instances of 2 previously created pages, like PAGE A and PAGE B on a third page PAGE C, you can use following code snippet:

<!DOCTYPE html>
<html>
<head>
	<title>PAGE C</title>
</head>
<body>
<div id="graphcomment-page-A"></div>
<p>test</p>
    <div id="graphcomment-page-B"></div>
    <script type="text/javascript">
      window.gc_ready = function() {
        window.graphcomment({
          graphcomment_id: 'demo-gc',
          url : 'https://graphcomment.com/your-URL-A.html',
          target: document.getElementById('graphcomment-page-A'),
        });
        window.graphcomment({
          graphcomment_id: 'demo-gc',
          url : 'https://graphcomment.com/your-URL-B.html',
          target: document.getElementById('graphcomment-page-B')
        });
      };
      /* - - - DON'T EDIT BELOW THIS LINE - - - */
      (function() {
        var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
        gc.src = 'https://graphcomment.com/js/integration.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
      })();
    </script>
</body>
</html>

Related articles