SNS：ソーシャルボタンの多言語対応

数ページの作成なら、Twitterのソーシャルボタンを作成するページやFacebookの「いいね」ボタンを作成するページでコードをコピペしてくるのですが、10カ国以上のソーシャルボタンを作成するときはHTMLのソース上で変更したほうが早いと思うので、ソーシャルボタンの言語コードについてまとめてみました。自分の忘却録がてら書いていきます。

Twitterの場合

TwitterのソーシャルボタンはTwitterのソーシャルボタンを作成するページで作成が可能です。

シェアボタン

次のコードのように言語指定をしなかった場合は、自動でそのユーザーに合った言語を表示してくれるみたいです。

<a class="twitter-share-button"
 data-count="box"
 href="https://twitter.com/share?url=http%3A%2F%2Fwww.goma.pw%2F">
Tweet
</a>

言語指定をしたい場合は次のようなコードになります。
3行目のdata-lang="ja"が言語指定のコードです。
この例では日本語を指定しています。

<a class="twitter-share-button"
 data-count="box"
 data-lang="ja"
 href="https://twitter.com/share?url=http%3A%2F%2Fwww.goma.pw%2F">
Tweet
</a>

• ソースを見やすいように改行を入れましたが、実際のソース上では改行が無くても問題ありません

Twitterの対応言語コード一覧

言語コードの一覧を記載しておきます。

オフィシャルサイトの言語サポート^[1]の解説だと26言語に対応していると書いてあるのですが、Twitterのソーシャルボタンを作成するページ^[2]だと28言語対応しているみたいですね。

参考にしたページ

• ^[1]Twitter for Websites supported languages
• ^[2]Twitter Buttons

Facebookの場合

Facebookの「いいね！」ボタンはFacebookの「いいね！」ボタンを作成するページで作成が可能です。
その他のソーシャルプラグインはソーシャルプラグインのページからジェネレーターのページへ行けます。

「いいね！」ボタン

「いいね！」にはHTML5、XFBML、iframe、URLの4パターンあるのですが、ここではHTML5とiframeの「いいね！」ボタンについて紹介していきます。

HTML5の場合

HTML5の場合はHTML側で言語コードを変更するのではなく、js側で読み込むスクリプトを変更します。
5行目のja_JPが言語コードで、日本語を指定しています。

(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/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

iframeの場合

iframeの場合は、iframeの srcにパラメーターを追加して言語コードを指定できます。&locale=ja_JPが言語コードを指定している部分です。
この例では日本語を指定しています。

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.goma.pw%2F&width&layout=button_count&action=like&show_faces=false&share=false&height=21&locale=ja_JP" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>

iframeで言語コードを省略した場合、自動でそのユーザーに合った言語を表示してくれるみたいです。

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.goma.pw%2F&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>

Facebookの対応言語コード一覧

オフィシャルサイトの言語サポートによると90言語に対応しているみたいです。
さすがFacebookですね。

参考にしたページ

• Localization & Translation
• FacebookLocales.xml
• Like Button for the Web

以上、ソーシャルボタンの多言語対応についてでした。