各種ソーシャルボタンの多言語化設定についてまとめてみた
公開日：2012年11月28日
facebookの「いいね！」ボタンやTwitterの「ツイート」ボタンを多言語表示するための設定について、対応している言語や言語コードの指定を毎回調べている気がするので、備忘録がわりにまとめてみました。まずは、対応言語の多い Facebook、Twitter、Google+ の３つについてです。
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&href=
http%3A%2F%2Fwww.idanet.co.jp&send=false&layout=standard&wi
dth=450&show_faces=true&action=like&colorscheme=light&
font&height=80&appId=xxxxxx" scrolling="no" frameborder=
"0" style="border:none; overflow:hidden; width:450px; height:80px;"
allowTransparency="true"></iframe>
Twitter「ツイート」ボタンの言語設定
Twitterの場合は、公式サイトから言語を指定してボタンのHTMLソースを取得することができます。
ロシア語を選んだ場合のソースはこんなカンジです。
<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チーム：堤