Facebook OGP のいいね!ボタンが表示されずにハマった話【Emanon】

2017年3月2日SNSEmanon,Facebook,Webプロモーション

Emanon Proのテーマを利用してブログを開始しましたが、色々と設定に試行錯誤しています。その中でも、ちょっと分かりにくかった設定のポイントとしてOGP設定があったので、紹介したいと思います。

  • Emanon ProのOGP設定について紹介する

スポンサーリンク

利用しているWordpressテーマ「Emanon Pro」について

(追記:2019年9月にテーマをLuxeritasに変更しました)

Emanon Proのテーマは、シンプルなデザインで可読性が高く、SEO集客にも優れたテーマの一つです。コンサルティングという業務領域と親和性の高い、シンプルで信頼感を醸成しやすいデザインが気に入って、Wordpressのテーマに採用しています。

記事投稿ページの最後に、Facebook のいいね!ボタンをアイキャッチ画像の上に設置できるFacebook OGP の設定機能があります。

設置しようと設定をいじり始めたが最後、トータル約4時間どハマりしたので、同じミスに引っかかった人の参考になってくれることを願って、しょうもないミスを記事にします。

Facebook OGP とは?

OGP ( Open Graph Protocol ) とは、SNSでシェアされた時にページの情報やアイキャッチ画像を意図通りに表示させる仕組みで、SNS拡散を狙うブログ作者にとっては重要な機能です。

アイキャッチ画像の有無でクリック率は大きく変わってきます。
情報過多の現代では、SNSでフロー的に短時間で流れていく情報の中から、閲覧者に手を止めてもらう必要があります。

当然、テキスト情報ではなく画像の方が目に留まる確率、気を引く可能性が挙がってきます。ブログ制作者であれば、必ず設定したい項目です。

設置手順

自分が利用しているテーマ「Emanon Pro」では、カスタマイズ機能としてOGP設定が用意されています。いやー、便利な世の中ですね~。更には、テーマの公式サイトで設置方法を解説してくれています。

いいね!ボタンが表示されない

開設サイトの通りに設定したのですが、何故かいいね!ボタンのみが表示されない!という現象が起こりました。
色々とグーグル先生に教えてもらったところ似たような報告があり、自分に無駄にUI周りの知識もあったせいで大幅な遠回りをしてしまい…
ボタンのCSS width が 0px になってしまうという既存の事例もあったりと、PHPのソースコードまで追ってしまいました。

遠回りした結果、プラグインで実装すればいいやとVA Social Buzzを試しました。

はい。表示されません。そこまでしていいねされたくないのか!

解決手段

四苦八苦していましたが、とあるサイトにたどり着くことができ、やっと解決しました。
(このサイトにたどり着けなければ、多分諦めていました。感謝です。)

オチは、「個人用のFacebook URL ではなく、FacebookページのURLを設定する」ことです。

Emanon の設定にそんな記述ないよーと思って解説ページを見直したら、

すみませんでした。皆さまも、説明文は最後までしっかり読むときっといいことがあります。