path: root/docs/html/distribute/googleplay/promote/badges.jd

page.title=Google Play Badges
@jd:body

<p>Google Play badges allow you to promote your app with official branding in your
online ads, promotional materials, or anywhere else you want a link to your app.</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/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/googleplay/promote/brand.html">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">

// variables for creating 'try it out' demo button
var imagePath = "http://developer.android.com/images/brand/"
var linkStart = "<a href=\"http://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=\"http://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 selectedValue = $('form input[type=radio]:checked').val();
  var altText = selectedValue.indexOf("get_it") != -1 ? "Get it on Google Play" : "Android app on Google Play";

  if (form["package"].value != "com.example.android") {
    $("#preview").show();
    $("#snippet").show().html(linkStartCode + "apps/details?id=" + form["package"].value
            + imageStartCode + altText + imageSrcCode
            + selectedValue + imageEndCode);
    $("#button-preview").html(linkStart + "apps/details?id=" + form["package"].value
            + imageStart + altText + imageSrc
            + selectedValue + imageEnd);
            
    // Send the event to Analytics
    _gaq.push(['_trackEvent', 'Distribute', 'Create Google Play Badge', 'Package ' + selectedValue]);
  } else if (form["publisher"].value != "Example, Inc.") {
    $("#preview").show();
    $("#snippet").show().html(linkStartCode + "search?q=pub:" + form["publisher"].value
            + imageStartCode + altText + imageSrcCode
            + selectedValue + imageEndCode);
    $("#button-preview").html(linkStart + "search?q=pub:" + form["publisher"].value
            + imageStart + altText + imageSrc
            + selectedValue + imageEnd);
   
    // Send the event to Analytics
    _gaq.push(['_trackEvent', '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;
}

/** 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="package">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)"/>&nbsp;
         <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)"/>&nbsp;
         <a id="publisher-clear" style="display:none" href="#"
            onclick="return clearLabel('publisher','Example, Inc.');">clear</a>
         <br/><br/>


<div class="button-row">
  <input type="radio" name="buttonStyle" value="en_app_rgb_wo_45" id="ws" checked="checked" />
    <label for="ws"><img src="{@docRoot}images/brand/en_app_rgb_wo_45.png"
alt="Android app on Google Play (small)" /></label>
    &nbsp;&nbsp;&nbsp;&nbsp;
  <input type="radio" name="buttonStyle" value="en_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="en_generic_rgb_wo_45" id="ns" />
    <label for="ns"><img src="{@docRoot}images/brand/en_generic_rgb_wo_45.png"
alt="Get it on Google Play (small)" /></label>
    &nbsp;&nbsp;&nbsp;&nbsp;
  <input type="radio" name="buttonStyle" value="en_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 onclick="return buildButton(this.parentNode);"
    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>Try it out:</p>
<div id="button-preview" style="margin-top:1em"></div>
</div>