Facebook OGP のいいね！ボタンが表示されずにハマった話【Emanon】
Emanon Proのテーマを利用してブログを開始しましたが、色々と設定に試行錯誤しています。その中でも、ちょっと分かりにくかった設定のポイントとしてOGP設定があったので、紹介したいと思います。
- Emanon ProのOGP設定について紹介する
利用しているWordpressテーマ「Emanon Pro」について
（追記：2019年9月にテーマをLuxeritasに変更しました）
Emanon Proのテーマは、シンプルなデザインで可読性が高く、SEO集客にも優れたテーマの一つです。コンサルティングという業務領域と親和性の高い、シンプルで信頼感を醸成しやすいデザインが気に入って、Wordpressのテーマに採用しています。
記事投稿ページの最後に、Facebook のいいね！ボタンをアイキャッチ画像の上に設置できるFacebook OGP の設定機能があります。
設置しようと設定をいじり始めたが最後、トータル約４時間どハマりしたので、同じミスに引っかかった人の参考になってくれることを願って、しょうもないミスを記事にします。
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 の設定にそんな記述ないよーと思って解説ページを見直したら、
すみませんでした。皆さまも、説明文は最後までしっかり読むときっといいことがあります。