【備忘録】SNS ソーシャルボタンの多言語対応(英文・中文繁体)

 

 Web技術

さて、今回は

  • Twitterのソーシャルボタン
  • Facebookのシェアボタン・いいねボタン

を他言語(英文・中文繁体)化したいというご依頼がありましたので
どのように対応したかを書き留めたいと思います。

まずは各ボタンのコードを取得

上記URLから、各コードを取得します。

Twitterソーシャルボタンのタグ

Facebookの「いいね」ボタン・Facebookの「シェア」ボタンのタグ

※「HTML5」の場合となります。

※下記を忘れずに貼りましょう。

これが通常の日本語の状態ですね。

 

Twitterソーシャルボタンの場合

Twitterのソーシャルボタンは、
どうやらlang属性を読み取ってくれるようで

英文のときは「<html lang=”en>」

中文繁体のときは「<html lang=”zh-tw>」

と書いてあげれば、
他には特別何もせずに変更されました。

言語コード指定でも設定可能

aタグの中に「data-lang=”言語コード”」を追加します。

★Twitterの対応言語コードはこちらをご覧ください。
Twitter for Websites supported languages

後は
「data-text」の部分を各言語の文章に変更します。

 

Facebookの「いいね」ボタン・Facebookの「シェア」ボタンの場合

「HTML5」の場合は
javascript側で、読み込むスクリプトのパスを変更します。

6行目「js.src = ‘https:~」の「en_US」部分を
指定の対応言語コードに変更します。

★Facebookの対応言語コードはこちらをご覧ください。
Account Kitのローカライズでサポートされている言語

 

これでソーシャルボタンの多言語対応ができました。

英文

中文繁体

 

海外からの観光客の方向けページなどに使えますね!


↓今回こちらの方のブログが参考になりました。ありがとうございます。

●SNS:ソーシャルボタンの多言語対応
https://goma.pw/article/2015-02-22-0/

 この記事の投稿者

iziz

iziz

Webデザイナー&HTMLコーダーときどきイラストレーター。
  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

メッセージ

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

*コメント

*名前

ページ最上部へ