Applifier Bar – Integration Guide

Basic integration:

Insert the following snippet to your HTML with the Applifier Application ID you received from registration and users’ third-party user ID from Facebook.

<div id="applifier_bar"></div>

<script type="text/javascript">
(function() {
  window.applifierAsyncInit = function() {
    Applifier.init({applicationId: YOUR_APPLIFIER_APPLICATION_ID, thirdPartyId: "FACEBOOK_THIRD_PARTY_ID"});
    // example1: horizontal bar
    var bar = new Applifier.Bar({barType: "bar", barContainer: "#applifier_bar"});
    // example2: horizontal bar with fluid width disabled
    var bar = new Applifier.Bar({barType: "bar", barContainer: "#applifier_bar", fluidWidth: false});
    // example3: vertical bar
    var bar = new Applifier.Bar({barType: "vbar", barContainer: "#applifier_bar"});
    // example4: AutoBar
    var bar = new Applifier.Bar({barType: "bar", barContainer: "#applifier_bar", autoBar: true});
  };

  var a = document.createElement('script'); a.type = 'text/javascript'; a.async = true;
  a.src = (('https:' == document.location.protocol) ? 'https://secure' : 'http://cdn') + '.applifier.com/applifier.min.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(a, s);
})();
</script>

AutoBar

With AutoBar enabled, Applifier.Bar loads the horizontal or the vertical version of the bar to the same bar container and even changes automatically on the fly, based on browser screen width available.

Integrating the AutoBar functionality requires the basic knowledge of your games HTML content flow and CSS.

You can change the layout of your page and fine-tune the bar positioning based on two HTML class values toggled automatically by Applifier.Bar while running, body.autobar-horizontal and body.autobar-vertical.

CSS Example:

/* autobar-vertical/autobar-horizontal classes are toggled by Applifier.Bar */

body.autobar-vertical #game {
  margin-left: 130px;
  left: 10px;
}

body.autobar-vertical #applifier_bar {
  position: absolute;
  top: 0px;
  left: 0px;
}

body.autobar-horizontal #applifier_bar {
  margin-bottom: 10px;
}

Vertical bar is automatically positioned height wise next to your Flash container if the vertical CSS rules for #applifier_bar (barContainer) are set to position: absolute and top: 0px.

HTML Example

The following example outlines the structure how the HTML divs should be placed in order to get correct behavior of the game and the bar during screen resizing.

<div id="applifier_bar"></div>
<div id="game">
<div id="centered" style="margin:auto;">
<div id="game_top_bar"></div>
<div id="game_container">
      <!-- your game Flash goes here-->
   </div>
<div id="game_bottom_bar"></div>
</div>
</div>

There have been a couple of integrations where the