docs: Redirect 'Google Play badges' link in ToC to point to new

    </div>

  </li>

  <li class="nav-section">

    <div class="nav-section empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/tools/promote/badges.html" zh-cn-lang="Google Play 徽章生成器">

    <div class="nav-section empty" style="font-weight:normal"><a href="https://play.google.com/intl/en_us/badges/" zh-cn-lang="Google Play 徽章生成器">

            <span class="en">Google Play Badges</span></a>

    </div>

  </li>

page.title=Google Play Badge Generator

page.image=/images/gp-badges-set.png

page.metaDescription=Build badges for your app in just a few clicks, or download hi-res badge assets localized for a variety of languages.

meta.tags="disttools, promoting, deviceart, marketing, googleplay"

page.tags="badge, google play"

@jd:body

<p itemprop="description">Google Play badges enable you to promote your apps with

official branding in your online ads, promotional materials, or anywhere you want

a link to your apps</p>

<p>In the form below,

input your app's package name or publisher name, choose the badge style,

click <em>Build my badge</em>, then paste the HTML into your web content.</p>

<p>If you're creating a promotional web page for your app, you should also use the

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

wraps your screenshots in real device artwork.</p>

<p>For guidelines when using the Google Play badge and other brand assets,

see the <a href="{@docRoot}distribute/tools/promote/brand.html#brand-google_play">Brand

Guidelines</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 "inline-block" */

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 = "https://developer.android.com/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 = "<a href=\"https://play.google.com/store/";

var imageStartCode = "\">\n"

        + "  <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</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">Language:</label>

  <select id="locale" style="display:block;float:left;margin:0"

          onchange="changeBadgeLang()">

    <option title="Afrikaans"

            value="af">Afrikaans</option>

    <option title="Arabic"

            value="ar">العربية</option>

    <option title="Belarusian"

            value="be">Беларуская</option>

    <option title="Bulgarian"

            value="bg">Български</option>

    <option title="Catalan"

            value="ca">Català</option>

    <option title="Chinese (China)"

            value="zh-cn">中文 (中国)</option>

    <option title="Chinese (Hong Kong)"

            value="zh-hk">中文（香港）</option>

    <option title="Chinese (Taiwan)"

            value="zh-tw">中文 (台灣)</option>

    <option title="Croatian"

            value="hr">Hrvatski</option>

    <option title="Czech"

            value="cs">Česky</option>

    <option title="Danish"

            value="da">Dansk</option>

    <option title="Dutch"

            value="nl">Nederlands</option>

    <option title="Estonian"

            value="et">Eesti</option>

    <option title="Farsi - Persian"

            value="fa">فارسی</option>

    <option title="Filipino"

            value="fil">Tagalog</option>

    <option title="Finnish"

            value="fi">Suomi</option>

    <option title="French"

            value="fr">Français</option>

    <option title="German"

            value="de">Deutsch</option>

    <option title="Greek"

            value="el">Ελληνικά</option>

    <option title="English"

            value="en" selected="true">English</option>

<!--

    <option title="Hebrew"

            value="iw-he">עברית</option>

-->

    <option title="Hungarian"

            value="hu">Magyar</option>

    <option title="Indonesian"

            value="id-in">Bahasa Indonesia</option>

    <option title="Italian"

            value="it">Italiano</option>

    <option title="Japanese"

            value="ja">日本語</option>

    <option title="Korean"

            value="ko">한국어</option>

    <option title="Latvian"

            value="lv">Latviešu</option>

    <option title="Lithuanian"

            value="lt">Lietuviškai</option>

    <option title="Malay"

            value="ms">Bahasa Melayu</option>

    <option title="Norwegian"

            value="no">Norsk (bokmål)‎</option>

    <option title="Polish"

            value="pl">Polski</option>

    <option title="Portuguese (Brazil)"

            value="pt-br">Português (Brasil)</option>

    <option title="Portuguese (Portugal)"

            value="pt-pt">Português (Portugal)</option>

    <option title="Romanian"

            value="ro">Română</option>

    <option title="Russian"

            value="ru">Русский</option>

    <option title="Serbian"

            value="sr">Српски / srpski</option>

    <option title="Slovak"

            value="sk">Slovenčina</option>

    <option title="Slovenian"

            value="sl">Slovenščina</option>

    <option title="Spanish (Spain)"

            value="es">Español (España)</option>

    <option title="Spanish (Latin America)"

            value="es-419">Español (Latinoamérica)</option>

    <option title="Swedish"

            value="sv">Svenska</option>

    <option title="Swahili"

            value="sw">Kiswahili</option>

    <option title="Thai"

            value="th">ไทย</option>

    <option title="Turkish"

            value="tr">Türkçe</option>

    <option title="Ukrainian"

            value="uk">Українська</option>

    <option title="Vietnamese"

            value="vi">Tiếng Việt</option>

    <option title="Zulu"

            value="zu">isiZulu</option>

  </select>

  <p style="clear:both;margin:0">&nbsp;</p>

  <label class="block" for="package" style="clear:left">Package name:</label>

  <input class="text" type="text" id="package" name="package"

         value="com.example.android"

         default="com.example.android"

         onfocus="onInputFocus(this, 'com.example.android')"

         onblur="onInputBlur(this, 'com.example.android')"

         onkeyup="return onTextEntered(event, this.parentNode, this)"/> 

         <a id="package-clear" style="display:none" href="#"

            onclick="return clearLabel('package','com.example.android');">clear</a>

  <p style="clear:both;margin:0">&nbsp;<em>or</em></p>

  <label class="block" style="margin-top:5px" for="publisher">Publisher&nbsp;name:</label>

  <input class="text" type="text" id="publisher" name="publisher"

         value="Example, Inc."

         default="Example, Inc."

         onfocus="onInputFocus(this, 'Example, Inc.')"

         onblur="onInputBlur(this, 'Example, Inc.')"

         onkeyup="return onTextEntered(event, this.parentNode, this)"/> 

         <a id="publisher-clear" style="display:none" href="#"

            onclick="return clearLabel('publisher','Example, Inc.');">clear</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 app on Google Play (small)" /></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 app on Google Play (large)" /></label>

</div>

<div class="button-row">

  <input type="radio" name="buttonStyle" value="_generic_rgb_wo_45" id="ns" checked="checked" />

    <label for="ns"><img src="{@docRoot}images/brand/en_generic_rgb_wo_45.png"

alt="Get it on Google Play (small)" /></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="Get it on Google Play (large)" /></label>

</div>

  <input class="button" onclick="return buildButton(this.parentNode);"

    type="button" value="Build my badge" style="padding:10px" />

  <br/>

</form>

<div id="preview" style="display:none">

  <p>Copy and paste this HTML into your web site:</p>

  <textarea id="snippet" cols="100" rows="5" onclick="this.select()"

style="font-family:monospace;background-color:#efefef;padding:5px;display:none;margin-bottom:1em">

  </textarea >

<p>Test your badge:</p>

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

</div>