| 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 = "<a href=\"http://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 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)"/> |
| <a id="package-clear" style="display:none" href="#" |
| onclick="return clearLabel('package','com.example.android');">clear</a> |
| <p style="clear:both;margin:0"> <em>or</em></p> |
| <label class="block" style="margin-top:5px" for="publisher">Publisher 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"> |
| <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> |
| |
| <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> |
| |
| <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);" |
| 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>Try it out:</p> |
| <div id="button-preview" style="margin-top:1em"></div> |
| </div> |