小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

設置した「いいね!」ボタンの下部分が切れてしまっている場合の対処 ~フェイスブック様、配布コード間違ってません? 

IT雑記
この記事は約3分で読めます。

質問者の写真

フェイスブックの「いいね」ボタン設置したら、ボタンが欠けちゃってるんですけど!
 

具体的にはこんな感じです。

 

下部分が切れてしまったフェイスブックの「いいね!」ボタン

スポンサーリンク
この記事を読む方へのオススメ

フェイスブックの「いいね!」ボタンが切れてしまう!

この度、サイトにフェイスブックの「いいね」ボタンを設置することにしました。
フェイスブックのページに行って、コードを取得、テンプレートに貼り付ける……あれ?
ボタンの下が切れてしまっていました。

フェイスブックのボタン表示が下にずれるというのは割と有名な話なので、その関係?

しかし探り当てた原因はまったく違ってました。

スポンサーリンク

そもそも表示されたコードが間違ってました

「いいね」ボタンのコードは、Facebook for Developersで取得できます(事前にアプリIDが必要)。
いいね!ボタン - ソーシャルプラグイン - ドキュメンテーション - Meta for Developers

ページをスクロールすると、入力画面が表示されます。

フェイスブックデベロッパー「いいね!」ボタン取得の入力画面

 

「いいね!」するURLに自サイトのURLを記載。
画像の設定にして、「コードを取得」をクリック。

フェイスブック「いいね!」ボタンの設置コード

 

IFremeをクリックして出てきたコードをテンプレートに貼り付ければ完了。
……のはずだったのですが。
このまま貼り付けると、こうなっちゃうわけです。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-14-00-52

つまり、

解答者の写真
提供されるコードそのものが間違ってるわけ
 

テーマを変えても同じ現象になりましたし。
というわけで原因をつきとめにかかります。

スポンサーリンク

「いいね!」ボタンの修正方法

案外あっさり原因が判明しました。
元のコード

<iframe src="https://www.facebook.com/plugins/like.php?href=【あなたのURL】&width=126&layout=button_count&action=like&size=large&show_faces=false&share=false&height=21&appId=【あなたのアプリID】" width="126" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

のうち、この箇所。

height=21&appId=【あなたのアプリID】" width="126" height="21

2つあるheightは「21」となっています。
しかしページ検証で判明したフェイスブックのボタンの高さは「28」。

質問者の写真

heightの数値がおかしいじゃん!
 

そこで、次の通り変更しました。

height=28&appId=【あなたのアプリID】" width="126" height="28

質問者の写真

直った!
 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-15-01-04

スポンサーリンク

ついでに書き換えておく場所 ~「いいね!」ボタンを個別記事に対応させる

コードをそのまま貼ると、別の問題が発生します。
それは、

質問者の写真

「いいね!」がサイト全体に反映されちゃう!
 

今度はフェイスブック側の問題じゃないので念のため。
上のコードの【あなたのURL】部分に、次のコードを入れてください。

<?php the_permalink() ?>

これで個別記事に対応できます。

スポンサーリンク

まとめ

普通の人ならすぐ気づけるんでしょうね。
きっと私がたまにしかコード触らない素人なのが悪いんです……それでも!
素人なのを棚に上げてでも、フェイスブック様には物申したい!

解答者の写真
お願いですから、正しいコードを配布してください!
 

 

ブログやサイトを始めたい・引っ越したい方へ

レンタルサーバーWING。
KUSANAGI&WEXALが使えるVPS。
どちらでも高速でコスパに優れたConoHaで始めるのがおすすめです。
もっと知りたい方はボタンをクリックしてください。
(ボタン経由で入会した場合、1000円分のクーポンがもらえます)

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
IT雑記
スポンサーリンク

コメント

タイトルとURLをコピーしました