App IDを正しく取得し、WordPressにOGPを設定する方法

2016/02/01
2016/05/03
WordPress
OGP, APP ID, WordPress

一度取得や設定をしてから次に同じ事をやるときまでに忘れてしまうので覚書。
Facebook Developersの登録からApp IDの取得・設定方法とOGPの設定までの一連の流れを紹介します。

Facebook Developersの登録

1:自分のfecebookにログインしている状態でhttps://developers.facebook.com/へ

2：”Register now”をクリック

3：”いいえ”から”はい”に変更し、登録する

4：完了をクリック

5：表示された画像をクリックし、”送信”

これで登録はOKです。
次にApp IDの取得と設定方法です。

App IDの取得・設定方法

1：デベロッパートップから右上の”My Apps”にマウスオーバー”Add a New App”をクリック

2：basic setupをクリック

3：表示名（日本語可）とカテゴリを選択し、”アプリIDを作成”

4:表示された画像をクリックして”送信”

5：左メニューの”ベーシック”をクリック

6：”表示名”はさっき入力したのでOKで、後は”アプリドメイン”と”連絡先メールアドレス”と”+プラットフォームを追加”に入力します。

7：”ウェブサイト”を選択します。

8：次は左メニューの”アプリレビュー”をクリックして”いいえ”になってるところを”はい”に変更

9:”確認”をクリックする

10:”email”と”public_profile”と”user_friends”が有効になります。

11:これで無事設定完了です。

Facebook Developersの登録とApp IDの取得・設定方法はこれでおしまいです。
次はOGPの設定をしていきます。

OGPの設定

1:header.phpにコードを追加する

HTML5

<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">

HTML5以外

<html lang="ja" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">

2:header.phpのhead内に記述するコード

<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";
} 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="https://example.com/">';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/ogp-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:app_id" content="facebookのApp-ID（15文字の半角数字）">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitterアカウント">

上記のコードでOGPの設定をします。
これは寝ログさんのhttps://nelog.jp/wp-ogp-settingsを使わせていただきました。ありがとうございます。

動作チェック

一通りの設定が終わったらOpen Graph Object DebuggerでOGPの設定にエラーが無いかチェックします。

※”エラーがあったら修正し”Fetch new scrape information”というボタンを押して情報を更新してください。

OGPの画像適正化

OGP画像シミュレータでOGPの画像がどのように表示されるかもチェックしておくと良いです。

いいねボタンと、シェアボタンを設置する

App IDが正常に設定できたらSocial Pluginsでいいねボタンとシェアボタンの設置コードを取得しましょう。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5&appId=●●●";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

まず初めに上記のコードが必要になります。いいねボタン、シェアボタン共通で使用できます。
<body>開始タグの直後にコードを記述します。
●●●に取得したAPP IDを入力してください。

いいねボタンの設置方法

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

｢data-href｣に<?php the_permalink(); ?>タグを指定すれば、各記事毎にパーマリンクを出力してくれるので、全記事共通のコードで対応できます。

シェアボタンの設置方法

<div class="fb-share-button" data-href="<?php the_permalink(); ?>" data-layout="button_count"></div>

こちらもいいねボタンと同じく<?php the_permalink(); ?>タグで記事毎にパーマリンクを出力し、全記事共通のコードで対応できます。

まとめ

一連の流れを紹介させて頂きました。
大事なのは”Open Graph Object Debugger”で正しく設定されているかを確認することです。
エラーが出たら原因を追及し（ここではエラーの例は割愛してます）エラーが無くなるまで根気よく設定してください。
App IDの登録方法やOGPの設定など気がついたら仕様が変更している場合の為にも常にアンテナを張りたいと思います。