|
 |
Web Pages (Javascript)From $1Table of contentsThe following document provides the basic knowledge needed for integrating Wildfire in your Website. We will start with a basic example of a web page that uses Wildfire - the Wildfire "Hello World". In the example, we used the default code generated by the Standard Setup Wizard, wrapped in with the most basic web page. The example is followed by code explanations that emphasize the parts in the code which you should modify once you place this code in your site.
Basic Working ExampleRun the Example:
The Example Code:<html>
<head>
<!-- Step 1 - Including the Wildfire API: -->
<script src="http://cdn.gigya.com/wildfire/js/wfapiv2.js"></script>
</head>
<body>
<br />Wildfire Post example page<br /><br />
<!-- Step 2 - Setting the content of the post (place your content HTML to post here): -->
<textarea rows="1" cols="1" id="TEXTAREA_ID" style="display: none">
Hello from Gigya!!! (Post content)
</textarea>
<!-- Step 3 - Positioning Wildfire Post on the screen: -->
<div id="divWildfirePost"></div>
<script>
var pconf = {
defaultContent: 'TEXTAREA_ID'
};
Wildfire.initPost('PARTNER-ID', 'divWildfirePost', 400, 300, pconf);
</script>
</body>
</html>
Notes:
From Wizard to Code:Step 3 in the Standard Setup Wizard provides generated code which you can copy and paste into your web-page. This section demonstrates this process. Here is a snapshot of Step 3 in the Standard Setup Wizard:
The two pieces of code are highlighted in different colors to simplify this demonstration. Now, we take the two pieces of code and wrap the most basic web page around them, as demonstrated below. The following code is identical to the code in the example above. In this case, however, the two pieces of code taken from the Wizard are highlighted using the same two colors:
The wrapper HTML code basically adds HTML <head> and <body> sections and defines a text-area which envelops the content HTML to be posted by Wildfire.
The following section delves a bit deeper, explaining each part of the code in details.
Explanation of code:Step 1 - Including the Wildfire API (line 4):Include the Wildfire API code in your page by adding the line of code which appears below (the first piece of code generated by the Wizard). <script src="http://cdn.gigya.com/Wildfire/js/wfapiv2.js"></script> The preferred location is in the <HEAD> section of the page. However, it can also be placed at any other location, as long as it precedes any calls to the Wildfire API. Step 2 - Defining the Content of the Post (lines 10-12):Define an HTML text-area that will envelop your HTML content to post. Provide an ID for the text-area (i.e.: id="TEXTAREA_ID"). This ID will be used as a parameter sent to Wildfire.initPost method for identifying the content you wish to post (line 19). Place the content HTML you wish to post in the text-area, instead the text in line 11: <textarea rows="1" cols="1" id="TEXTAREA_ID" style="display: _fckstyle="display: none">
Hello from Gigya!!! (Post content)
</textarea>
Step 3 - Positioning Wildfire on the Screen (line 15-23):This is the second piece of code generated by the Wizard. This section explains the content of this code. Full comprehension of this section is required only for advanced integration scenarios, or if you wish to perform manual tweaks. a. Adding a Container (line 15):Wildfire requires the hosting page to provide a uniquely identified container element from which the Wildfire UI will be drawn. The recommended container is a simple <DIV>, but it can be any element as long as it has a unique ID which can be referenced by Wildfire. In the above example: <div id="divWildfirePost"></div> b. Setting Wildfire Post Parameters (lines 19-22):Wildfire uses a configuration object to set its parameters. There are various supported parameters. Each parameter has a default value which you may override by setting its value in the configuration object. Please refer to the Configuration Parameters page, for a full reference guide to the various parameters supported by Wildfire. In the above example - we created a configuration object called "pconf" and set one parameter - "defaultContent" with the value of the text-area ID taken from Step 2. var pconf = {
defaultContent: 'TEXTAREA_ID'
};
Note: You may avoid Step 2 by placing the HTML of the content directly as the value of defaultContent. In such a case, it is necessary to wrap the HTML code in apostrophes.
For example: var pconf = {
defaultContent: 'Hello from Gigya!!! (Post content)'
};
c. Initializing Wildfire Post (line 22)The initialization phase is when Wildfire actually draws itself on the page. Initialization occurs by calling the Wildfire.initPost() function (see the Wildfire.initPost() entry in the API Reference for a detailed syntax of this function). Wildfire.initPost('PARTNER-ID', 'divWildfirePost', 400, 300, pconf);
In our example - The first parameter - 'PARTNER-ID' should be replaced with your own partner ID which you can get from your Account Settings page on the Gigya website. The second parameter - 'divWildfirePost', is the identifier of the <DIV> wherein Wildfire is to be drawn. The third and fourth parameters - specify the dimensions of Wildfire (400x300). The fifth parameter - "pconf", is the configuration object which we defined in the section "b. Setting Wildfire Post parameters (lines 19-22)" above.
Tags:
Files (0) |
||||
|
