The gigya-markup's intro from scotthovestadt

Gigya Markup (Unofficial Open-Source Extension to Gigya SDK)

All parameters are passed via data-* attributes. Dimensions of UI elements automatically set from CSS. Responsive design supported. Page flickering eliminated. No JavaScript required!

View markup-only demo. View source code.

Installation

Place script source //cdn.gigya-ext.com/gy.js in <head> tag after official Gigya SDK:

<!-- Official Gigya SDK -->
<script type="text/javascript" src="https://cdns.gigya.com/JS/socialize.js?apiKey=<API KEY HERE>"></script>

<!-- Gigya Markup (included AFTER official Gigya SDK) -->
<script src="//cdn.gigya-ext.com/gy.js" type="text/javascript"></script>

Side-by-side code comparison

Compare Gigya SDK-only code with the Gigya Markup alternative. (Note: Gigya Markup sits on top of the Gigya SDK and they can be used together when necessary.)

Markup only

View code in browser.

<!-- Will only show when the user is logged out, visible by default (gy-hide-if). -->
<div class="gy-hide-if-logged-in">
  <h4>Please login</h4>

  <!-- Render login UI. Dimensions set via CSS (inline CSS is NOT required). -->
  <div class="gy-ui-login"
       data-enabled-providers="facebook, twitter, linkedin, google"
       style="width: 140px; height: 35px;"></div>
</div>

<!-- Will only show when the user is logged in, invisible by default before screen is painted (gy-show-if). -->
<div class="gy-show-if-logged-in">
  <!-- Renders field from account info. -->
  <h4>Welcome back <span class="gy-ui-account-info" data-field="profile.firstName"></span></h4>

  <!-- Logout when clicked. -->
  <a class="gy-click-logout" href="#">Logout</a>
</div>

Gigya SDK only

<script type="text/javascript">
$(document).ready(function() {
  // Render login UI. Dimensions must be set in JavaScript code.
  gigya.socialize.showLoginUI({
    containerID: 'login-ui',
    enabledProviders: 'facebook, twitter, linkedin, google',
    width: 140,
    height: 35
  });

  // Bind to logout link.
  $('.logout').on('click', function() {
    gigya.accounts.logout();
  });

  // Bind to account login events and current session.
  gigya.accounts.addEventHandlers({
    onLogin: drawElements,
    onLogout: drawElements
  });
  gigya.accounts.getAccountInfo({
    callback: drawElements
  });
  function drawElements(account) {
    if(account && account.UID) {
      // User is logged in.
      $('.logged-in-container').show();
      $('.not-logged-in-container').hide();
      $('.first-name').text(account && account.profile ? account.profile.firstName : '');
    } else {
      // User is not logged in.
      $('.logged-in-container').hide();
      $('.not-logged-in-container').show();
      $('.first-name').text('');
    }
  }
});
</script>

<div class="not-logged-in-container">
  <h4>Please login</h4>
  <div id="login-ui"></div>
</div>

<div style="display: none;" class="logged-in-container">
  <h4>Welcome back <span class="first-name"></span></h4>
  <a class="logout" href="#">Logout</a>
</div>

Public Interface

`gy.render({ el: '...' })`

Used when you've dynamically added an element to the DOM. Will render elements. May pass DOM element, jQuery elements, or jQuery selector.

`gy.account.get('profile.firstName')`

User's current account data. Always current. Can be called immediately on page load (powered by local storage cache).

`gy.account.on('changed', callback)`

When account data is changed (on login, logout, set account info, etc).

`gy.account.isLoggedIn()`

Determine if user is logged in. Can be called immediately on page load (powered by local storage cache).

Markup

`ui` markup

ui markup allows rendering of Gigya UI components without JavaScript. Gigya UI methods typically include containerID, width, and height. containerID is automatically set to the ID of the element (when necessary, a new ID is created and attached). width and height are automatically set from CSS and do not need to manually be provided.

If a UI fails to render, the message "An error has occurred. Please try again later." will be shown in place of the UI. To customize this message, the parameter data-error-message can be passed via markup.

Login UI

Documentation: http://developers.gigya.com/display/GD/socialize.showLoginUI+JS

<div class="gy-ui-login" data-enabled-providers="facebook,twitter"></div>

Screen Set UI

Documentation: http://developers.gigya.com/display/GD/accounts.showScreenSet+JS

<div class="gy-ui-screen-set" data-screen-set="Default-RegistrationLogin"></div>

Account Info

Binds to Profile field for logged-in user. Blank when user is not logged in.

<div class="gy-ui-account-info" data-field="profile.firstName"></div>

Share Bar UI

Documentation: http://developers.gigya.com/display/GD/socialize.showShareBarUI+JS

<div class="gy-ui-share-bar" data-share-buttons="share,facebook,facebook-like,googleplus"></div>

Leaderboard UI

Documentation: http://developers.gigya.com/display/GD/gm.showLeaderboardUI+JS

<div class="gy-ui-leaderboard"></div>

Challenge Status UI

Documentation: http://developers.gigya.com/display/GD/gm.showChallengeStatusUI+JS

<div class="gy-ui-challenge-status"></div>

User Status UI

Documentation: http://developers.gigya.com/display/GD/gm.showUserStatusUI+JS

<div class="gy-ui-user-status"></div>

Feed UI

Documentation: http://developers.gigya.com/display/GD/socialize.showFeedUI+JS

<div class="gy-ui-feed"></div>

`if` markup

if markup allows you to bind element visibility to Gigya state. All bindings are available on both the gy-show-if and the gy-hide-if namespaces. gy-show-if bindings are always hidden on page load before the screen is painted and are only revealed when the condition is met (which may require loading state from Gigya). gy-hide-if bindings are always visible on page load and are hidden when the condition is met.

Session

Bind element visibility to session. In the example code below, the contents of if-logged-out is only shown when the user is logged out and the contents of if-logged-in is only shown when the user is logged in.

<div class="gy-show-if-logged-out">
  <h4>Please login</h4>
  <div class="gy-ui-login"></div>
</div>

<div class="gy-show-if-logged-in">
  <h4>Welcome back <span class="gy-ui-account-info" data-field="profile.firstName"></span></h4>
</div>

Conditional

Bind element visibility to condition. Use account.get to safely access even deep fields eg "profile.firstName".

<div class="gy-show-if-condition" data-condition="account.get('loginProvider') === 'facebook'">
  This only shows up if you login with Facebook.
</div>

`click` markup

click markup allows you to bind actions to any clickable element.

Login

Documentation: http://developers.gigya.com/display/GD/socialize.login+JS

<a class="gy-click-login" data-provider="facebook">Login with Facebook</a>

Logout

Documentation: http://developers.gigya.com/display/GD/socialize.logout+JS

<a class="gy-click-logout">Logout</a>

Screen Set