Facebookの『いいね』と『シェア』ボタンが、突然サイト内のページから消えた!~原因と一括で表示を戻す対処法~

45際からのSNS

全ての投稿ページに設置していたFacebookの『いいね』と『シェア』のボタンが突然消えた!

ここではこれまで正常に機能していたFacebookの『いいね』や『シェア』ボタンが、突然(またはWordPress更新後に)消えた場合の対処方の1つを紹介しています。初期設置時に表示されない場合については、他のサイトさんの情報をご参照ください。

Twitterボタンは問題ないのに、なぜFacebookだけ!?

ブログ運用4年を超えたある日のこと。

↓ いつもはこんな感じで、各ページの末尾に設置しているFacebookの『いいね』『シェア』そしてTwitterの『ツイート』ボタンが・・・

 

↓ Facebookのボタンだけ突然消えてる!

Twitterボタンは残っているのに、何故!?

何かFacebookを怒らせるようなことしたかな?

タイミングとして思い当たるとするとWordPressのアップデート。

焦って、すぐに固定ページも調べてみることに。

本稿では、親サイト『Hisshi.jp』に設置しているFacebookの『いいね』『シェア』ボタンが消えたときの実例を元に記事を作成しています。当サイトのFacebookシェアボタンとは多少異なりますのが、ご了承ください。

固定ページはどうか?

TOPページのサイドバー

ありました。

では各固定ページは・・・

各固定ページのサイドバー

消えてる!

固定ページ末尾のボタン

やはり消えている!

データごと消えてしまったのか!?

それならばと、ここはWEBデザイナーらしく開発者モードでデータ自体が消えているのか視覚的にアイコンだけが消えているのかを確認。

上記のようにボタンが消えている画面(と言っても全てですが)の画面上で右クリック → 検証を開き、データを見たところ・・・

ありました!

確かにFacebookの『いいね』と『シェア』のコードデータが残っています。

しかしカーソルをその周辺に当てても全く反応しません(矢印が指マークに変わったりしないのです。)。

データは残っているのにアイコンが消え、ボタンも機能しないのはなぜ!?

Amazonのインラインフレームに埋め込まれているタグと干渉している?

全く原因が分からないので、こういう時はGoogle大先生に頼るしかありません。

早速調べてみたところまず始めに見つかったのが

『Amazonのインラインフレームに埋め込まれているタグと干渉していると、このような現象が起こる』

との情報が!

確かに僕の投稿には、ほとんどAmazonのアフィリエイト広告が貼られています。

↓こんな感じ

しかしこれは今に始まったことではなく、ブログ起ち上げ当初の4年前からです。

Amazon広告を貼っていないページも確認しましたが、やはりFacebookアイコンは表示されていませんでした。

念のため、新規投稿を作り、何も内容が無い状態でFacebookのいいねコードのみ貼ってみましたが、それもだめ。

Java Scriptが原因!?

調査中に判ったことのひとつに、Facebookのアイコンと、Amazonのタグなのか、他のコードなのかは判りませんが、

Java Scriptの問題でFacebookボタンが消えることがある

と、知りました。

Java Scriptというと、プログラミング言語の一つで、視覚的な部分を司る、ということ位は知っていますが、そうは言ってもこの状況をどう解消すればいいのか全くわからずにいました。

日々進化しているFacebookの『いいね』やシェアボタン

しかたないので、Java Scriptの事は一旦置いといて、他の情報を調べてみることにしました。

で、次に見つけたのが下記の情報。

Facebookの「いいね!」ボタンが表示されなくなる問題について。新しいコードへ書き換える方法

記事の投稿日は2014年と少々古いですが、

Facebookのいいねボタンも常にアップグレードされている。

常に最新のデータやコードを使用すれば不具合はお解消される

という点については現在も変わらないのでは無いかと考え、とりあえず試してみることにしました。

Facebookの『いいね』や『シェア』ボタンが突然消えた原因と改善方法

最新の『いいね』ボタンのコードを取得

早速最新のFacebookの『いいね』および『シェア』ボタンを作成するサイトに行ってみました。

logo/fbfordevelopers

僕がブログ開始当初に見たFacebookのアイコン作成ページとはかなり変わっていましたが、使い方は簡単。

URLを打ち込むところに、ボタンを表示させたいページのURLを打ち込み、『コードを取得』ボタンを押すだけです。

すると下記のようなコードが発行されます。

取り急ぎ、最新の『いいね』コードを埋め込んでみた

【ご注意とお願い】

Webサイトやデータの編集をされる場合はご自身の責任の下、必ずバックアップを取ってから、最悪の場合も現状復帰させられるようにしてから行ってください。読者様、閲覧者様が行う行為や、当サイトが紹介するサイト、広告主の安全性に関し、当サイトでは一切責任は負いかねますのであらかじめご了承ください。

一投稿の末尾部分

僕のサイトの場合、過去の投稿の『いいね』ボタンのコードが残ったままですが、念のため発酵されたコードを全部、投稿ページの『コードエディター』状態で、一番下に貼り付けていみると、

表示されました!

しかも以前のボタンと新しいボタン同時に!(とはいえ2つも『いいね』『シェア』ボタンを設置する必要は無いので、あえて新しい方のコードを削除しました。)

一投稿のサイドバー部分

では、サイドバーのボタンはどうでしょう。

同じく表示されています!

この方法で行くと、新たなコードを作成しなくても、下記①部分だけ追記すれば、投稿ページの『いいね』『シェア』ボタンが復旧することが判りました。

しかし、他の投稿ページはどうなっているのでしょうか?

一つの投稿の末尾にこのコードを埋め込んだだけで、全投稿ページの『いいね』『シェア』ボタンが復活するなどありえるのでしょうか。

もし新たなコードを貼り付けたページしかボタンが表示されないのなら・・・。既に数百件ある全投稿にこのコードを貼り付けないということになります。

他の投稿ページの『いいね』『シェア』ボタン

投稿ページ末尾の『いいね』『シェア』ボタン

恐る恐る他のページの末尾をチェックしてみました。

すると・・・

やっぱ消えたまま!

・・・やはり全てのページに追加コードを貼らなくてはダメなのか!?

やはりJava Scriptが原因!?

と、ここで、ふと前述のJava Scriptのことを思い出しましたのです。

Java Scriptの問題でFacebookボタンが消えることがある

そして下記③に何やら『Java Script』の文字があったことを!

Java Script SDK on your page once, ideally right after the opening 本文 tag.

うーん。一応英語は出来るのですが、イマイチ意味が分かりません。

しかたないので、取り急ぎ、コードの①部分をコピーし、Page.phpにペーストしてみることにしました。

ダメでした。

それならばと,header.phpに貼り付けてみると

すると・・・

無事表示されました!しかも全てのぺーじで!

サイドバーは・・・

以上、Facebookの『いいね』や『シェア』シェアボタンが突然消えた場合の対処方の1つをお伝えしました。

おすすめの品

僕はHTMLやWEBサイト作成にあたり、スクールなどに通ったことが一切ありません。ネット動画か本がほとんどなのですが、色々拝見した中でこの商品がかなり秀逸(簡潔で判りやすい)と感じましたので、お勧めしています。

本稿でも一部プログラミングのコードをheader.phpに埋め込む作業を紹介していますが、HTMLやCSSだけでも知っておくと、かなりの部分で応用が利きますので、WEBサイトのカスタマイズですごく活躍します。

【ご注意とお願い】

当サイトにご訪問いただきありがとうございます。

当サイトでは、少しでも皆様のお役に立ちたいと誠心誠意正確な情報を提供しているつもりですが、訪問者様が(当サイトの情報を参考にされたかどうかに関わらず)ご自身で行われる行動(PCの設定変更等)については、当方では一切の責任を負いかねますので、予めご了承ください。

ただし誤った表記があった場合等は、ご指摘頂けましたらすぐに確認し、必要に応じ修正、削除等対応いたします。また、サイトについてのお問い合わせ、仕事のご依頼等も随時受け付けています。

Eye-Catch Photo by NeONBRAND on Unsplash

コメント

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