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

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

2016-12-04IT雑記

質問者の写真

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

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

 

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

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

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

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

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

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

「いいね」ボタンのコードは、Facebook for Developersで取得できます(事前にアプリIDが必要)。

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

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

 

「いいね!」する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() ?>

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

まとめ

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

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

 

※当サイトの会話アイコンはカスタムキャストで作成しています。©2018-2019 Custom Cast, Inc.
この記事を書いた人:天満川 鈴

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。

ADHD、精神障害者手帳3級所持。

慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。

「小説家になろう」の底辺作者。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。

Posted by 天満川 鈴