RaaS Site Implementation

Skip to end of metadata
Go to start of metadata

Description

This page discusses the structure of the source files and folders that constitute this site, emphasizing the Gigya related parts within these source files. In addition, this page takes you through the process of implementing Gigya's Social Login within the site.

You can download the current website code used on our RaaS Demo site  here .

Client Side - Main Pages and Page Layout

The public pages of this site are:

Page Layout

These five pages comprise a similar layout, with the main content changing according to the requested page:

 

Header

The document HTML <head> (opposed to the layout header), is the part of the HTML document that stores metadata about the page.
It is included via the header.php file into every page of the site.

The Gigya related elements in this source file are: 

1. Including Gigya's Web SDK in the section:

<script type="text/javascript" lang="javascript" src="http://cdn.gigya.com/JS/gigya.js?apikey=<?php echo $gigya_api_key;?>">

Note: The apikey is a required parameter. An API key may be obtained from the Site Dashboard page on Gigya's website. In our demo site, the API key is defined in config.php using the global parameter $gigya_api_key.
 

2. Defining a global configuration object:

{    // Global configuration object for Gigya JS API methods
        sessionExpiration:0 // expire the user login session when the browser closes
        ,autoShareExpiration: expire5min // User's auto-share selection will expire after 5 min
        ,facebookInitParams: {"cookie":true, "status":true, "xfbml":true, "oauth":true} // Facebook init for Graph Actions
        ,deviceType: 'auto' // Automatically identify the device mobile/desktop (using user-agent) and optimize the view of the plugins accordingly
}

Explanation:

  • The Global Configuration consists of various optional members, which are passed as parameters to all Gigya's Web SDK method calls.
  • The sessionExpiration parameter is set to '0' - due to this, closing the browser will terminate the user login session.
  • The autoShareExpiration parameter is set to 5 minutes (Unix time format) - meaning the user's Automatic Sharing selection will expire after 5 minutes.

 

3. Defining Open Graph and Twitter Card Tags

Though the Open Graph protocol and Twitter Cards are not part of Gigya's platform, they are mentioned here since we highly recommend defining these Tags when implementing Gigya's Share Bar plugin.

You do not need a Twitter app to use Twitter Cards and you can readily use text and image Cards without any special approval from twitter.

It is important to note that by utilizing Twitter Cards you can add the additional information contained within the Card to the 140 character limit of the posters original tweet.

 

Here is an example of how to implement these tags, which should be placed near the bottom of the <head> section of any page you want to share:

<!-- Facebook OG Tags -->
<meta property="fb:app_id" content="<?php echo $FBAppID?>">
<meta property="og:url" content="<?php echo $pageURL ?>">
<meta property="og:title" content="<?php echo $title ?>">
<meta property="og:description" content="<?php echo $description ?>">
<meta property="og:type" content="socializedemo:recipe">
<meta property="og:image" content="<?php echo $websiteUrl . '/' . $image ?>">
<meta property="og:site_name" content="<?php echo $websiteName ?>"/>
 
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourTwitterHandle">
<meta name="twitter:creator" content="@YourTwitterHandle">
<meta name="twitter:title" content="<?php echo $title ?>">
<meta name="twitter:description" content="<?php echo $description ?>">
<meta name="twitter:image" content="<?php echo $websiteUrl . '/' . $image ?>">

The values of the tags are variables which receive different values per page in the site. For example, in recipe1.php the variables receive the following values:

$title = "Gateau a la Royale";
$image = "images/recipe1.jpg";
$description = "Daily Recipe is a Gigya demo site...";

 

4. Google Analytics Integration

Gigya provides a plug&play solution for Google Analytics.

The following code loads Gigya's Google Analytics plug&play library:

<script type="text/javascript" src="http://cdn.gigya.com/js/gigyaGAIntegration.js"></script>
The following code loads Google Analytics (Google API):
<script type="text/javascript">
    // Google Analytics load
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXXXXX-1']); // << Insert your personal UA code here
    _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>

 

Sidebar

The sidebar is geared towards community interaction. In our live DailyRecipe Site the side bar includes our Loyalty Add-on
It is included in the sidebar.php file into every page of the site.

To see the code that implements each of these add-ons, hover over the add-on you wish to inspect and click on 'get Code'. A window will open with code for displaying that specific plugin.

Site Menu

The Site Menu includes the code to display the Menu along the top of all pages. It also includes some JavaScript to ensure that the page being viewed is reflected as the active tab.

The Site Menu is placed here via the siteMenu.php file (and mobileMenuInc.php for mobile devices and small screens), from outside of the individual pages, in order to centralize the location for updating and maintenance of links when pages are added to, or deleted from, the site.

The footer adds a few links (including a link to the about.php page) and includes the calls to initiate several Gigya Add-ons (sharebar, reactionsbar, and comments) as well as gives closure to the page.

The footer is included on all pages via the footer.php file.

Main Part of the Page

The main area contains the sites content, along with different Add-ons that support socializing the content such as the Share bar Add-on, Reactions Add-onComments Add-on and Ratings & Reviews. Again, the code to implement these add-ons can be obtained by hovering over the add-on you are interested in and clicking Get Code.

Note that for the share bar it is required to characterize the shared post, either by adding open-graph tags, or by creating a User action object. 

A userAction object can be created with the following JavaScript example code:

UserAction Object

The pages define a global UserAction object, which is used by the Gigya plugins that are listed below.

var defaultUserAction = new gigya.socialize.UserAction();
defaultUserAction.setTitle('" . addslashes($title) . "');  // The title of the recipe page
defaultUserAction.setLinkBack('" . $pageUrl . "');       // The page URL
defaultUserAction.setDescription(\"" . addslashes($description) . "\");  // The description of the recipe page
var shareimage = {
   href: '" . $pageUrl . "',
   src: '" . $imageUrl . "',            // The image of the recipe    type: 'image'
};
defaultUserAction.addMediaItem(shareimage);

Folders & Files

The site sources are comprised of the following folders:

  • root folder - in addition to the site's page files that are described above (i.e., index.php, receipe1.php, receipe2.php,  receipe3.php, about.php), the root folder includes the following files:
    • sidebar.php
    • header.php
    • footer.php
    • siteMenu.php
    • mobileMenuInc.php - Site Menu for smaller screens.
    • GSSDK.php - Gigya's PHP SDK code file.
    • raas-reg.php - A PHP file that handles login functionality such as verifying the user's signature.
    • config.php - Configuration file. This file actually should be created by the user, as it holds private information such as the site's API key.
    • favicon.ico - Site's favicon
    • README_FIRST.txt - A small text file explaining how to activate the site for use on your own server.
  • css - The site's style sheets and fonts.
  • images - The site's image files.
  • js - This folder includes the following JS library files:
    • beautify.js - a JavaScript formatter.
    • codeinfo.json - JSON objects containing the code for each plugin displayed.
    • fbAction.js - Implementation of posting Facebook Open Graph Action.
    • gigyaPlugins.js - script to initialize and load all of Gigya's plugins on the page.
    • jquery.simplemodal.js - JQuery JS library
    • json2.js - JSON2 library file
    • main.js - a general JS file to attach event listeners on the DOM.
    • mobile.js - implements the Mobile version of the site menu.

 

config.php

The config.php is a global configuration file where you define certain personal elements for your site.
If you wish to implement your own version of the demo site, you will need to edit the config.php and place your API key within the $apiKey variable and your Secret within the $currentSecret variable. For more information see the included README_FIRST.txt file.

It is important to note that if you are not using the Default collection of Screen-Sets, you MUST also edit the siteScreenSet variable in the gigyaPlugins.js file on Line 1.

<?php
// PRODUCTION
$apiKey = '<YOUR API KEY GOES HERE>';
$currentSecret= '<YOUR SECRET KEY GOES HERE>';
/*
IMPORTANT: Verify that the correct screen-set collection name is defined in gigyaPlugins.js for 
the 'siteScreenSet' variable!!
*/
?>

 

raas-reg.php

The main functionality of raas-reg.php is to validate incoming login requests, with a function that communicates the user's login signature to Gigya's server:

if (SigUtils::validateUserSignature($uid, $timestamp, $secret, $userSignature)) {
    //Signature is valid
     ...
     }
else {
    //Invalid signature
    ...
}

 

Activating Loyalty in Your Local Daily Recipe Site

Note: If you plan on integrating the Loyalty (GM) platform, we highly recommend reading the Loyalty - Gamification and User Behavior Guide. Loyalty is a premium platform that requires separate activation. If Loyalty is not part of your site package please contact your Gigya Account Manager or contact us by filling in a support form on our site. You can also access the support page by clicking "Support" on the upper menu of Gigya's site.

 

  1. Set up and configure your GM platform.
  2. Edit the gigyaPlugins.js file within the JS directory - place your gamification cateoryID's and streamID's in the appropriate method's parameters object.

Read more about Gigya's Game Mechanics platform.

Mobile Support

The site itself is responsive, including the Gigya Screen-Sets and add-ons which by design adapt to mobile screens. See also Mobile Support.