WordPressには便利なOGP対応プラグインがあるらしいですが、プラグインを使わない方法を試してみました。
対象は、このブログです。
次の点が、今回の作業の主なポイントです。
- 個別記事には、それぞれ独自（URL、記事タイトル、説明文、画像など）の設定する
- 個別記事とそれ以外を振り分ける
- アイキャッチ画像は設定していないし、画像のない記事もある
- 記事内の１枚目の画像を取得、無ければデフォルトの画像を表示させる
- テンプレートファイルの改造をなるべく簡単に
- PHPとか、サーバとか、参考書やネットの記事を読んでも、完全に理解できていないから危険
最初は、次の記事を参考に始めたのですが、失敗。
functions.php での絶対パス指定が間違っていたのだと思います。
次に参考にしたのは、こちらの記事。
基本のソースは、こちらを参考にさせて頂きました。
しかし、画像が無いページはどうすりゃいいんだ？と。
投稿の最初の画像を取得して、無ければ設定したデフォルト画像を表示させる方法を探しました。
見つけたのが、次の記事。
記事のままでは何故かうまくいかず、「参照元」となっている英文記事を参考にしたら、思い通りになりました。
さらに次の記事を参考に、localeプロパティを追加。
アプリIDを取得しようとしたのに、画面遷移せず、FacebookユーザIDを設定。
と、何度もつまづきながらの作業でした。
最終的なソース例は、こちら。
使っているテーマにもよるとは思いますが、参考になれば。
投稿に画像がなかった場合、投稿以外のページの場合のデフォルト画像を default.jpgとしています。
- function.php に画像URL取得のソースを追加
-
function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = "/ogp_hint.jpg"; } return $first_img; } - html要素にxmlns属性を追加（header.php）
-
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" />
- ヘッダにOGPのタグを追加（header.php）
-
<!-- ↓Facebook OGP --> <?php global $post; // 記事情報を取得 setup_postdata($post); if ( is_single()) { //single.phpのとき ?> <meta property="og:title" content="<?php the_title(); ?>" /> <meta property="og:type" content="article" /> <meta property="og:url" content="<?php the_permalink() ?>" /> <meta property="og:description" content="<?php the_excerpt_rss(); ?>" /> <meta property="og:site_name" content="<?php bloginfo('name'); ?>" /> <meta property="og:image" content="<?php bloginfo('url'); ?><?php echo catch_that_image() ?>" /> <meta property="fb:app_id" content="xxxxxxxxxx" /> <meta property="og:locale" content="ja_JP" /> <?php }else{ //single.php以外 ?> <meta property="og:title" content="<?php bloginfo('name'); ?>" /> <meta property="og:type" content="blog" /> <meta property="og:url" content="<?php bloginfo('url'); ?>/" /> <meta property="og:site_name" content="<?php bloginfo('name'); ?>" /> <meta property="og:description" content="<?php bloginfo('description'); ?>" /> <meta property="og:image" content="<?php bloginfo('url'); ?>/ogp_hint.jpg" /> <meta property="fb:app_id" content="xxxxxxxxxx" /> <meta property="og:locale" content="ja_JP" /> <?php } ?> <!-- ↑Facebook OGP -->
誰も「いいね」してくれなきゃ、意味は無いんですけどね。
アプリID取得画面に移動できたので、上記ソースをアプリID版に変更しました。
また、デバッガーでエラーを見つけたので、下記部分を修正しました。（/を追加）
<meta property="og:url" content="<?php bloginfo('url'); ?>/" />
ドメインのトップページにもOGPを設定しました。
自分で「いいね」してみたし、アプリIDも取得したけれど、Facebookインサイトがゼロのまま。
インサイトのページにも、何も表示されません。
そういえば、アラートメッセージが出てました。
でも、英語でよー分からん。
ドメイン単位っぽいので、対象ドメインのトップページにもOGPを設定してみました。
すると、インサイトにも表示されました。
ソースを見なおしてみると、html要素にxmlns属性を追加はしてません。
og:typeは、website にしました。
<meta property=”fb:app_id” content=”xxxxxxxxxx”> 追加だけでも良かったのかも。
これでなんとか、ちゃんと出来たかも。
自分的リンクまとめ
ありがとうございます。できました！(〃∇〃)
ARAIさん、
コメント有り難うございます。
参考になったのなら、嬉しいです。