FacebookのOGP設定方法/cocoon

備忘録_61 / cocoon_13

全4回に分けてFacebookとWordpressのブログ記事を連携させる為のハウツー記事を投稿しています。
第四回目の今日はOGP設定の仕方です。
まず初めに、実にややこしいのですがFacebookを操作するにあたり、「個人アカウント」「ビジネスアカウント」「ビジネスマネージャアカウント」「デベロッパーアカウント」と、4つのアカウントを使い分けます。
基本的に第一回から順番に読み進めて行くだろう前提に記事が書かれており若干戸惑うかもしれませんが、先の記事でもこれらのアカウントの関係と役割をその都度説明しております、併せてご覧ください。

備忘録_58 Facebook Businessアカウントの作り方
「個人アカウント」と「ビジネスアカウント」について
備忘録_59 wordpress記事をFacebookに自動投稿する/Jetpack
「WordPress.comアカウント」について
備忘録_60 何ッ！Facebookでドメイン認証が出来ないだと！？原因を探れ！/cocoon
「ビジネスアカウント」と「ビジネスマネージャアカウント」について
備忘録_61 FacebookのOGP設定方法/cocoon
「デベロッパーアカウント」について

第一回

第二回

第三回

今回！

Meta for Developers について
Developersアカウントの作成方法

Meta for Developers について

それ以前ではFacebook for developersというサービス名で提供されておりましたが、2021年12月、Facebook,Incが社名をメタ・プラットフォームズに変更したことにより、サービスの名称もMeta for Developersに変更されました。

Facebookデペロッパーアカウントは、エンジニアがFacebookプラットフォーム上で動作するアプリケーションウェア開発に使う為のアカウントです。Facebook C# SDK や PHP、など様々なプログラミング言語に対応しており、利用例としては購買意欲のありそうな顧客を抽出しメッセージを自動配信したり、AIを使い顧客動向を分析したり、ソーシャルグラフを作成し人の繋がりを可視化したり、ウェブサイトへのログインにFacebookのログインを使ったりなどアイデア次第で色々な事が可能です。

デペロッパーツールにはディープな物からライトなものまで揃っており、ガチエンジニアとまではいかないけども、ウェブサイト管理者がFacebookの用意した拡張機能を加えるといったプチ裏ワザ的な使い方もできます。

そして今回この記事でやろうとしている事は、Facebook developersを使ってWordPressとFacebookを連携させるライトな方のモノです。

OGP（Open Graph Protocol）とは？

OGP 【Open Graph Protocol】オープングラフプロトコル
OGPとは、Webページにそのページについての情報（メタ情報）をコンピュータで自動処理できる形で記述するためのデータ形式の一つ。OGPはメタ社が運営する大手SNSのFacebook上で、人や組織の関連や繋がりを表すソーシャルグラフを表現する際、Webサイトも人などと同じように対象物（オブジェクト）に加えることできるように策定された。
via:e-Words IT用語辞典_OGP

WordPressに書いた記事をFacebookページにも転載する際に、レイアウトの崩れが無く、この様に綺麗に表示させるためのプロトコル（書式）です。
送る時にはこの書式で送ってくださいね！というFacebook指定のテンプレートと言えば良いでしょうか。
送られたメタ情報がプロトコルに沿って整っている場合、Facebookページの方でブログカードが作成され綺麗にレイアウトされます。
逆にきちっと指定された書式で送らない場合、レイアウトが崩れて記事タイトルの見栄えが最悪になります。

いやいや、そもそもそのメタ情報とは一体何ぞや？それ美味しいの？食べられるの？

ズバリ、これです！実際にページのソースを開いて見て頂ければ分かり易いのですが、<head></head>の部分にFacebook宛へのこのメタ情報が記述されています。上から順に、
「ページタイプ」「記事タイトル」「ページURL」「アイキャッチ」「サイト名」「使用言語」「アプリID」「投稿日時」「カテゴリ項目」「タグ」が明確に列挙されています。

ソースコードには同様にTwitterやGoogle用のメタ情報も個別に記述しています。プロトコルとは言うものの、今のところ業界共通の仕様では無いようです。

Developersアカウントの作成方法

アカウント作成

[図_4]
デベロッパートップページ。

Meta for Developersへの入り口はこちらです。

Meta for Developers

最初にFacebookの個人アカウントにログインした状態にしておいて下さい。

[図_5]
Facebook for Developersへようこその画面です。

① ビジネスアカウントの名前を入力します。
Metaと言ってみたり、Facebookと言ってみたり、色々混乱させて申し訳ありません。
メタ・プラットフォームズ社に変わってお詫び申し上げます。

[図_6]
メールアドレス確認画面です。

Primary email にメールアドレスを入力しますが、Facebook個人アカウントで登録したメールアドレスが既に入力されています。

② [メールアドレスを認証] をクリックします。

[図_7]
職種の入力画面です。

次のうちあなたに最も当てはまるのはどれですか？
何の取り柄も無いただの凡夫です。
③ ここは無難に開発者あたりでよろしいでしょうか？

[図_8]
アプリの作成画面です。

⑤ [アプリを作成] をクリックします。

元のウェブサイト画面が大きく、ブラウザのサイズを無理に縮めたらレイアウト崩れを起こしてしまいました。
見にくくてすいません。

[図_9]
アプリタイプの選択画面です。

ここでアプリタイプの選択を行います。詳しい事は分からないのですが、この選択次第で使えるアプリが変わって来るようです。変更不可。

⑥ 「なし」を選択します。
全部のアプリが使えるようになるらしいです。

[図_10]
基本情報の入力画面です。

⑧ 表示名の入力をします。
便宜上、アプリに付けるネームです。
メールアドレスとビジネスアカウントは既に入力されています。
⑨ [アプリを作成] をクリックします。

ダッシュボード画面

[図_11]
Meta for Developersのダッシュボード画面です。

追加できるアプリケーションがタイルになって並んでいます。

当然、使い方はわかりません^^;

[図_12]
ダッシュボードメニューです。

① 左ダッシュボードメニューより、
[設定][ベーシック]をクリックします。

赤枠で囲った15桁の数字がアプリIDです。この数字をメモして下さい。

OGP設定に必要なのはこのアプリIDだけです。Facebookビジネスページに投稿する際にこのウェブサイト識別用のアプリIDと、加えて幾つか必要なメタ情報を受け渡すだけで、後はFacebook社のサーバーが自動的に処理をしてくれます。

Cocoon設定

wordpress本体の説明に移ります。ここで本来はwordpressのテーマファイルの<head-insert.php>に変更を加えメタ情報を追加するか、またはFacebook公式プラグイン「Facebook for WordPress」を使うのですが、当サイト、Offtoon blogではwordpress用高機能テーマCocoonを使っています。Cocoonテーマを使うと最初にウェブサイトの識別に使うアプリIDを設定するだけで、以後、Facebookに送るメタ情報は全て自動でピックアップして<head>に書き込んでくれます。