2012年11月28日

facebookの「いいね!」ボタンやTwitterの「ツイート」ボタンを多言語表示するための設定について、対応している言語や言語コードの指定を毎回調べている気がするので、備忘録がわりにまとめてみました。まずは、対応言語の多い Facebook、Twitter、Google+ の3つについてです。

各種ソーシャルボタンの多言語化設定についてまとめてみた

facebook「いいね!」ボタンの言語設定

「いいね!」ボタンの設置方法には何種類かあり、言語を指定する部分も若干異なります。

HTML5、XFBMLの場合は、JavaScript内のURLに言語コードを指定する。

HTML5の場合だと、こんなカンジです。XFBMLの場合もほぼ同じです。


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=xxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

言語を指定するには、js.src のURL部分の言語コードを変更します。例えば次のような言語コードが指定できます。

言語 言語コード
英語(アメリカ) en_US
中国語(簡体字) zh_CN
タイ語 th_TH
ポルトガル語(ブラジル) pt_BR

facebookが対応している言語は70以上あります。指定可能な言語コードの一覧は Developers サイトの XMLファイルにまとまっています。

iframeの場合は、like.php の locale パラメータで指定。

iframeで設置する場合は、src で like.php に渡すパラメータに locale を追加して言語コードを指定します。指定する言語コードはHTML5の場合と同じです。


<iframe src="//www.facebook.com/plugins/like.php?locale=ja_JP&amp;href=
http%3A%2F%2Fwww.idanet.co.jp&amp;send=false&amp;layout=standard&amp;wi
dth=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;
font&amp;height=80&amp;appId=xxxxxx" scrolling="no" frameborder=
"0" style="border:none; overflow:hidden; width:450px; height:80px;"
allowTransparency="true"></iframe>

Twitter「ツイート」ボタンの言語設定

Twitterの場合は、公式サイトから言語を指定してボタンのHTMLソースを取得することができます。

Twitterボタンページ

ロシア語を選んだ場合のソースはこんなカンジです。


<a href="https://twitter.com/share" class="twitter-share-button"
data-lang="ru" data-count="none">tui-to</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="
//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");</script>

多言語化に関する部分は、aタグの data-lang 属性の部分です。aタグではさまれた「ツイート」にあたるテキストはこのまま表示されるわけではなく、JavaScriptで上書きされているようです。JavaScriptが有効ではない場合には、このテキストが表示されるようです。

Twitterは33言語の設定が可能です。インドネシア語やマレー語には対応しているのに、ベトナム語に対応していないのは意外でした。主な言語コードの表記は下記のようなものです。

言語 言語コード
英語 en
簡体中国語 zh-cn
ポルトガル語 pt
ドイツ語 de

Google plus「+1」ボタンの言語設定

Google+の場合も、公式サイトから言語を指定してボタンのHTMLソースを取得することができます。

簡体中国語を選んだ際のソースはこんなカンジです。言語の指定は、JavaScript部分の window.___gcfg 変数に渡す値で指定されています。{lang: ”}の部分です。


<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
   window.___gcfg = {lang: 'zh-CN'};
  
   (function() {
     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
     po.src = 'https://apis.google.com/js/plusone.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
   })();
</script>

上記の設定で、ボタンの上にロールオーバーした際のメッセージも指定した言語で表示されます。Google+ は61の言語に対応していて、主な言語コード表記は下記の通りです。

言語 言語コード
英語(アメリカ) en-US
簡体中国語 zh-CN
ポルトガル語(ブラジル) pt-BR
韓国語 ko

+1 ボタンで利用可能な言語と言語コードは下記のページにまとまっています。

ところで、今回あらためて調べてみて、facebookが対応している言語に「Leet Speak」があることに気づきました。こんなモノにまで対応しているんですねぇ。言語コードは fb_LT だそうです。

WEBチーム:堤