tools/promote/badges.jd

page.title=Google Play
page.image=/images/gp-badges-set.png
page.metaDescription=

@jd:body

  <p itemprop="description"> Google Play  Google </p>

  <p> HTML <em></em></p>

  <p> <a href="{@docRoot}distribute/tools/promote/device-art.html">Device Art Generator</a></p>

  <p> Google Play <a href="{@docRoot}distribute/tools/promote/brand.html#brand-google_play"></a></p>

  <style type="text/css">form.button-form {
  margin-top: 2em;
}
/* the label and input elements are blocks that float left in order to   keep the left edgets of the input aligned, and IE 6/7 do not fully support     22inline-block    22 */
label.block {
  display: block;
  float: left;
  width: 100px;
  padding-right: 10px;
}
input.text {
  display: block;
  float: left;
  width: 250px;
}
div.button-row {
  white-space: nowrap;
  min-height: 80px;
}
div.button-row input {
  vertical-align: middle;
  margin: 0 5px 0 0;
}
#jd-content div.button-row img {
  margin: 0;
  vertical-align: middle;
}
</style>

  <script type="text/javascript">

  // locales for which we have the 'app' badge
  var APP_LANGS = ['it','pt-br','pt-pt','nl','ko','ja','fr','es','es-419','en','de'];

  // variables for creating 'try it out' demo button
  var imagePath = "/images/brand/"
  var linkStart = "<a href=\"https://play.google.com/store/";
  var imageStart = "\">\n"
          + "  <img alt=\"";
    // leaves opening for the alt text value
  var imageSrc = "\"\n       src=\"" + imagePath;
    // leaves opening for the image file name
  var imageEnd = ".png\" />\n</a>";

  // variables for creating code snippet
  var linkStartCode = "&lt;a href=\"https://play.google.com/store/";
  var imageStartCode = "\"&gt;\n"
          + "  &lt;img alt=\"";
    // leaves opening for the alt text value
  var imageSrcCode = "\"\n       src=\"" + imagePath;
    // leaves opening for the image file name
  var imageEndCode = ".png\" />\n&lt;/a>";

  /** Generate the HTML snippet and demo based on form values */
  function buildButton(form) {
    var lang = $('#locale option:selected').val();
    var selectedValue = lang + $('form input[type=radio]:checked').val();
    var altText = selectedValue.indexOf("generic") != -1 ? "Get it on Google Play" : "Android app on Google Play";

    if (form["package"].value != "com.example.android") {
      $("#preview").show();
      var packageName = escapeHTML(form["package"].value);
      $("#snippet").show().html(linkStartCode + "apps/details?id=" + packageName
              + imageStartCode + altText + imageSrcCode
              + selectedValue + imageEndCode);
      $("#button-preview").html(linkStart + "apps/details?id=" + packageName
              + imageStart + altText + imageSrc
              + selectedValue + imageEnd);

      // Send the event to Analytics
      ga('send', 'event', 'Distribute', 'Create Google Play Badge', 'Package ' + selectedValue);
    } else if (form["publisher"].value != "Example, Inc.") {
      $("#preview").show();
      var publisherName = escapeHTML(form["publisher"].value);
      $("#snippet").show().html(linkStartCode + "search?q=pub:" + publisherName
              + imageStartCode + altText + imageSrcCode
              + selectedValue + imageEndCode);
      $("#button-preview").html(linkStart + "search?q=pub:" + publisherName
              + imageStart + altText + imageSrc
              + selectedValue + imageEnd);

      // Send the event to Analytics
      ga('send', 'event', 'Distribute', 'Create Google Play Badge', 'Publisher ' + selectedValue);
    } else {
      alert("Please enter your package name or publisher name");
    }
    return false;
  }

  /** Listen for Enter key */
  function onTextEntered(event, form, me) {
    // 13 = enter
    if (event.keyCode == 13) {
      buildButton(form);
    }
  }

  /** When input is focused, remove example text and disable other input */
  function onInputFocus(object, example) {
    if (object.value == example) {
      $(object).val('').css({'color' : '#000'});
    }
    $('input[type="text"]:not(input[name='+object.name+'])',
            object.parentNode).attr('disabled','true');
    $('#'+object.name+'-clear').show();
  }

  /** When input is blured, restore example text if appropriate and enable other input */
  function onInputBlur(object, example) {
    if (object.value.length < 1) {
      $(object).attr('value',example).css({'color':'#ccc'});
      $('input[type="text"]', object.parentNode).removeAttr('disabled');
      $('#'+object.name+'-clear').hide();
    }
  }

  /** Clear the form to start over */
  function clearLabel(id, example) {
    $("#preview").hide();
    $('#'+id+'').html('').attr('value',example).css({'color':'#ccc'});
    $('input[type="text"]', $('#'+id+'').parent()).removeAttr('disabled');
    $('#'+id+'-clear').hide();
    return false;
  }

  /** Switch the badge urls for selected language */
  function changeBadgeLang() {
    var lang = $('#locale option:selected').val();

    // check if we have the 'app' badge for this lang and show notice if not
    $("div.button-row.error").remove();  // remove any existing instance of error message
    if ($.inArray(lang,APP_LANGS) == -1) {
      $("div.button-row.app").hide();
      $("div.button-row.app").after('<div class="button-row error"><p class="note" style="margin:1em 0 -1em">'
          + 'Sorry, we currently don\'t have the '
          + '<em>Android app on Google Play</em> badge translated for '
          + $("select#locale option[value="+lang+"]").attr("title")
          + '.<br>Please check back later or instead use the <em>Get it on Google Play</em> badge below.'
          + '</p></div>');
    } else {
      $("div.button-row.app").show(); // show the 'app' badge row
    }

    $('.button-row img').each(function() {
      var id = $(this).parent().attr('for');
      var imgName = lang + $('input#'+id).attr('value') + '.png';
      var lastSlash = $(this).attr('src').lastIndexOf('/');
      var imgPath = $(this).attr('src').substring(0, lastSlash+1);
      $(this).attr('src', imgPath + imgName);
    });
  }

  /** When the doc is ready, find the inputs and color the input grey if the value is the example
      text. This is necessary to handle back-navigation, which can auto-fill the form with previous
      values (and text should not be grey) */
  $(document).ready(function() {
    $(".button-form input.text").each(function(index) {
      if ($(this).val() == $(this).attr("default")) {
        $(this).css("color","#ccc");
      } else {
        /* This is necessary to handle back-navigation to the page after form was filled */
        $('input[type="text"]:not(input[name='+this.name+'])',
                this.parentNode).attr('disabled','true');
        $('#'+this.name+'-clear').show();
      }
    });
  });

  </script>

  <form class="button-form">
    <label class="block" for="locale"></label>
    <select id="locale" style="display:block;float:left;margin:0" onchange="changeBadgeLang()">
      <option title="" value="af">Afrikaans</option>
      <option title="" value="ar"></option>
      <option title="" value="be"></option>
      <option title="" value="bg"></option>
      <option title="" value="ca">Catal</option>
      <option title="" value="zh-cn"></option>
      <option title="" value="zh-hk"></option>
      <option title="" value="zh-tw"></option>
      <option title="" value="hr">Hrvatski</option>
      <option title="" value="cs">esky</option>
      <option title="" value="da">Dansk</option>
      <option title="" value="nl">Nederlands</option>
      <option title="" value="et">Eesti</option>
      <option title="" value="fa"></option>
      <option title="" value="fil">Tagalog</option>
      <option title="" value="fi">Suomi</option>
      <option title="" value="fr">Franais</option>
      <option title="" value="de">Deutsch</option>
      <option title="" value="el"></option>
      <option title="" value="en" selected="">English</option>
  <!--
      <option title="" value="iw-he"></option>
  -->
      <option title="" value="hu">Magyar</option>
      <option title="" value="id-in">Bahasa Indonesia</option>
      <option title="" value="it">Italiano</option>
      <option title="" value="ja"></option>
      <option title="" value="ko"></option>
      <option title="" value="lv">Latvieu</option>
      <option title="" value="lt">Lietuvikai</option>
      <option title="" value="ms">Bahasa Melayu</option>
      <option title="" value="no">Norsk (bokml)</option>
      <option title="" value="pl">Polski</option>
      <option title="" value="pt-br">Portugus (Brasil)</option>
      <option title="" value="pt-pt">Portugus (Portugal)</option>
      <option title="" value="ro">Romn</option>
      <option title="" value="ru"></option>
      <option title="" value="sr"> / srpski</option>
      <option title="" value="sk">Slovenina</option>
      <option title="" value="sl">Slovenina</option>
      <option title="" value="es">Espaol (Espaa)</option>
      <option title="" value="es-419">Espaol (Latinoamrica)</option>
      <option title="" value="sv">Svenska</option>
      <option title="" value="sw">Kiswahili</option>
      <option title="" value="th"></option>
      <option title="" value="tr">Trke</option>
      <option title="" value="uk"></option>
      <option title="" value="vi">Ting Vit</option>
      <option title="" value="zu">isiZulu</option>
    </select>
    <p style="clear:both;margin:0"></p>
    <label class="block" for="package" style="clear:left">
</label>
    <input class="text" type="text" id="package" name="package" value="com.example.android" default="com.example.android" onfocus="onInputFocus(this, &#39;com.example.android&#39;)" onblur="onInputBlur(this, &#39;com.example.android&#39;)" onkeyup="return onTextEntered(event, this.parentNode, this)" />
           <a id="package-clear" href="#" onclick="return clearLabel(&#39;package&#39;,&#39;com.example.android&#39;);"></a>
    <p style="clear:both;margin:0"><em></em></p>
    <label class="block" style="margin-top:5px" for="publisher">
</label>
    <input class="text" type="text" id="publisher" name="publisher" value="Example, Inc." default="Example, Inc." onfocus="onInputFocus(this, &#39;Example, Inc.&#39;)" onblur="onInputBlur(this, &#39;Example, Inc.&#39;)" onkeyup="return onTextEntered(event, this.parentNode, this)" />
           <a id="publisher-clear" href="#" onclick="return clearLabel(&#39;publisher&#39;,&#39;Example, Inc.&#39;);"></a>
           <br /><br />


  <div class="button-row app">
    <input type="radio" name="buttonStyle" value="_app_rgb_wo_45" id="ws" />
      <label for="ws"><img src="{@docRoot}images/brand/en_app_rgb_wo_45.png" alt=" Android  Google Play" /></label>

    <input type="radio" name="buttonStyle" value="_app_rgb_wo_60" id="wm" />
      <label for="wm"><img src="{@docRoot}images/brand/en_app_rgb_wo_60.png" alt=" Android  Google Play" /></label>
  </div>

  <div class="button-row">
    <input type="radio" name="buttonStyle" value="_generic_rgb_wo_45" id="ns" checked="" />
      <label for="ns"><img src="{@docRoot}images/brand/en_generic_rgb_wo_45.png" alt=" Google Play" /></label>

    <input type="radio" name="buttonStyle" value="_generic_rgb_wo_60" id="nm" />
      <label for="nm"><img src="{@docRoot}images/brand/en_generic_rgb_wo_60.png" alt=" Google Play" /></label>
  </div>

    <input class="button" type="button" value="" style="padding:10px" onclick="return buildButton(this.parentNode);" />
    <br />
  </form>

  <div id="preview">
    <p> HTML </p>
    <textarea id="snippet" cols="100" rows="5" style="font-family:monospace;background-color:#efefef;padding:5px;margin-bottom:1em" onclick="this.select()"></textarea>

  <p></p>
  <div id="button-preview" style="margin-top:1em"></div>
  </div>