Back to Top

Facebookのいいね!ボタンのボックスを英語版にして横幅を狭くする方法

titleUnder

Facebookいいね!ボタン

Facebookのいいね!ボタンの横幅は調整しにくいため難儀しましたが、英語版のLike!ボタンにすれば横幅がかなり狭いので一発で解決しました。内容はいいね!ボタンと変わらないですし簡単なコードの追記だけで横幅の狭い英語版に変更することができます。

いいね!ボタンの横幅を狭くしたい

Facebookのいいね!ボタンは横幅が広いため、はてブボタンや横幅を狭くしたTwitterボタンと共に縦に並べるとどうしてもバランスが悪くなってしまいます。
別サイトのタネタンでは左側にはてブ、Twitter、Google+1ボタンを縦に並べています。はてブとGoogle+1ボタンは元々横幅が狭いからいいとして、ツイートといいね!ボタンは横幅が広いので縦に並べると違和感があります。
ツイートボタンはCSSで簡単に横幅を調整できるのですが、いいね!ボタンはなかなか思うように綺麗に調整できません。

そのままのサイズにするとこんな感じです。
デカイわ、おい。
Facebookいいね!ボタン

そこで横幅の狭い英語版にしてみました。こんな感じです。
いいね!がLikeに変わるだけで横幅が全然違いますね。
ツイートボタンだけ少し広めですがこれぐらいなら違和感ありません。
Facebookいいね!ボタン

いいね!ボタンを英語版にする方法

いいね!ボタンを英語版にするにはとても簡単です。

iframe
iframeならlike.php?の後ろに”locale=en_US&”をプラスするだけです。

<iframe src="//www.facebook.com/plugins/like.php?
href=http://www.facebook.com/motonetacom&amp~/iframe>

like.php?の後ろに”locale=en_US&”を追加↓

<iframe src="//www.facebook.com/plugins/like.php?locale=en_US&
href=http://www.facebook.com/motonetacom&amp~/iframe>

HTML5、XFBL
HTML5、XFBLの場合はscript内の”ja_JP”を”en_US”に変更するだけです。

<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";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

“ja_JP”を”en_US”に変更↓

<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/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
このエントリーをはてなブックマークに追加 Clip to Evernote

Comments