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

2012.11.28 2019.08.27

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

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

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

facebook の Developers サイト

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ソースを取得することができます。

Google +1 Button ページ

簡体中国語を選んだ際のソースはこんなカンジです。言語の指定は、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>

 <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の言語に対応していて、主な言語コード表記は下記の通りです。