【Facebook】いいねボタン横に謎の日本語テキスト

Facebookの「いいね」ボタンを、Webサイトに埋め込もうとしています。
しかし、吹き出しが表示されず、ボタン横におかしな文法の日本語テキストが表示されます。

Facebook公式サイトで、URLを入れても入れなくても同じです。
（プレビューはしないものなのでしょうか？）

左側のtwitterボタンのような吹き出しにしたいのですが、どなたかご存知ないでしょうか。
SNSボタンはほとんど触ったことがありません。

行動規範の内容に同意します

回答1件

ベストアンサー

<body>開始タグ直下に以下を ```ここに言語を入力 <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/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> ``` ボタンを表示したい箇所に以下を

<div class="fb-like fb-like-button" data-href="[URL]" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>

これでどうですか？

投稿2015/09/18 01:03

MineoOkuda

総合スコア89

退会済みユーザー

2015/09/18 02:18

ご回答くださりありがとうございました。書いて頂いたものは旧バージョンのものですね？どうやらFacebookアカウントがないと、ボタン横にテキストを表示する仕様に変更されているようです。

MineoOkuda

2015/09/18 02:55

旧バージョンと言うのは js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0"; ここのことですか？2.4でも2.0でも挙動は同じでしたが・・・結局data-◯◯属性が大事です。 data-layout="button" data-action="like" data-show-faces="false" data-share="false" この３つの属性を追記してあげれば現行バージョンの2.4でもうまくいきましたがどうでしょう？

MineoOkuda

2015/09/18 03:07

失礼しました。このlike buttonの表示だと吹き出しは表示されないようです。一番いい方法はiframeみたいですね。 <iframe src="https://www.facebook.com/v2.0/plugins/like.php?action=like&href=[URL]&layout=button_count&locale=ja_JP&share=false&show_faces=false" width="120" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>

退会済みユーザー

2015/09/18 09:47

コメントくださっていたんですね、ありがとうございます。えぇ、iframeでないと吹き出しは表示されないようです。 Facebookはいいねボタンを廃止する予定なんじゃないですかね。

MineoOkuda

2015/09/28 03:41 編集

今さらなのですが、検証したところdata-layout="button_count"にすればいけました。 <div class="fb-like fb-like-button" data-href="[URL]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

行動規範の内容に同意します