docs: Redirect 'Google Play badges' link in ToC to point to new
Play Badge generator. bug: 20154391 Change-Id: Ic24bf944802544dc59e0353151782dd1126923c7
This commit is contained in:
Quddus Chong
@@ -51,7 +51,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-section">
|
||||
<div class="nav-section empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/tools/promote/badges.html" zh-cn-lang="Google Play 徽章生成器">
|
||||
<div class="nav-section empty" style="font-weight:normal"><a href="https://play.google.com/intl/en_us/badges/" zh-cn-lang="Google Play 徽章生成器">
|
||||
<span class="en">Google Play Badges</span></a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -1,362 +0,0 @@
|
||||
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 = "https://developer.android.com/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
|
||||
ga('send', 'event', '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
|
||||
ga('send', 'event', '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>Test your badge:</p>
|
||||
<div id="button-preview" style="margin-top:1em"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user