【WordPress】FacebookでOGP・adminID・アプリID(appID)の設定方法

https://farm6.static.flickr.com/5762/20919637280_707214c8c3.jpg

こんにちは。WordPress初心者のSimplicity野郎・部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております!

私の使っているテーマ「Simplicity」では、「FacebookOGP」というものを登録する画面が最初から付いてます。ここにIDを入れるだけで、Facebookがスゲー有効に使えると思っていました

gori.meで使っているオススメWordpressプラグイン25選 | gori.me(ゴリミー)
gori.meで使っているオススメWordpressプラグイン25選を一覧にしてみた。これからWordpressを使ってブログ等を構築する予定のある人は是非参考にしてみてください!結構オススメのものが多いです。

gori.meでも「Facebookを扱う上では、必ず「OGP(Open Graph Protocol)対応」すべし!」と書いてあります。これをしないと、「◯◯さんがリンクについていいね!と言っています」というほぼ意味不明な状態でリンクがシェアされることになってしまう。これだとバイラルループもクソもない!ということになるそうです。

たぶんですけど、OGPに対応すると、記事の画像とか説明がちゃんと入るということになると思うんです

で、私も「開発者ID」とか、頑張って取得しました。メッチャ調べましたが、数日、Facebookの拡散がほとんど無かったので、いつも拡散していただいている方に「よろしければ拡散お願いします」といったんですね。

そしたら、その方「最近、上がってきてないよ?」とのことでした。部長ナビのページをフォローしていただいているんですけど、フォローしているのに、私の投稿が上がってこないと言われました。

え?OGPのID入れたのに何がダメなの?と思って調べたらコレ

「ブログのアクセスアップにはSNSとの連携が大事です!」
「特にfacebook重点!シェアされてバイラルでアクセス倍増!」

…と、ブログのアクセスアップについて調べていると
こんなこと書いてある記事をよく見かけるかと思います。

でも、具体的に一体どうすればいいのか?
いいねボタン付けてるだけじゃダメなのか?(←不十分です)

WordPressfacebookの連携設定について色々調べてみても、
情報が散逸してたり、情報が古かったり、
公式でも英語のドキュメントしか用意されておらず、
正直かなり複雑で分かりづらいです。私も実際だいぶ苦戦しました。

と、いうことで、このブログで、
WordPressfacebook連携するための、
個人ブログ向け必須設定の方法
なるべく初心者にも分かりやすいようにまとめておきます。

まずは第一弾、OGPの設定方法からどうぞ。

スポンサーリンク

OGP とは?

OGP(Open Graph Protocol)とは、
記事をFacebookで「シェア」「いいね」したときに、
記事の要約やサムネイルを、Facebookのタイムライン上で
どのように表示するのかを記述しておくためのコードです。

OGPを正しく記述しておくと、
Facebookタイムライン上での見栄えが良くなり
Facebookからの流入率向上が期待できます。

OGPを正しく設定しておくと、
Facebookタイムライン上でシェアした時に、
上記画像のように表示されます。

サムネイル画像説明文も、
記事で設定したものが正しく反映されるようになります。

しかし、OGPを設定していないと、
サムネイル画像説明文が、予期しないものになってしまうので、
Facebookシェアされても、パッと見どんなサイトなのか分かりづらく
クリックされずらくなってしまいます。

OGP設定の確認方法

OGPが正常に記述されているかどうかは、
FacebookOpen Graph Debbugerで確認できます。

デバッガの入力欄に、
ブログの任意の記事URLを入力して「デバッグ」ボタンをクリック

OGPの設定にミスがあると、
以下の画像のようなエラー警告が出ます。

エラーは絶対に出さないように。
警告もなるべく出ないように設定しておきましょう。

警告が出ている状態でも、一応記事内容の表示はされますが、
予想通りの表示がされなかったりするので、あんまりよろしくないです。

ちなみに、WordPress初期状態ではOGPの設定はされていません。

もし警告が出ていたら、
この記事を読んで、設定を見なおしてみましょう!

個人用Facebookアカウントを作成してログイン

OGPなど、Facebook関連の設定を行うためには、
まず個人用のFacebookアカウントが必要となります。

アカウント持ってない人は、この機会に作成しておきましょう。

Facebookは実名登録や顔写真のアイコン化が推奨されていますが、
仮名でも、アイコンの設定はしなくても大丈夫です。

Facebookアカウントの詳しい取得方法は、
こちらの記事をご覧ください↓
PCからFacebookに登録する方法 – Facebook navi[フェイスブックナビ]

adminIDを取得

adminIDを取得するために、以下のURLにアクセスします。

Find my Facebook ID

そして、Personal Profile URLを入力します。

私の場合、URLは ( https://www.facebook.com/shin.odashima.3 )なので、それを入力しますと自分のadminIDが取得できます。

15文字の数字列が adminIDです。

この数字列をメモしておきましょう。後で使用します。

アプリを作成してappIDを取得

https://developers.facebook.com/ にアクセスして、
appIDを取得するために、新しいアプリを作成します。

さらに、新しいアプリを作成する前に、
開発者登録を完了しないといけません。

「なぜアプリ作成が必要なの?」と思うかもしれませんが、
OGPの記述や、「いいね」「シェア」ボタンを正しく動作させるために、
appID (アプリケーションID) というものが必要となるからです。

「開発者登録」とか「アプリ作成」とか聞くと、
何やら難しそうなイメージを感じるかもしれないですが、
ブログと連携するだけならば、それほど難しいことはありません。

この記事の解説通りにやっていけば大丈夫!信じて!

開発者登録 ( Register as a Developer )

https://developers.facebook.com/ から、
上部メニューの アプリ → Register as a Developer

プライバシーポリシーを承諾して 「次へ」

携帯電話のメールアドレスを入力して、
Send as Textをクリックすると、
入力したメールアドレスに、確認コードが送られてきます。

それを入力して、「登録」

You have successfuly registered as a Facebook Developer!
これで開発者登録完了です。

アプリの作成

(開発者登録を済ませた状態で)
上部メニューの アプリ → 新しいアプリの作成

Display Name (表示名), Namespace (名前空間), カテゴリを設定します。

ここではブログの名前を入力しておくと良いでしょう。
Namespace は、他のアプリと被らないように、
アルファベットのみで指定する必要があります。

カテゴリは色々ありますが、
ここでは「ページ用アプリ」で良いでしょう。

画像認証を通します。

これを完了すると、アプリの管理ページに移動します。

アプリを development mode から public mode に

作成したばかりのアプリは
development mode (開発者用モード)となっており、
このままの状態で使用すると、若干の不具合があるようです。
いいねボタン等を作ろうとするときにも注意が出ます。

なので、これを public mode (公開用モード)に変更しておきます。

アプリ管理画面のダッシュボードです。
アプリ名の右の緑の丸にカーソルを合わせると、

Not avilable to all users because your app is not live
(有効化されてないから、このアプリは全てのユーザーには使えないよ)

っていう表示が出ます。

これを有効化するために、
まず、左側メニューの「設定」へ移動します。

「設定」ページで、
「連絡先メールアドレス」を入力して、
「変更を保存」します。

これはアプリを public mode にするために必要な設定です。

ここは携帯のメールアドレスではなく、
gmailなどのフリーメールでも大丈夫です。

次に、左側メニューの「Status & Review」へ移動します。

右側のスイッチをクリックして、
「いいえ」から「はい」にします。

確認画面が出るので、「承認」

これで、アプリがpublic mode になりました。
アプリ名前の右側の緑の丸が塗りつぶされているのが目印です。

appIDを取得

アプリ管理画面のURLの数字がappIDとなります。
これをコピーして、メモしておきましょう。

ブログにogp記述

以下のコードをheader.phpに挿入します。
4箇所ほど、各自修正する部分がありますので注意です。

ソースコードは、以下の記事より拝借したものを少々改変しております。
[ WP ] OGPとは? WordPressにプラグイン無しで設定する方法 | yossense

◆【1】adminIDを入力◆◆【2】appIDを入力◆
の部分には、先程取得したadminID,appIDを入力しておきます。

◆【3】画像がない記事ページ用の「デフォルト画像のURL」◆
◆【4】ホームやカテゴリページで出したい画像のURL◆
の部分には、ブログのテーマ的な画像
WordPressにアップロードして、そのURLを記述しておくと良いでしょう。

ちなみに当ブログでは、
この画像を使っています↓
コードの挿入場所は
外観テーマ編集 から、
header.php を開いて、
</head> タグを見つけたら、
その上の部分です。

挿入場所の参考画像↓

賢威テンプレートの場合(6.1)

賢威テンプレートを使用している場合、だいぶ楽に設定できます。
賢威いいよ賢威。まじオススメです。

WordPress編集画面の、賢威の設定 → facebook から、
appID,管理者ID(adminID),デフォルト画像など
指定するだけでOKです。

ただ、この設定だけだと少々問題があり
解決する必要があるオープングラフの警告」が出てしまうので、
外観 → テーマ編集 → facebook.php を開き、

172行目の以下のコードを無効化します。

この行の一番左に 「//」(スラッシュ2つ)を記述して、
コメントアウトして以下のようにして、
この行を無効化すると警告は出なくなります。

プラグインを使用する場合

WP-OGP」「Open Graph Pro」といった
OGP設定が簡単にできるプラグインもありますが、

デフォルトの状態で、デバッガ(後述)で確認すると、
解決する必要があるオープングラフの警告」が出るので、
個人的にはオススメしません。

警告が出ない「Facebook」という名称の公式プラグインもありますが、
少々面倒な設定な設定があるので、ここでは推奨はしません。

もしプラグインで設定したいのであれば、
公式の「Facebook」プラグインを使いましょう。

デバッガーでOGP設定を確認

OGPの設定がすべて完了したら、
再度、デバッガーで確認しておきましょう。

警告が出たら、この記事と設定をもう一度見なおしておきましょう。
見なおしてもダメだったら、コメントください…

 まとめ

  • OGPちゃんと記述するとFacebookからのアクセスアップが望めるよ!
  • デバッガでちゃんと確認して、警告出ないようにしよう!
  • 警告出てたら、この記事見ながら設定見なおしてみよう!

というお話でした。

このサイトの説明が神ですが、サイト自体が無くなってしまったので、引用と言うことで掲載させていただきます。

分かりやすくいうと「ID取得するだけだと、アプリが「非公開モード」になるので、フォローしてくれている方に投稿が行かないから「パブリックモード」に変更しないとダメ」ということなんです。恐るべしOGP!そんなの知らねーぜ!

っつーわけで、見ながら設定して、やってみたら、何とかフォロワーの皆さんに私の投稿(更新情報)が行くようになりました。良かった〜

Facebook、マジでヤバいです。

Twitterは「速報性」がスゴくて、Tweetした瞬間からアクセスがあります。リアルタイム通知の効果もあるかと思いますが、ハッシュタグの拾われ方がスゴいことに最近気付いています。Twitterスゲえ!

でも、拡散の爆発力はFacebookです。ヤバいです。Twitterとは違った広がり方をします。

「友達の友達にドンドン拡散」していくのがスゴいです。全く知らない方から連絡が来たります。で、良く伺うと「実はこの方のページに「いいね」されていたのを見て覗いてみたら面白かった」なんてメッセージいただきますので、スゴいです。Facebook。ヤバいっす。

っつーわけで、WordPress野郎の皆さんは、Simplicityオススメしているわけですけど、FacebookOGPの設定をぜひやってみてください。本当にスゴいっす。

Facebookやってる方は、更新情報が届きますので、ぜひ、部長ナビのFacebookページに「いいね」「フォロー」お願いしますね!よろしく!

スポンサーリンク

この記事をシェアする!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索