Comments Quick Start Guide

Skip to end of metadata
Go to start of metadata

 

Quick Start - Setup and Integration

Before you begin: Make sure that you have already set up social network application settings before you continue. For more information on how to set up an external application for use with your Gigya account, see the Setting Up External Applications in Social Networks documentation and select a specific network.

Implementation Overview

This guide will help you quickly integrate Gigya's Comments Add-on into your site, with their default settings.

This guide assumes you have already set up a site in the Gigya Dashboard with a valid API Key and that you have RaaS or Social Login enabled for that key and that the gigya.js Web SDK is included on your site.

 

Comments Within A Site-Group

In a site-group, comments work as they do otherwise. Comments are not shareable between multiple API keys, so each child site that uses comments must have their own comments configuration.

 

Integration

The integration process includes two broad stages:

  1. Setting up a New Comment Category on Gigya's website 
    Note: This step is necessary only when integrating the initial instance of the Comments Add-on on your site. When integrating more instances, you can reuse the same settings and jump to Stage 2.
  2. Copying the generated code from Gigya's website and integrating the code into your site 

Setting up a New Comment Category

Every Comments Add-on instance belongs to a Comments Category. The Comments Category provides the option to define a group of Comments Add-on instances that share the same settings. You may define one or more Comments Categories for your domain. Each category may be configured to have different settings. The settings are defined on the server side and may be administrated using the Comments Setup section of Gigya's website.

Follow the steps below to create a new Comments category:

  1. Go to the Comments Setup section of Gigya's website. Please make sure your are signed in. The Comments Setup page may also be accessed by clicking Settings in the upper menu and then Comments in the left menu.
     

     
  2. Click the Add new comment category button:
     
     
  3. Fill in a new Category Name and select the Comments radio button:
        
     
  4. Click OK. A new Comments Category instance is created. Notice the newly created row in the Comments categories table:
     
    The JavaScript code under "Embed code" column is the generated code that you will integrate in your site (next step). The code includes a generated unique categoryID that identifies the newly created category.
    The Comments Settings button leads to an administration screen that lets you change the default settings of the Comments category. This subject is broadly explained in the Configuration and Administration section below.

Integrating the Add-on Code into Your Site

The simplest and fasted way to integrate the Comments Add-on in your site is to copy the "Embed code" from the category row and paste it into the spot in the part of your web page in which you want the Add-on to appear.

 

<script src="http://cdn.gigya.com/JS/gigya.js?apiKey=YOUR-APIKEY-HERE" 
type="text/javascript"></script>
<div id="commentsDiv"></div>
<script type="text/javascript">
    var params =
    {
        categoryID: 'Developers Public Comments',
        streamID: 'streamid',
        version: 2,
        containerID: 'commentsDiv',
        cid:'',
        enabledShareProviders: 'facebook,twitter,linkedin'
    };
    gigya.comments.showCommentsUI(params);
</script> 

 

The best practice, though, is to cut the first line of code and move it to the section of your page. This line loads Gigya's Web SDK.

The outcome is:

<html>
<head>
    <script src="http://cdn.gigya.com/JS/gigya.js?apiKey=2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N" 
        type="text/javascript"></script>
</head>
<body>
    <div id="commentsDiv"></div>
    <script type="text/javascript">
        var params =
        {
            categoryID: 7623701,
            streamID: '',
            version: 2,
            containerID: 'commentsDiv',
            cid:'',
            enabledShareProviders: 'facebook,twitter,linkedin'
        };

        gigya.comments.showCommentsUI(params);
    </script>
</body>
</html>

Notes:

In order to make the above code work in your environment, please note:

  • The API key in the sample will only work on http://localhost/...
  • To load the page from your domain, modify the value of the "APIKey" field in the code to your own Gigya API Key. A Gigya API Key can be obtained from the Site Dashboard page on Gigya's website. Please make sure that the domain from which you are loading the page is the same domain name that you used for generating the API Key.
  • If you are using https, be sure to further adjust the js API url to: https://cdns.gigya.com/JS/gigya.js?apikey=<Your_API_Key>.

The above code is of a basic web page that includes only the Comments Add-on. See this code in action in the Running Example below.

Category ID

Notice the categoryID in line 12. This ID was generated by Gigya and is a unique identifier for the Comments category that you have defined in the previous step.

Stream ID

Notice the streamID in line 13. The streamID identifies a stream of comments within a Comments category. The ID is now empty, meaning that we have a single stream with an empty identifier. Two Comments Add-on instances that share the same categoryID and streamID will show the same comments.
To create several instances of Comments Add-ons that belong to the same category, copy the same code to different spots in your site where you wish to insert the Add-on. In each spot, assign a different identifier (string) to the streamID. We suggest using the permalink as the streamID. Note: streamID is limited to 150 characters and is case-sensitive.

Running Example

 

Comments Add-on Demo

 

 

 

  • No labels