diff options
Diffstat (limited to 'docs/html/distribute/tools/promote/badges.jd')
| -rw-r--r-- | docs/html/distribute/tools/promote/badges.jd | 362 |
1 files changed, 362 insertions, 0 deletions
diff --git a/docs/html/distribute/tools/promote/badges.jd b/docs/html/distribute/tools/promote/badges.jd new file mode 100644 index 0000000..e91a804 --- /dev/null +++ b/docs/html/distribute/tools/promote/badges.jd @@ -0,0 +1,362 @@ +page.title=Google Play Badge Generator +page.image=/images/gp-badges-set.png +page.metaDescription=Build badges for your app in just a few clicks, or download hi-res badge assets localized for a variety of languages. +meta.tags="disttools, promoting, deviceart, marketing, googleplay" +page.tags="badge, google play" + +@jd:body + +<p itemprop="description">Google Play badges enable you to promote your apps with +official branding in your online ads, promotional materials, or anywhere you want +a link to your apps</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/tools/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/tools/promote/brand.html#brand-google_play">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"> + +// locales for which we have the 'app' badge +var APP_LANGS = ['it','pt-br','pt-pt','nl','ko','ja','fr','es','es-419','en','de']; + +// variables for creating 'try it out' demo button +var imagePath = "{@docRoot}images/brand/" +var linkStart = "<a href=\"https://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=\"https://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 lang = $('#locale option:selected').val(); + var selectedValue = lang + $('form input[type=radio]:checked').val(); + var altText = selectedValue.indexOf("generic") != -1 ? "Get it on Google Play" : "Android app on Google Play"; + + if (form["package"].value != "com.example.android") { + $("#preview").show(); + var packageName = escapeHTML(form["package"].value); + $("#snippet").show().html(linkStartCode + "apps/details?id=" + packageName + + imageStartCode + altText + imageSrcCode + + selectedValue + imageEndCode); + $("#button-preview").html(linkStart + "apps/details?id=" + packageName + + 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(); + var publisherName = escapeHTML(form["publisher"].value); + $("#snippet").show().html(linkStartCode + "search?q=pub:" + publisherName + + imageStartCode + altText + imageSrcCode + + selectedValue + imageEndCode); + $("#button-preview").html(linkStart + "search?q=pub:" + publisherName + + 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; +} + +/** Switch the badge urls for selected language */ +function changeBadgeLang() { + var lang = $('#locale option:selected').val(); + + // check if we have the 'app' badge for this lang and show notice if not + $("div.button-row.error").remove(); // remove any existing instance of error message + if ($.inArray(lang,APP_LANGS) == -1) { + $("div.button-row.app").hide(); + $("div.button-row.app").after('<div class="button-row error"><p class="note" style="margin:1em 0 -1em">' + + 'Sorry, we currently don\'t have the ' + + '<em>Android app on Google Play</em> badge translated for ' + + $("select#locale option[value="+lang+"]").attr("title") + + '.<br>Please check back later or instead use the <em>Get it on Google Play</em> badge below.' + + '</p></div>'); + } else { + $("div.button-row.app").show(); // show the 'app' badge row + } + + $('.button-row img').each(function() { + var id = $(this).parent().attr('for'); + var imgName = lang + $('input#'+id).attr('value') + '.png'; + var lastSlash = $(this).attr('src').lastIndexOf('/'); + var imgPath = $(this).attr('src').substring(0, lastSlash+1); + $(this).attr('src', imgPath + imgName); + }); +} + +/** 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="locale">Language:</label> + <select id="locale" style="display:block;float:left;margin:0" + onchange="changeBadgeLang()"> + <option title="Afrikaans" + value="af">Afrikaans</option> + <option title="Arabic" + value="ar">العربية</option> + <option title="Belarusian" + value="be">Беларуская</option> + <option title="Bulgarian" + value="bg">Български</option> + <option title="Catalan" + value="ca">Català</option> + <option title="Chinese (China)" + value="zh-cn">中文 (中国)</option> + <option title="Chinese (Hong Kong)" + value="zh-hk">中文（香港）</option> + <option title="Chinese (Taiwan)" + value="zh-tw">中文 (台灣)</option> + <option title="Croatian" + value="hr">Hrvatski</option> + <option title="Czech" + value="cs">Česky</option> + <option title="Danish" + value="da">Dansk</option> + <option title="Dutch" + value="nl">Nederlands</option> + <option title="Estonian" + value="et">Eesti</option> + <option title="Farsi - Persian" + value="fa">فارسی</option> + <option title="Filipino" + value="fil">Tagalog</option> + <option title="Finnish" + value="fi">Suomi</option> + <option title="French" + value="fr">Français</option> + <option title="German" + value="de">Deutsch</option> + <option title="Greek" + value="el">Ελληνικά</option> + <option title="English" + value="en" selected="true">English</option> +<!-- + <option title="Hebrew" + value="iw-he">עברית</option> +--> + <option title="Hungarian" + value="hu">Magyar</option> + <option title="Indonesian" + value="id-in">Bahasa Indonesia</option> + <option title="Italian" + value="it">Italiano</option> + <option title="Japanese" + value="ja">日本語</option> + <option title="Korean" + value="ko">한국어</option> + <option title="Latvian" + value="lv">Latviešu</option> + <option title="Lithuanian" + value="lt">Lietuviškai</option> + <option title="Malay" + value="ms">Bahasa Melayu</option> + <option title="Norwegian" + value="no">Norsk (bokmål)</option> + <option title="Polish" + value="pl">Polski</option> + <option title="Portuguese (Brazil)" + value="pt-br">Português (Brasil)</option> + <option title="Portuguese (Portugal)" + value="pt-pt">Português (Portugal)</option> + <option title="Romanian" + value="ro">Română</option> + <option title="Russian" + value="ru">Русский</option> + <option title="Serbian" + value="sr">Српски / srpski</option> + <option title="Slovak" + value="sk">Slovenčina</option> + <option title="Slovenian" + value="sl">Slovenščina</option> + <option title="Spanish (Spain)" + value="es">Español (España)</option> + <option title="Spanish (Latin America)" + value="es-419">Español (Latinoamérica)</option> + <option title="Swedish" + value="sv">Svenska</option> + <option title="Swahili" + value="sw">Kiswahili</option> + <option title="Thai" + value="th">ไทย</option> + <option title="Turkish" + value="tr">Türkçe</option> + <option title="Ukrainian" + value="uk">Українська</option> + <option title="Vietnamese" + value="vi">Tiếng Việt</option> + <option title="Zulu" + value="zu">isiZulu</option> + </select> + <p style="clear:both;margin:0"> </p> + <label class="block" for="package" style="clear:left">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 app"> + <input type="radio" name="buttonStyle" value="_app_rgb_wo_45" id="ws" /> + <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="_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="_generic_rgb_wo_45" id="ns" checked="checked" /> + <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="_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 class="button" 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> + |