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.
Client Side - Main Pages and Page Layout
The public pages of this site are:
- index.php - Home page.
- recipe1.php - Recipe of the Day page.
- recipe2.php - Our Favorite page.
- recipe3.php - Most Popular page.
- about.php - About page.
These five pages comprise a similar layout, with the main content changing according to the requested page:
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:
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:
- 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.
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:
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:
4. Google Analytics Integration
Gigya provides a plug&play solution for Google Analytics.
The following code loads Gigya's Google Analytics plug&play library:
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.
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-on, Comments 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.
The pages define a global UserAction object, which is used by the Gigya plugins that are listed below.
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:
- 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:
- 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.
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.
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:
Activating Loyalty in Your Local Daily Recipe Site
- Set up and configure your GM platform.
- 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.
The site is designed to be responsive, with a responsive design for mobile. This includes the Gigya add-ons which adapt to mobile sized screens. See also Adapted UI for Mobile View.