経験知ロゴ 経験知トップへ

自分のブログがfacebookで「いいね!」された時の画像を設定するWordPressプラグインの紹介

facebookロゴ
facebookで自分のブログが「いいね!」された時、タイムラインにどのように表示されるかでアクセス数が変わってきます。

私は設定をしていなかったので、せっかく「いいね!」が100以上ついた記事(笑屋の同窓会を使って同窓会を行うまでの流れを実体験レビュー)がタイムラインにこのように表示されていました。
facebook いいねの表示

画像とタイトルが全く一致していません。しかも、この画像は記事内には使っておらず、おすすめの記事に表示されているサムネイル画像が表示されています。

そこで、自分のブログがfacebookで「いいね!」された時の画像を設定するWordPressプラグインを紹介します。

こちらの記事も要チェック!

facebook(facebook純正プラグイン)をインストール

「Facebook」プラグインをプラグインの新規追加から検索してインストールしてください。詳しくは「WordPressのプラグインをインストールする方法」で。

facebookのデベロッパー登録

facebookにログインした状態で「facebookデベロッパー登録」へ移動し、「Register Now」をクリック。
facebook App IDの取得

パスワードを求められたらログインパスワードを入力。

「I accept the…」にチェックを入れ「続行」をクリック。
デベロッパーへ登録

携帯電話のメールアドレスを入力し「続行」をクリック。
facebook app id 携帯電話メールの設定

迷惑メールの設定で届かない場合があります。私は設定を解除しても届かなかったので、確認コードを入力する画面の左下、「コードを再送信」をクリックした後に「キャンセル」をクリックして、上記手順で進めていくと電話番号でも登録できるようになっているので電話番号で登録しました。
電話番号入力

しばらくするとfacebookから電話がかかってきます。電話を取ると自動音声が流れ、確認コードを伝えてくれるので、確認コードを入力して「承認」をクリック。(スクリーンショット撮り忘れました…。)

次の画面では「スキップ」をクリック。
about-me

「完了」をクリックして登録完了。
facebookデベロッパー登録完了

facebookの「App ID」の取得

facebookデベロッパー登録」へ移動し「新しいアプリを作成」をクリック。
新しいfacebookアプリを作成

「Display Name」にアプリの名前を(私はブログの名前を入れました。)「カテゴリ」でカテゴリーを選択。(私はページ用アプリにしました。)後から変更可能です。
「Namespace」はアプリのURLに使われます。指定しなくてもOK。
新しいfacebookアプリを作成

セキュリティチェック。表示されている画像を入力して「送信」をクリック。
セキュリティチェック

アプリのダッシュボードで、左メニューの「設定」→「+Add Platform」をクリック。
アプリの設定

「ウェブサイト」をクリック。
ウェブサイトを選択

「サイトのURL」を最後の「/」付き(このブログの場合https://keikenchi.com/)で入力し、「変更を保存」をクリック。
サイトのURLを入力

入力完了後、上の方にあるのが「App ID」です。「アプリのシークレットキー」も後で使うので「表示」をクリックして控えておく。
App IDとApp Secretの取得

facebookプラグインの設定

WordPressの管理画面に戻り、左メニューの「Facebook」→「一般」をクリックし、先ほどの「App ID」と「App Secret」を入力して「変更を保存」をクリック。
アプリケーションIDとアプリのシークレットキーを入力

以上で自分のブログがfacebookで「いいね!」された時の画像を設定することができました。画像は、
「アイキャッチ画像」>「記事の本文に含まれる画像」>「カスタムヘッダーの画像」
の順で自動的に表示されるようになっています。

表示の確認

デバッガー」で設定ができているか確認したいURLを入力して「デバッグ」をクリックすると、問題がないか確認できます。

確認したいURLを入力

実際に自分で「いいね!」をクリックして確認してみるとこのように画像もアイキャッチ画像がちゃんと表示するようになり、ブログの名前も表示されるようになりました。
OGPの設定が完了

なお、画像はキャッシュを使用しているようで、画像が作成されるまでに多少時間がかかり、設定したての時は画像がちゃんと表示されないことがあるようです。私は30分ほど時間をあけたらちゃんと表示されるようになりました。

また、すでにキャッシュが作成されてしまっている場合は上記「デバッガー」でキャッシュを消したいURLを入力して「デバッグ」ボタンを押せばキャッシュが削除されます。

わからないことは人に聞こう

プログラミングをする上で、わからないことはネットなどを使い自分で調べる技術が必要ですよね。

時間がかかっても、ある程度のことは解決できます。

しかし、どうしても答えにたどり着けなかったり、探す時間が惜しいときもあります。

そこでオススメなのが無料登録でプログラミングに関する質問ができるテラテイルです。

質問の投稿にコードも投稿できるので、自分のコードを投稿して問題のある箇所を指摘してもらうことができます。

プログラマーには、自分で探す技術も必要ですが、人に聞く技術は更に重要です。

登録無料で質問できますので、テラテイルで質問する力を磨いてみましょう!

おわりに

もっと早くにやっておけば良かった設定です。せっかくの大量の「いいね!」がもったいないことに…。

OGPに関してはまだ始めたばかりなので、これから注視していきたいと思います。

続きの記事 → 2017年最新版!Facebookのアカウントを完全に削除して退会する方法。

▼役に立ったらシェアをお願いします