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