1 page.title=Google Play Badges 2 @jd:body 3 4 <p>Google Play badges give you an officially branded way of promoting your app to Android users. Use the form below to quickly create badges to link users to your products from web pages, ads, reviews, and more. See <a href="linking.html">Linking to your products</a> for more ways to bring users to your apps.</p> 5 6 <p>Input your app's package or your publisher name, choose the style, size, and language, and click "Build my badge". The form will generate code for an embbeded button that links to your app's product page or a list of your apps. </p> 7 8 <p>Note that you should not modify the Google Play badges after generating them, including colors, size, text, and logo. See <a href="http://www.android.com/branding.html">Android Brand Guidelines</a> for more information.</p> 9 10 <style type="text/css"> 11 12 form.button-form { 13 margin-top:2em; 14 } 15 16 /* the label and input elements are blocks that float left in order to 17 keep the left edgets of the input aligned, and IE 6/7 do not fully support "inline-block" */ 18 label.block { 19 display: block; 20 float: left; 21 width: 100px; 22 padding-right: 10px; 23 } 24 25 input.text { 26 display: block; 27 float: left; 28 width: 250px; 29 } 30 31 div.button-row { 32 white-space:nowrap; 33 min-height:80px; 34 } 35 36 div.button-row input { 37 vertical-align:120%; 38 } 39 40 #jd-content div.button-row img { 41 margin: 0; 42 } 43 44 </style> 45 46 <script type="text/javascript"> 47 48 // variables for creating 'try it out' demo button 49 var imagePath = "http://www.android.com/images/brand/" 50 var linkStart = "<a href=\"http://play.google.com/store/"; 51 var imageStart = "\">\n" 52 + " <img alt=\""; 53 // leaves opening for the alt text value 54 var imageSrc = "\"\n src=\"" + imagePath; 55 // leaves opening for the image file name 56 var imageEnd = ".png\" />\n</a>"; 57 58 // variables for creating code snippet 59 var linkStartCode = "<a href=\"http://play.google.com/store/"; 60 var imageStartCode = "\">\n" 61 + " <img alt=\""; 62 // leaves opening for the alt text value 63 var imageSrcCode = "\"\n src=\"" + imagePath; 64 // leaves opening for the image file name 65 var imageEndCode = ".png\" />\n</a>"; 66 67 /** Generate the HTML snippet and demo based on form values */ 68 function buildButton(form) { 69 var selectedValue = $('form input[type=radio]:checked').val(); 70 var altText = selectedValue.indexOf("get_it") != -1 ? "Get it on Google Play" : "Android app on Google Play"; 71 72 if (form["package"].value != "com.example.android") { 73 $("#preview").show(); 74 $("#snippet").show().html(linkStartCode + "apps/details?id=" + form["package"].value 75 + imageStartCode + altText + imageSrcCode 76 + selectedValue + imageEndCode); 77 $("#button-preview").html(linkStart + "apps/details?id=" + form["package"].value 78 + imageStart + altText + imageSrc 79 + selectedValue + imageEnd); 80 } else if (form["publisher"].value != "Example, Inc.") { 81 $("#preview").show(); 82 $("#snippet").show().html(linkStartCode + "search?q=pub:" + form["publisher"].value 83 + imageStartCode + altText + imageSrcCode 84 + selectedValue + imageEndCode); 85 $("#button-preview").html(linkStart + "search?q=pub:" + form["publisher"].value 86 + imageStart + altText + imageSrc 87 + selectedValue + imageEnd); 88 } else { 89 alert("Please enter your package name or publisher name"); 90 } 91 return false; 92 } 93 94 /** Listen for Enter key */ 95 function onTextEntered(event, form, me) { 96 // 13 = enter 97 if (event.keyCode == 13) { 98 buildButton(form); 99 } 100 } 101 102 /** When input is focused, remove example text and disable other input */ 103 function onInputFocus(object, example) { 104 if (object.value == example) { 105 $(object).val('').css({'color' : '#000'}); 106 } 107 $('input[type="text"]:not(input[name='+object.name+'])', 108 object.parentNode).attr('disabled','true'); 109 $('#'+object.name+'-clear').show(); 110 } 111 112 /** When input is blured, restore example text if appropriate and enable other input */ 113 function onInputBlur(object, example) { 114 if (object.value.length < 1) { 115 $(object).attr('value',example).css({'color':'#ccc'}); 116 $('input[type="text"]', object.parentNode).removeAttr('disabled'); 117 $('#'+object.name+'-clear').hide(); 118 } 119 } 120 121 /** Clear the form to start over */ 122 function clearLabel(id, example) { 123 $("#preview").hide(); 124 $('#'+id+'').html('').attr('value',example).css({'color':'#ccc'}); 125 $('input[type="text"]', $('#'+id+'').parent()).removeAttr('disabled'); 126 $('#'+id+'-clear').hide(); 127 return false; 128 } 129 130 /** When the doc is ready, find the inputs and color the input grey if the value is the example 131 text. This is necessary to handle back-navigation, which can auto-fill the form with previous 132 values (and text should not be grey) */ 133 $(document).ready(function() { 134 $(".button-form input.text").each(function(index) { 135 if ($(this).val() == $(this).attr("default")) { 136 $(this).css("color","#ccc"); 137 } else { 138 /* This is necessary to handle back-navigation to the page after form was filled */ 139 $('input[type="text"]:not(input[name='+this.name+'])', 140 this.parentNode).attr('disabled','true'); 141 $('#'+this.name+'-clear').show(); 142 } 143 }); 144 }); 145 146 </script> 147 148 <form class="button-form"> 149 <label class="block" for="package">Package name:</label> 150 <input class="text" type="text" id="package" name="package" 151 value="com.example.android" 152 default="com.example.android" 153 onfocus="onInputFocus(this, 'com.example.android')" 154 onblur="onInputBlur(this, 'com.example.android')" 155 onkeyup="return onTextEntered(event, this.parentNode, this)"/> 156 <a id="package-clear" style="display:none" href="#" 157 onclick="return clearLabel('package','com.example.android');">clear</a> 158 <p style="clear:both;margin:0"> <em>or</em></p> 159 <label class="block" style="margin-top:5px" for="publisher">Publisher name:</label> 160 <input class="text" type="text" id="publisher" name="publisher" 161 value="Example, Inc." 162 default="Example, Inc." 163 onfocus="onInputFocus(this, 'Example, Inc.')" 164 onblur="onInputBlur(this, 'Example, Inc.')" 165 onkeyup="return onTextEntered(event, this.parentNode, this)"/> 166 <a id="publisher-clear" style="display:none" href="#" 167 onclick="return clearLabel('publisher','Example, Inc.');">clear</a> 168 <br/><br/> 169 170 <div class="button-row"> 171 <input type="radio" name="buttonStyle" value="get_it_on_play_logo_small" id="ns" checked="checked" /> 172 <label for="ns"><img src="http://www.android.com/images/brand/get_it_on_play_logo_small.png" 173 alt="Get it on Google Play (small)" /></label> 174 175 <input type="radio" name="buttonStyle" value="get_it_on_play_logo_large" id="nm" /> 176 <label for="nm"><img src="http://www.android.com/images/brand/get_it_on_play_logo_large.png" 177 alt="Get it on Google Play (large)" /></label> 178 </div> 179 180 <div class="button-row"> 181 <input type="radio" name="buttonStyle" value="android_app_on_play_logo_small" id="ws" /> 182 <label for="ws"><img src="http://www.android.com/images/brand/android_app_on_play_logo_small.png" 183 alt="Android app on Google Play (small)" /></label> 184 185 <input type="radio" name="buttonStyle" value="android_app_on_play_logo_large" id="wm" /> 186 <label for="wm"><img src="http://www.android.com/images/brand/android_app_on_play_logo_large.png" 187 alt="Android app on Google Play (large)" /></label> 188 </div> 189 190 <input type="button" onclick="return buildButton(this.parentNode)" value="Build my badge" 191 style="padding:5px" /> 192 <br/> 193 </form> 194 195 <div id="preview" style="display:none"> 196 <p>Copy and paste this HTML into your web site:</p> 197 <textarea id="snippet" cols="100" rows="5" onclick="this.select()" 198 style="font-family:monospace;background-color:#efefef;padding:5px;display:none;margin-bottom:1em"> 199 </textarea > 200 201 <p>Try it out:</p> 202 <div id="button-preview" style="margin-top:1em"></div> 203 </div> 204
