Demo Site

Last modified 09:24, 21 May 2015


Go to Site  |   Download Code
 

Overview

The Daily Recipe site is a Gigya demo site written in PHP and JavaScript. This demo outlines how to make a web site social using Gigya's platform. The demo site's code is available for you to download, use and learn about the site implementation.

 

Note: This site implements the social backbone manually without the use of Gigya's RaaS. To view the RaaS enabled site, go to the RaaS Daily Recipe demo site.

2015-02-15_174046.png



Gigya provides a large array of features for sites and this sample site makes use of only a few of these capabilities. Some of the features that are used in this site are:

  • Social Login - Social login and registration. Manages account linking between a user’s existing site account and social identities, connects to more than 20 social and identity providers, enables access to rich profile data including email addresses, provides standardized data field structure and nomenclature across identity providers.
  • Share Bar plugin - The plugin displays a bar of buttons for sharing to social destinations.
  • Comments plugin - The plugin displays a commenting stream.
  • Reactions plugin - A one-click reaction buttons bar, allowing users to easily interact with posts or content on your site.
  • Game Mechanics plugins - Social loyalty and rewards plugins, increasing site engagement and making users' experience more enjoyable.
  • Activity Feed plugin - The plugin displays recent user activities in a feed stream.
  • Follow Bar plugin - The plugin displays a bar of "follow" buttons, so your users can follow news and keep updated through different communications channels.
  • Rating & Reviews plugins - The plugins give your customers an easy way to provide feedback on product and content across your site. The Rating & Reviews plugins are available in bottom of the About page of the site.
  • Facebook Open Graph Actions - Use Gigya's API to publish Open Graph actions.
     

From the implementation point of view:
The site's web pages use the JavaScript API to integrate the plugins and client site API method calls. The server side code uses PHP SDK to communicate with Gigya, as part of the Social Login implementation.
 

Gigya Plugins within a Web Page:

DailyRecipe-Plugins.png

 


Within the Login & Registration Dialogs:

 

File:010_Developer_Guide/855_Demo_Site/DailyRecipe-LoginPlugin2.png

Plugin Implementation Code Snippets 

You can take a look at each of the Gigya components' source code by hovering over the component that you wish to examine and clicking 'Get Code', or click on 'Docs' to open a link to Gigya's documentation on the relevant plugin.

getCodeFollow.png

Once you click 'Get Code', a window will open containing the code that implements the hovered plugin. From there you can grab the code and paste it onto your website, and also fiddle with the parameters and examine the various options available for the plugin, along with the information available in the plugin's documentation page.

loginSource.png

 

Putting Plugin Data to Use

Once you have placed one of Gigya's social plugins on your website, it starts to accumulate data in relation to the use of that plugin.
That data can later on be viewed in the reports section of your administrator console, and can also be retrieved via code and used to preform logical actions on your site.

For example, the following code demonstrates how to retrieve the reactions plugin's counters from the demo site's recipe page, and prompt the visiting user to recommend the recipe.
Click on 'Run Code' to see it in action.
 

<html>
<head>
<!-- including the gigya.social.js script -->
	<script type="text/javascript" src="http://cdn.gigya.com/JS/socialize.js?apikey=2_EWWT3Zd9zqdy7qjHXV91o6mYy8TLdfd_kCQydHG2to70MPdklSd4P7wAd8n2B4yP">
	</script>
	<script>
		function runCode(){
    
			gigya.socialize.getReactionsCount({barID: "recipe1", callback: pRes});

		};
		
		function pRes(response){
			if ( response.errorCode == 0 ) {           
				var myCounts = response['counts'];     
				if (myCounts.length>0) {      
					var msg = '';      
					for (index in myCounts) {
						if (myCounts[index].buttonId == 'recommend'){
							recs = myCounts[index].count;
							msg += "This recipe was recommended by " + recs + " people. \n If you like this article, be the " + (recs+1) + "th person to recommend";
						}
					}
					if (msg.length > 0){
						alert(msg);
					}
				}
				else {
					alert('No Counts were returned');
				}
			}
			else {
				alert('Error :' + response.errorMessage);
			}
		};
	</script>
</head>
<body>
	<p><button onclick="runCode()">Run Code</button></p>
</body>
</html>

Note:
In order to make this code work in your environment, please:
  • Click the "view source" icon (link located above code on the right hand side) - This will open a popup window with a text version of the code, which you may copy.
  • 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 on 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.

Demo Site Signals

The demo site implements Gigya's signals service. Counters are held for the following activities:

Installing the Site on Your Own Host

In order to run the Daily Recipe site on your local environment, go to the site's implementation guide and follow the instructions on the installation section.

Learn More

Learn about the Demo site implementation. Examine how Gigya's Social Login is implemented within the site. Dive into the structure of the source files and folders that constitute this site, emphasizing the Gigya related parts within these source files.

Please note that this site is a demo site focusing on demonstrating Gigya's integration. Hence the site is written in a simplified way. Please do not consider this site as a best practice for site implementation.
Page statistics
22549 view(s) and 16 edit(s)
Social share
Share this page?

Tags

This page has no custom tags.
This page has no classifications.

Comments

You must to post a comment.

Attachments