1page.title=Google Play 徽章生成器
2page.image=/images/gp-badges-set.png
3page.metaDescription=点击几下就可以为你的应用程序构建徽章，或者下载为各种语言本地化的高分辨率徽章资产。
4
5@jd:body
6
7  <p itemprop="description">借助 Google Play 徽章，你可以在在线广告、宣传材料或任何提供应用链接的地方使用 Google 的官方品牌标识，向大众推广你的应用。</p>
8
9  <p>请在下面的表单中输入你应用的应用包名称或发布者名称，选择徽章样式，点击“制作我的徽章”，然后将 HTML 代码粘贴至你的网页内容中。<em></em></p>
10
11  <p>如果你要为应用创建宣传网页，则还应使用 <a href="{@docRoot}distribute/tools/promote/device-art.html">Device Art Generator</a>，以方便快捷地将应用截图嵌入到设备效果图中。</p>
12
13  <p>有关 Google Play 徽章及其他品牌资源的使用指南，请参阅<a href="{@docRoot}distribute/tools/promote/brand.html#brand-google_play">品牌指南</a>。</p>
14
15  <style type="text/css">form.button-form {
16  margin-top: 2em;
17}
18/* 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     22inline-block    22 */
19label.block {
20  display: block;
21  float: left;
22  width: 100px;
23  padding-right: 10px;
24}
25input.text {
26  display: block;
27  float: left;
28  width: 250px;
29}
30div.button-row {
31  white-space: nowrap;
32  min-height: 80px;
33}
34div.button-row input {
35  vertical-align: middle;
36  margin: 0 5px 0 0;
37}
38#jd-content div.button-row img {
39  margin: 0;
40  vertical-align: middle;
41}
42</style>
43
44  <script type="text/javascript">
45
46  // locales for which we have the 'app' badge
47  var APP_LANGS = ['it','pt-br','pt-pt','nl','ko','ja','fr','es','es-419','en','de'];
48
49  // variables for creating 'try it out' demo button
50  var imagePath = "/images/brand/"
51  var linkStart = "<a href=\"https://play.google.com/store/";
52  var imageStart = "\">\n"
53          + "  <img alt=\"";
54    // leaves opening for the alt text value
55  var imageSrc = "\"\n       src=\"" + imagePath;
56    // leaves opening for the image file name
57  var imageEnd = ".png\" />\n</a>";
58
59  // variables for creating code snippet
60  var linkStartCode = "&lt;a href=\"https://play.google.com/store/";
61  var imageStartCode = "\"&gt;\n"
62          + "  &lt;img alt=\"";
63    // leaves opening for the alt text value
64  var imageSrcCode = "\"\n       src=\"" + imagePath;
65    // leaves opening for the image file name
66  var imageEndCode = ".png\" />\n&lt;/a>";
67
68  /** Generate the HTML snippet and demo based on form values */
69  function buildButton(form) {
70    var lang = $('#locale option:selected').val();
71    var selectedValue = lang + $('form input[type=radio]:checked').val();
72    var altText = selectedValue.indexOf("generic") != -1 ? "Get it on Google Play" : "Android app on Google Play";
73
74    if (form["package"].value != "com.example.android") {
75      $("#preview").show();
76      var packageName = escapeHTML(form["package"].value);
77      $("#snippet").show().html(linkStartCode + "apps/details?id=" + packageName
78              + imageStartCode + altText + imageSrcCode
79              + selectedValue + imageEndCode);
80      $("#button-preview").html(linkStart + "apps/details?id=" + packageName
81              + imageStart + altText + imageSrc
82              + selectedValue + imageEnd);
83
84      // Send the event to Analytics
85      ga('send', 'event', 'Distribute', 'Create Google Play Badge', 'Package ' + selectedValue);
86    } else if (form["publisher"].value != "Example, Inc.") {
87      $("#preview").show();
88      var publisherName = escapeHTML(form["publisher"].value);
89      $("#snippet").show().html(linkStartCode + "search?q=pub:" + publisherName
90              + imageStartCode + altText + imageSrcCode
91              + selectedValue + imageEndCode);
92      $("#button-preview").html(linkStart + "search?q=pub:" + publisherName
93              + imageStart + altText + imageSrc
94              + selectedValue + imageEnd);
95
96      // Send the event to Analytics
97      ga('send', 'event', 'Distribute', 'Create Google Play Badge', 'Publisher ' + selectedValue);
98    } else {
99      alert("Please enter your package name or publisher name");
100    }
101    return false;
102  }
103
104  /** Listen for Enter key */
105  function onTextEntered(event, form, me) {
106    // 13 = enter
107    if (event.keyCode == 13) {
108      buildButton(form);
109    }
110  }
111
112  /** When input is focused, remove example text and disable other input */
113  function onInputFocus(object, example) {
114    if (object.value == example) {
115      $(object).val('').css({'color' : '#000'});
116    }
117    $('input[type="text"]:not(input[name='+object.name+'])',
118            object.parentNode).attr('disabled','true');
119    $('#'+object.name+'-clear').show();
120  }
121
122  /** When input is blured, restore example text if appropriate and enable other input */
123  function onInputBlur(object, example) {
124    if (object.value.length < 1) {
125      $(object).attr('value',example).css({'color':'#ccc'});
126      $('input[type="text"]', object.parentNode).removeAttr('disabled');
127      $('#'+object.name+'-clear').hide();
128    }
129  }
130
131  /** Clear the form to start over */
132  function clearLabel(id, example) {
133    $("#preview").hide();
134    $('#'+id+'').html('').attr('value',example).css({'color':'#ccc'});
135    $('input[type="text"]', $('#'+id+'').parent()).removeAttr('disabled');
136    $('#'+id+'-clear').hide();
137    return false;
138  }
139
140  /** Switch the badge urls for selected language */
141  function changeBadgeLang() {
142    var lang = $('#locale option:selected').val();
143
144    // check if we have the 'app' badge for this lang and show notice if not
145    $("div.button-row.error").remove();  // remove any existing instance of error message
146    if ($.inArray(lang,APP_LANGS) == -1) {
147      $("div.button-row.app").hide();
148      $("div.button-row.app").after('<div class="button-row error"><p class="note" style="margin:1em 0 -1em">'
149          + 'Sorry, we currently don\'t have the '
150          + '<em>Android app on Google Play</em> badge translated for '
151          + $("select#locale option[value="+lang+"]").attr("title")
152          + '.<br>Please check back later or instead use the <em>Get it on Google Play</em> badge below.'
153          + '</p></div>');
154    } else {
155      $("div.button-row.app").show(); // show the 'app' badge row
156    }
157
158    $('.button-row img').each(function() {
159      var id = $(this).parent().attr('for');
160      var imgName = lang + $('input#'+id).attr('value') + '.png';
161      var lastSlash = $(this).attr('src').lastIndexOf('/');
162      var imgPath = $(this).attr('src').substring(0, lastSlash+1);
163      $(this).attr('src', imgPath + imgName);
164    });
165  }
166
167  /** When the doc is ready, find the inputs and color the input grey if the value is the example
168      text. This is necessary to handle back-navigation, which can auto-fill the form with previous
169      values (and text should not be grey) */
170  $(document).ready(function() {
171    $(".button-form input.text").each(function(index) {
172      if ($(this).val() == $(this).attr("default")) {
173        $(this).css("color","#ccc");
174      } else {
175        /* This is necessary to handle back-navigation to the page after form was filled */
176        $('input[type="text"]:not(input[name='+this.name+'])',
177                this.parentNode).attr('disabled','true');
178        $('#'+this.name+'-clear').show();
179      }
180    });
181  });
182
183  </script>
184
185  <form class="button-form">
186    <label class="block" for="locale">语言：</label>
187    <select id="locale" style="display:block;float:left;margin:0" onchange="changeBadgeLang()">
188      <option title="南非荷兰语" value="af">Afrikaans</option>
189      <option title="阿拉伯语" value="ar">العربية</option>
190      <option title="白俄罗斯语" value="be">Беларуская</option>
191      <option title="保加利亚语" value="bg">Български</option>
192      <option title="加泰罗尼亚语" value="ca">Català</option>
193      <option title="中文（中国）" value="zh-cn">中文（中国）</option>
194      <option title="中文（香港）" value="zh-hk">中文（香港）</option>
195      <option title="中文（台湾）" value="zh-tw">中文（台灣）</option>
196      <option title="克罗地亚语" value="hr">Hrvatski</option>
197      <option title="捷克语" value="cs">Česky</option>
198      <option title="丹麦语" value="da">Dansk</option>
199      <option title="荷兰语" value="nl">Nederlands</option>
200      <option title="爱沙尼亚语" value="et">Eesti</option>
201      <option title="波斯语" value="fa">فارسی</option>
202      <option title="菲律宾语" value="fil">Tagalog</option>
203      <option title="芬兰语" value="fi">Suomi</option>
204      <option title="法语" value="fr">Français</option>
205      <option title="德语" value="de">Deutsch</option>
206      <option title="希腊语" value="el">Ελληνικά</option>
207      <option title="英语" value="en" selected="">English</option>
208  <!--
209      <option title="希伯来语" value="iw-he">עברית</option>
210  -->
211      <option title="匈牙利语" value="hu">Magyar</option>
212      <option title="印度尼西亚语" value="id-in">Bahasa Indonesia</option>
213      <option title="意大利语" value="it">Italiano</option>
214      <option title="日语" value="ja">日本語</option>
215      <option title="韩语" value="ko">한국어</option>
216      <option title="拉脱维亚语" value="lv">Latviešu</option>
217      <option title="立陶宛语" value="lt">Lietuviškai</option>
218      <option title="马来语" value="ms">Bahasa Melayu</option>
219      <option title="挪威语" value="no">Norsk (bokmål)‎</option>
220      <option title="波兰语" value="pl">Polski</option>
221      <option title="葡萄牙语（巴西）" value="pt-br">Português (Brasil)</option>
222      <option title="葡萄牙语（葡萄牙）" value="pt-pt">Português (Portugal)</option>
223      <option title="罗马尼亚语" value="ro">Română</option>
224      <option title="俄语" value="ru">Русский</option>
225      <option title="塞尔维亚语" value="sr">Српски / srpski</option>
226      <option title="斯洛伐克语" value="sk">Slovenčina</option>
227      <option title="斯洛文尼亚语" value="sl">Slovenščina</option>
228      <option title="西班牙语（西班牙）" value="es">Español (España)</option>
229      <option title="西班牙语（拉丁美洲）" value="es-419">Español (Latinoamérica)</option>
230      <option title="瑞典语" value="sv">Svenska</option>
231      <option title="斯瓦希里语" value="sw">Kiswahili</option>
232      <option title="泰语" value="th">ไทย</option>
233      <option title="土耳其语" value="tr">Türkçe</option>
234      <option title="乌克兰语" value="uk">Українська</option>
235      <option title="越南语" value="vi">Tiếng Việt</option>
236      <option title="祖鲁语" value="zu">isiZulu</option>
237    </select>
238    <p style="clear:both;margin:0"> </p>
239    <label class="block" for="package" style="clear:left">  应用包名称：
240</label>
241    <input class="text" type="text" id="package" name="package" value="com.example.android" default="com.example.android" onfocus="onInputFocus(this, &#39;com.example.android&#39;)" onblur="onInputBlur(this, &#39;com.example.android&#39;)" onkeyup="return onTextEntered(event, this.parentNode, this)" /> 
242           <a id="package-clear" href="#" onclick="return clearLabel(&#39;package&#39;,&#39;com.example.android&#39;);">清除</a>
243    <p style="clear:both;margin:0"> <em>或</em></p>
244    <label class="block" style="margin-top:5px" for="publisher">  发布者名称：
245</label>
246    <input class="text" type="text" id="publisher" name="publisher" value="Example, Inc." default="Example, Inc." onfocus="onInputFocus(this, &#39;Example, Inc.&#39;)" onblur="onInputBlur(this, &#39;Example, Inc.&#39;)" onkeyup="return onTextEntered(event, this.parentNode, this)" /> 
247           <a id="publisher-clear" href="#" onclick="return clearLabel(&#39;publisher&#39;,&#39;Example, Inc.&#39;);">清除</a>
248           <br /><br />
249
250
251  <div class="button-row app">
252    <input type="radio" name="buttonStyle" value="_app_rgb_wo_45" id="ws" />
253      <label for="ws"><img src="{@docRoot}images/brand/en_app_rgb_wo_45.png" alt="即刻获取 Android 应用 Google Play（小图标）" /></label>
254          
255    <input type="radio" name="buttonStyle" value="_app_rgb_wo_60" id="wm" />
256      <label for="wm"><img src="{@docRoot}images/brand/en_app_rgb_wo_60.png" alt="即刻获取 Android 应用 Google Play（大图标）" /></label>
257  </div>
258
259  <div class="button-row">
260    <input type="radio" name="buttonStyle" value="_generic_rgb_wo_45" id="ns" checked="" />
261      <label for="ns"><img src="{@docRoot}images/brand/en_generic_rgb_wo_45.png" alt="即刻获取 Google Play（小图标）" /></label>
262          
263    <input type="radio" name="buttonStyle" value="_generic_rgb_wo_60" id="nm" />
264      <label for="nm"><img src="{@docRoot}images/brand/en_generic_rgb_wo_60.png" alt="即刻获取 Google Play（大图标）" /></label>
265  </div>
266
267    <input class="button" type="button" value="制作我的徽章" style="padding:10px" onclick="return buildButton(this.parentNode);" />
268    <br />
269  </form>
270
271  <div id="preview">
272    <p>请复制以下 HTML 代码并将其粘贴到你的网站上：</p>
273    <textarea id="snippet" cols="100" rows="5" style="font-family:monospace;background-color:#efefef;padding:5px;margin-bottom:1em" onclick="this.select()"></textarea>
274
275  <p>试试以下内容：</p>
276  <div id="button-preview" style="margin-top:1em"></div>
277  </div>
278
279