1 page.title=Google Play Badge Generator 2 page.image=/images/gp-badges-set.png 3 page.metaDescription=Build badges for your app in just a few clicks, or download hi-res badge assets localized for a variety of languages. 4 meta.tags="disttools, promoting, deviceart, marketing, googleplay" 5 page.tags="badge, google play" 6 7 @jd:body 8 9 <p itemprop="description">Google Play badges enable you to promote your apps with 10 official branding in your online ads, promotional materials, or anywhere you want 11 a link to your apps</p> 12 13 <p>In the form below, 14 input your app's package name or publisher name, choose the badge style, 15 click <em>Build my badge</em>, then paste the HTML into your web content.</p> 16 17 <p>If you're creating a promotional web page for your app, you should also use the 18 <a href="{@docRoot}distribute/tools/promote/device-art.html">Device Art Generator</a>, which quickly 19 wraps your screenshots in real device artwork.</p> 20 21 <p>For guidelines when using the Google Play badge and other brand assets, 22 see the <a href="{@docRoot}distribute/tools/promote/brand.html#brand-google_play">Brand 23 Guidelines</a>.</p> 24 25 <style type="text/css"> 26 27 form.button-form { 28 margin-top:2em; 29 } 30 31 /* the label and input elements are blocks that float left in order to 32 keep the left edgets of the input aligned, and IE 6/7 do not fully support "inline-block" */ 33 label.block { 34 display: block; 35 float: left; 36 width: 100px; 37 padding-right: 10px; 38 } 39 40 input.text { 41 display: block; 42 float: left; 43 width: 250px; 44 } 45 46 div.button-row { 47 white-space:nowrap; 48 min-height:80px; 49 } 50 51 div.button-row input { 52 vertical-align:middle; 53 margin:0 5px 0 0; 54 } 55 56 #jd-content div.button-row img { 57 margin: 0; 58 vertical-align:middle; 59 } 60 61 </style> 62 63 <script type="text/javascript"> 64 65 // locales for which we have the 'app' badge 66 var APP_LANGS = ['it','pt-br','pt-pt','nl','ko','ja','fr','es','es-419','en','de']; 67 68 // variables for creating 'try it out' demo button 69 var imagePath = "https://developer.android.com/images/brand/" 70 var linkStart = "<a href=\"https://play.google.com/store/"; 71 var imageStart = "\">\n" 72 + " <img alt=\""; 73 // leaves opening for the alt text value 74 var imageSrc = "\"\n src=\"" + imagePath; 75 // leaves opening for the image file name 76 var imageEnd = ".png\" />\n</a>"; 77 78 // variables for creating code snippet 79 var linkStartCode = "<a href=\"https://play.google.com/store/"; 80 var imageStartCode = "\">\n" 81 + " <img alt=\""; 82 // leaves opening for the alt text value 83 var imageSrcCode = "\"\n src=\"" + imagePath; 84 // leaves opening for the image file name 85 var imageEndCode = ".png\" />\n</a>"; 86 87 /** Generate the HTML snippet and demo based on form values */ 88 function buildButton(form) { 89 var lang = $('#locale option:selected').val(); 90 var selectedValue = lang + $('form input[type=radio]:checked').val(); 91 var altText = selectedValue.indexOf("generic") != -1 ? "Get it on Google Play" : "Android app on Google Play"; 92 93 if (form["package"].value != "com.example.android") { 94 $("#preview").show(); 95 var packageName = escapeHTML(form["package"].value); 96 $("#snippet").show().html(linkStartCode + "apps/details?id=" + packageName 97 + imageStartCode + altText + imageSrcCode 98 + selectedValue + imageEndCode); 99 $("#button-preview").html(linkStart + "apps/details?id=" + packageName 100 + imageStart + altText + imageSrc 101 + selectedValue + imageEnd); 102 103 // Send the event to Analytics 104 ga('send', 'event', 'Distribute', 'Create Google Play Badge', 'Package ' + selectedValue); 105 } else if (form["publisher"].value != "Example, Inc.") { 106 $("#preview").show(); 107 var publisherName = escapeHTML(form["publisher"].value); 108 $("#snippet").show().html(linkStartCode + "search?q=pub:" + publisherName 109 + imageStartCode + altText + imageSrcCode 110 + selectedValue + imageEndCode); 111 $("#button-preview").html(linkStart + "search?q=pub:" + publisherName 112 + imageStart + altText + imageSrc 113 + selectedValue + imageEnd); 114 115 // Send the event to Analytics 116 ga('send', 'event', 'Distribute', 'Create Google Play Badge', 'Publisher ' + selectedValue); 117 } else { 118 alert("Please enter your package name or publisher name"); 119 } 120 return false; 121 } 122 123 /** Listen for Enter key */ 124 function onTextEntered(event, form, me) { 125 // 13 = enter 126 if (event.keyCode == 13) { 127 buildButton(form); 128 } 129 } 130 131 /** When input is focused, remove example text and disable other input */ 132 function onInputFocus(object, example) { 133 if (object.value == example) { 134 $(object).val('').css({'color' : '#000'}); 135 } 136 $('input[type="text"]:not(input[name='+object.name+'])', 137 object.parentNode).attr('disabled','true'); 138 $('#'+object.name+'-clear').show(); 139 } 140 141 /** When input is blured, restore example text if appropriate and enable other input */ 142 function onInputBlur(object, example) { 143 if (object.value.length < 1) { 144 $(object).attr('value',example).css({'color':'#ccc'}); 145 $('input[type="text"]', object.parentNode).removeAttr('disabled'); 146 $('#'+object.name+'-clear').hide(); 147 } 148 } 149 150 /** Clear the form to start over */ 151 function clearLabel(id, example) { 152 $("#preview").hide(); 153 $('#'+id+'').html('').attr('value',example).css({'color':'#ccc'}); 154 $('input[type="text"]', $('#'+id+'').parent()).removeAttr('disabled'); 155 $('#'+id+'-clear').hide(); 156 return false; 157 } 158 159 /** Switch the badge urls for selected language */ 160 function changeBadgeLang() { 161 var lang = $('#locale option:selected').val(); 162 163 // check if we have the 'app' badge for this lang and show notice if not 164 $("div.button-row.error").remove(); // remove any existing instance of error message 165 if ($.inArray(lang,APP_LANGS) == -1) { 166 $("div.button-row.app").hide(); 167 $("div.button-row.app").after('<div class="button-row error"><p class="note" style="margin:1em 0 -1em">' 168 + 'Sorry, we currently don\'t have the ' 169 + '<em>Android app on Google Play</em> badge translated for ' 170 + $("select#locale option[value="+lang+"]").attr("title") 171 + '.<br>Please check back later or instead use the <em>Get it on Google Play</em> badge below.' 172 + '</p></div>'); 173 } else { 174 $("div.button-row.app").show(); // show the 'app' badge row 175 } 176 177 $('.button-row img').each(function() { 178 var id = $(this).parent().attr('for'); 179 var imgName = lang + $('input#'+id).attr('value') + '.png'; 180 var lastSlash = $(this).attr('src').lastIndexOf('/'); 181 var imgPath = $(this).attr('src').substring(0, lastSlash+1); 182 $(this).attr('src', imgPath + imgName); 183 }); 184 } 185 186 /** When the doc is ready, find the inputs and color the input grey if the value is the example 187 text. This is necessary to handle back-navigation, which can auto-fill the form with previous 188 values (and text should not be grey) */ 189 $(document).ready(function() { 190 $(".button-form input.text").each(function(index) { 191 if ($(this).val() == $(this).attr("default")) { 192 $(this).css("color","#ccc"); 193 } else { 194 /* This is necessary to handle back-navigation to the page after form was filled */ 195 $('input[type="text"]:not(input[name='+this.name+'])', 196 this.parentNode).attr('disabled','true'); 197 $('#'+this.name+'-clear').show(); 198 } 199 }); 200 }); 201 202 </script> 203 204 <form class="button-form"> 205 <label class="block" for="locale">Language:</label> 206 <select id="locale" style="display:block;float:left;margin:0" 207 onchange="changeBadgeLang()"> 208 <option title="Afrikaans" 209 value="af">Afrikaans</option> 210 <option title="Arabic" 211 value="ar"></option> 212 <option title="Belarusian" 213 value="be"></option> 214 <option title="Bulgarian" 215 value="bg"></option> 216 <option title="Catalan" 217 value="ca">Catal</option> 218 <option title="Chinese (China)" 219 value="zh-cn"> ()</option> 220 <option title="Chinese (Hong Kong)" 221 value="zh-hk"></option> 222 <option title="Chinese (Taiwan)" 223 value="zh-tw"> ()</option> 224 <option title="Croatian" 225 value="hr">Hrvatski</option> 226 <option title="Czech" 227 value="cs">esky</option> 228 <option title="Danish" 229 value="da">Dansk</option> 230 <option title="Dutch" 231 value="nl">Nederlands</option> 232 <option title="Estonian" 233 value="et">Eesti</option> 234 <option title="Farsi - Persian" 235 value="fa"></option> 236 <option title="Filipino" 237 value="fil">Tagalog</option> 238 <option title="Finnish" 239 value="fi">Suomi</option> 240 <option title="French" 241 value="fr">Franais</option> 242 <option title="German" 243 value="de">Deutsch</option> 244 <option title="Greek" 245 value="el"></option> 246 <option title="English" 247 value="en" selected="true">English</option> 248 <!-- 249 <option title="Hebrew" 250 value="iw-he"></option> 251 --> 252 <option title="Hungarian" 253 value="hu">Magyar</option> 254 <option title="Indonesian" 255 value="id-in">Bahasa Indonesia</option> 256 <option title="Italian" 257 value="it">Italiano</option> 258 <option title="Japanese" 259 value="ja"></option> 260 <option title="Korean" 261 value="ko"></option> 262 <option title="Latvian" 263 value="lv">Latvieu</option> 264 <option title="Lithuanian" 265 value="lt">Lietuvikai</option> 266 <option title="Malay" 267 value="ms">Bahasa Melayu</option> 268 <option title="Norwegian" 269 value="no">Norsk (bokml)</option> 270 <option title="Polish" 271 value="pl">Polski</option> 272 <option title="Portuguese (Brazil)" 273 value="pt-br">Portugus (Brasil)</option> 274 <option title="Portuguese (Portugal)" 275 value="pt-pt">Portugus (Portugal)</option> 276 <option title="Romanian" 277 value="ro">Romn</option> 278 <option title="Russian" 279 value="ru"></option> 280 <option title="Serbian" 281 value="sr"> / srpski</option> 282 <option title="Slovak" 283 value="sk">Slovenina</option> 284 <option title="Slovenian" 285 value="sl">Slovenina</option> 286 <option title="Spanish (Spain)" 287 value="es">Espaol (Espaa)</option> 288 <option title="Spanish (Latin America)" 289 value="es-419">Espaol (Latinoamrica)</option> 290 <option title="Swedish" 291 value="sv">Svenska</option> 292 <option title="Swahili" 293 value="sw">Kiswahili</option> 294 <option title="Thai" 295 value="th"></option> 296 <option title="Turkish" 297 value="tr">Trke</option> 298 <option title="Ukrainian" 299 value="uk"></option> 300 <option title="Vietnamese" 301 value="vi">Ting Vit</option> 302 <option title="Zulu" 303 value="zu">isiZulu</option> 304 </select> 305 <p style="clear:both;margin:0"> </p> 306 <label class="block" for="package" style="clear:left">Package name:</label> 307 <input class="text" type="text" id="package" name="package" 308 value="com.example.android" 309 default="com.example.android" 310 onfocus="onInputFocus(this, 'com.example.android')" 311 onblur="onInputBlur(this, 'com.example.android')" 312 onkeyup="return onTextEntered(event, this.parentNode, this)"/> 313 <a id="package-clear" style="display:none" href="#" 314 onclick="return clearLabel('package','com.example.android');">clear</a> 315 <p style="clear:both;margin:0"> <em>or</em></p> 316 <label class="block" style="margin-top:5px" for="publisher">Publisher name:</label> 317 <input class="text" type="text" id="publisher" name="publisher" 318 value="Example, Inc." 319 default="Example, Inc." 320 onfocus="onInputFocus(this, 'Example, Inc.')" 321 onblur="onInputBlur(this, 'Example, Inc.')" 322 onkeyup="return onTextEntered(event, this.parentNode, this)"/> 323 <a id="publisher-clear" style="display:none" href="#" 324 onclick="return clearLabel('publisher','Example, Inc.');">clear</a> 325 <br/><br/> 326 327 328 <div class="button-row app"> 329 <input type="radio" name="buttonStyle" value="_app_rgb_wo_45" id="ws" /> 330 <label for="ws"><img src="{@docRoot}images/brand/en_app_rgb_wo_45.png" 331 alt="Android app on Google Play (small)" /></label> 332 333 <input type="radio" name="buttonStyle" value="_app_rgb_wo_60" id="wm" /> 334 <label for="wm"><img src="{@docRoot}images/brand/en_app_rgb_wo_60.png" 335 alt="Android app on Google Play (large)" /></label> 336 </div> 337 338 <div class="button-row"> 339 <input type="radio" name="buttonStyle" value="_generic_rgb_wo_45" id="ns" checked="checked" /> 340 <label for="ns"><img src="{@docRoot}images/brand/en_generic_rgb_wo_45.png" 341 alt="Get it on Google Play (small)" /></label> 342 343 <input type="radio" name="buttonStyle" value="_generic_rgb_wo_60" id="nm" /> 344 <label for="nm"><img src="{@docRoot}images/brand/en_generic_rgb_wo_60.png" 345 alt="Get it on Google Play (large)" /></label> 346 </div> 347 348 <input class="button" onclick="return buildButton(this.parentNode);" 349 type="button" value="Build my badge" style="padding:10px" /> 350 <br/> 351 </form> 352 353 <div id="preview" style="display:none"> 354 <p>Copy and paste this HTML into your web site:</p> 355 <textarea id="snippet" cols="100" rows="5" onclick="this.select()" 356 style="font-family:monospace;background-color:#efefef;padding:5px;display:none;margin-bottom:1em"> 357 </textarea > 358 359 <p>Test your badge:</p> 360 <div id="button-preview" style="margin-top:1em"></div> 361 </div> 362 363