プラグイン不要でFacebook OGPをコピペでサクッと設置する方法|WordPressカスタマイズ

Facebook

以前、Facebook OGPの設定について以下のような記事を書きました。

僕はこれまで、FacebookのOGPの設定は、「Open Graph Pro」プラグインで行っていました。けれど、Open...

これも、かなり簡素化されたOGP設定の方法なんですが、All in One SEO Packのようなプラグインを使う必要があったり、トップページのog:image画像を用意する必要がありました。けれど、今回の方法は、そういった作業も不要にし、さらに簡略化したものに書き換えてみました。

基本的に数回コピペしてFacebook管理者情報の入力をすればOKな方法になっています。

「Facebook OGPとは何ぞや?」という方は上記のリンクを参照してください。

photo by Coletivo Mambembe

スポンサーリンク
レクタングル(大)広告

プラグイン無しでのOGP設定手順

プラグイン無しでOGPの設定をするには以下をダウンロードして中身のogp.phpをテーマフォルダ内にコピペしてください。

ogp.phpのダウンロード

ogp.phpの中身は以下のようになっています。

<!-- OGP -->
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
  echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋を表示
endwhile; endif;
  echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
  echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
  echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
  echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
  echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
  if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
    $image_id = get_post_thumbnail_id();
    $image = wp_get_attachment_image_src( $image_id, 'full');
    echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
  } else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
    echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
  } else {//投稿にサムネイルも画像も無い場合の処理
    $ogp_image = get_template_directory_uri().'/images/og-image.jpg';
    echo '<meta property="og:image" content="'.$ogp_image.'">';echo "\n";
  }
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
  if (get_header_image()){//ヘッダーイメージがある場合は、ヘッダーイメージを
    echo '<meta property="og:image" content="'.get_header_image().'">';echo "\n";
  } else {//ヘッダーイメージがない場合は、テーマのスクリーンショット
    echo '<meta property="og:image" content="'.get_template_directory_uri().'/screenshot.png">';echo "\n";
  }
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:locale" content="ja_JP" />
<meta property="fb:admins" content="ADMIN_ID">
<meta property="fb:app_id" content="APP_ID">
<!-- /OGP -->

Facebookへの登録

上記コードの開発者情報部分は、Facebookの「管理者ID」と「アプリID」は自身のものに変更してください。

<meta property="fb:admins" content="ADMIN_ID">
<meta property="fb:app_id" content="APP_ID">

登録方法は、以下を参照してください。

Facebookアプリの開発者登録をして、最初のアプリを作成し、AppIDを取得するまでの流れを書いておきます。新しく開発用のアカウントを作る訳ではなく、自分自身のFacebookアカウントを開発者として利用できるようにします。また、ここで
「解決法」とか偉そうなタイトルを書きましたが、この記事は解決法でもな...

この作業はちょっと面倒くさいかもしれません。

個人的には、「管理者ID」と「アプリID」のタグはなくてもOGP情報が表示されるので必要ないような気もしますが、Facebook自体は登録を推奨しているようです。Facebook自体ユーザーを把握したいというのもあるでしょう。面倒くさい場合は、タグを消してしまっても良いでしょう。後からいくらでも記入できるので。

最後に、テーマのヘッダーファイル(header.php)の<head></head>タグ内に以下のコードでogp.phpを呼び出して終了です。

<?php get_template_part('ogp');?>

Facebook開発者情報の登録がなければ、コピペ2回ほどで終わります。

子テーマでカスタマイズする場合

先程の、コードを子テーマで利用する場合は、get_template_directory_uri()の部分をget_stylesheet_directory_uri()に変更して利用する必要があります。

get_template_directory_uriは、親テーマフォルダのURL取得。get_stylesheet_directory_urは、子テーマフォルダのURL取得です(子テーマが適用されている場合)。

動作確認

テーマをカスタマイズしたら、動作を確認します。

ソースチェック

まずはソースの確認です。ブラウザのソースは以下のように表示されます。

<!-- OGP -->
<meta property="og:type" content="blog">
<meta property="og:description" content="Pocket 僕はこれまで、FacebookのOGPの設定は、「Open Graph Pro」プラグインで行っていました。 けれど、Open Graph Proを使っていると、不具合が結構あったので、">
<meta property="og:title" content="【WordPress】Facebook OGPプラグインの使用を止めて自前で設定したら意図通りの画像で正しくシェアされるようになった">
<meta property="og:url" content="https://nelog.jp/ogp-settings-in-wp-theme">
<meta property="og:image" content="https://nelog.jp/wp-content/uploads/2014/06/Facebook.jpg">
<meta property="og:site_name" content="寝ログ">
<meta property="og:locale" content="ja_JP" />
<meta property="fb:admins" content="100001189801332">
<meta property="fb:app_id" content="626022407455274">
<!-- /OGP -->

タグの記載に誤りがないかチェックしてください。

動作チェック

動作確認は、Facebook Debuggerを用いて行います。チェックしたいURLを入力して「Debug」をクリックしてください。

Facebookデバッガー

以下のように、OGP情報が表示されればOKです。

Object Debugger

まとめ

これで、かなり簡単にFacebookのOGP情報表示ができるようになったと思います。

プラグインで、細かく設定したいという人には向いてないかもしれませんが、手っ取り早くOGP情報を表示させたいという人にはお勧めです。

『プラグイン不要でFacebook OGPをコピペでサクッと設置する方法|WordPressカスタマイズ』へのコメント

  1. 名前:テンタン 投稿日:2015/06/24(水) 02:30:17 ID:43679459b

    ソースをありがとうございます。
    大変ありがたく使わせていただいたのですが、

    >がひとつ多く、ヘッダートップに
    >が表示されてしまいます。

    が22個あります。

    削除できる「>」はございますでしょうか?

    よろしくお願いいたします。

  2. 名前:テンタン 投稿日:2015/06/24(水) 02:32:25 ID:43679459b

    申し訳ありません。
    脱字がありました。

    が22個

    です。

    よろしくお願いいたします。

  3. アバター画像 名前:わいひら 投稿日:2015/06/24(水) 17:42:06 ID:742957fc9

    <よりも、>が1つ多いのは以下で使われているからだと思います。

    $str = $post->post_content;

    ざっと見た感じでは、タグにおかしな部分は見当たりませんでした。
    何か他の原因などは考えられないでしょうか?
    ちょっと原因は、サイトのソースでも見てみないとわからないかもしれません。

  4. 名前:テンタン 投稿日:2015/06/25(木) 03:13:04 ID:90ec40298

    ご確認いただき誠にありがとうございます。

    確かにfacebookには正常に表示されますし、エラーも出ません。

    ヘッダーの上に「>」が表示されるのは、全ページではなく、single.phpのみでした。

    コメントいただいた「サイトのソースでも見てみないとわからないかもしれません。」のお言葉で、自分のソースを改めてみて原因がわかりました。

    「続きを読む」の次にアイコンフォントで「>>」を表示させてました。そこを普通に「>>」にしましたら、ヘッダーから表示が消えました。

    大変ありがとうございました。

    とても有益なブログの存在に感謝申し上げます。

  5. 名前:JUN 投稿日:2015/11/02(月) 14:27:13 ID:fc8354ef6

    わいひらさん、初めまして。
    Webデザイン ABCというサイトを管理してます、WebデザイナーのJUNと申します。

    最近OGPの設定を色々試し、わいひらさんのこちらの記事を参考にして、この記事、http://webdesign-abc.com/howto/ogp/ を書かせていただきました。

    間違ったことを書いていたり、不都合があれば、改変、また削除いたしますので、おっしゃっていただければありがたいです。

    あと一つ質問なのですが、Debugを実行すると、なんどやってもog:localeの部分がおかしいのですが、もし記述がおかしいようであれば教えていただきたくも思っています。

    お手数おかけしますが、よろしくお願い致します。

    JUN

  6. アバター画像 名前:わいひら 投稿日:2015/11/14(土) 11:59:27 ID:a210ea93e

    返事が遅れて申しわけありません。

    記事の引用は、全然問題ありません。
    逆に、記事を紹介していただきありがとうございます。

    Debugというのは、こちらでよろしいでしょうか。
    デバッガー – 開発者向けFacebook
    このページを、上のチェッカーで確認してみると、以下のようになります。
    https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fnelog.jp%2Fwp-ogp-settings
    特に、エラーは出ていないように思うのですが、JUNさんの場合は、どのようなエラーが出ておられるのでしょうか?

  7. アバター画像 名前:わいひら 投稿日:2016/06/24(金) 05:54:34 ID:742957fc9

    関連トピック。
    OGP設定についての質問です。

  8. 名前:Lognote 投稿日:2017/03/29(水) 23:07:36 ID:8c0dfd5f5

    わいひらさん、こんにちは。
    いつも参考にさせていただいております。

    OGPのコードとTwitter Cardのコードを使用させていただいたのですが、
    子テーマでカスタマイズする場合は
    get_template_directory_uri()の部分を
    get_stylesheet_directory_uri()にしないと子テーマのイメージフォルダにアクセスできないかと思います。

    親テーマ、子テーマの記述がなかったので一応コメントさせていただきました。
    これからも頑張ってください!

  9. アバター画像 名前:わいひら 投稿日:2017/03/30(木) 11:16:03 ID:eaa8c534b

    かなり昔に書いた記事なので、そこらへんはあまり意識せずに書いていたようです。すぐに追記しておこうと思います。
    教えていただき、ありがとうございます!