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


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

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

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

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

【こちらの記事も要チェック!】
Facebookで「ライブ動画を作成」通知をオフにする方法
Facebookで近くの友達が参加するイベントの通知をオフにする方法
Facebookで今年友だちになった人の人数を調べる方法
Facebookで特定の人から自分のタイムラインがどのように見えているか確認する方法
Facebookで友達リストを作成し、公開設定を細かく指定する方法
Facebookの左メニューに「友達」の項目が表示されていない場合の表示方法
Facebookで特定の人に自分の投稿を見られないようにする方法
Facebookでメッセージが届かない、来ない場合に確認してもらいたいこと
Facebookのデスクトップ通知をオフにする方法
Facebookでイベントの招待を受け取らないようにする方法

スポンサーリンク

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を入力して「デバッグ」ボタンを押せばキャッシュが削除されます。

コードを更に理解する

WordPressをより自由に、思い通りに使用するにはPHPの知識が必要です。

PHPを学ぶには、Web上での情報や知識には限界があるので、人に教えてもらうのが一番の近道です。

そこでオススメなのが「CodeCamp」です。

マンツーマン指導なので、わからないことはすぐ聞けて、無料体験レッスンもあるのでどんな感じか試せます。


ITエンジニア専門スクールもオススメです。

スポンサーリンク

おわりに

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

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


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク