ウェブ、ショウジン

WordPressにソーシャルボタンのためのOGP設定を施す(非プラグイン版)

2011-7-29
Category
Facebook WordPress

簡単にできる OGP を組み込むまでの最短手順を知って、この記事で公開されているWordPress用のライブラリを追加、実装してみました。

前にやったOGP設定はWordPressのプラグイン「WP-OGP」を使ってのものだったけど、今回はプラグインではなく、使用するWordPressテーマのfunctions.phpにそれ用の独自関数を追加する形での実装となります。

htmlのxmlns属性にOGP設定に必要な項目を追加して以下のように。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">

そして、前述の記事で公開されているコードを自分で使っているテーマのfunctions.phpに追加。

2012/05/23追記
fb:page_idは関係ないのか、Debuggerでもエラーになるので、これを「admins」に変更しました。

functions.php

class wp_ogp
{
     public function ogp($array)
     {
          $data = Array();
          $data['fb:admins'] = $array['admins'];
          if (is_home()) :
               $data['og:title'] = get_bloginfo('name');
               $data['og:type'] = 'website';
               $data['og:url'] = get_bloginfo('url');
          elseif (is_single() || is_page()):
               $data['og:title'] = get_the_title();
               $data['og:type'] = 'article';
               $data['og:url'] = get_permalink();
          else:
               $data['og:title'] = get_bloginfo('name');
               $data['og:type'] = 'article';
               $data['og:url'] = get_bloginfo('url');
          endif;
          $data['og:image'] = get_bloginfo('template_directory') . '/img/ogp.jpg'; // ogp用画像のパスを指定
          $data['og:site_name'] = get_bloginfo('name');
          $data['og:description'] =wp_ogp::ogp_description();
          $data['fb:app_id'] = $array['app_id'];

          $html = '';
          foreach($data as $property => $content) {
               $html .= sprintf("\t" . '<meta property="%s" content="%s" />' . "\n", $property, htmlentities($content, ENT_NOQUOTES, 'UTF-8'));
          }
          echo $html;
     }

     public function ogp_description()
     {
          $default_blog_desc = ''; // default description (setting overrides blog tagline)
          $post_desc_length  = 75; // description length in # words for post/Page
          $post_use_excerpt  = 1; // 0 (zero) to force content as description for post/Page
          $custom_desc_key   = 'description'; // custom field key; if used, overrides excerpt/content

          global $cat, $cache_categories, $wp_query, $wp_version;
          if(is_single() || is_page()) {
               $post = $wp_query->post;
               $post_custom = get_post_custom($post->ID);
               $custom_desc_value = $post_custom["$custom_desc_key"][0];

               if($custom_desc_value) {
                    $text = $custom_desc_value;
               } elseif($post_use_excerpt && !empty($post->post_excerpt)) {
                    $text = $post->post_excerpt;
               } else {
                    $text = $post->post_content;
               }
               $text = str_replace(array("\r\n", "\r", "\n", "  "), " ", $text);
               $text = str_replace(array("\""), "", $text);
               $text = trim(strip_tags($text));
               $text = explode(' ', $text);
               if(count($text) > $post_desc_length) {
                    $l = $post_desc_length;
                    $ellipsis = '...';
               } else {
                    $l = count($text);
                    $ellipsis = '';
               }
               $description = '';
               for ($i=0; $i<$l; $i++)
                    $description .= $text[$i] . ' ';

               $description .= $ellipsis;
          } elseif(is_category()) {
               $category = $wp_query->get_queried_object();
               $description = trim(strip_tags($category->category_description));
          } else {
               $description = (empty($default_blog_desc)) ? trim(strip_tags(get_bloginfo('description'))) : $default_blog_desc;
          }
          if($description) {
               return $description;
          } else {
               return false;
          }
     }
}

この関数を呼び出すのに、header.phpのhead内に以下の記述を追加。

header.php

<?php wp_ogp::ogp(Array('admins' => 'Admin Users(s)のID', 'app_id' => 'アプリケーションID')); ?>

adminsの値(Admin User(s)のID部分)はfacebookのgraph.facebook.com/の末尾に自分のfacebookユーザアカウントを追加したURLでブラウザアクセスすると確認できます。

例えば自分だと

http://graph.facebook.com/showjin

です。

表示されるもののうち「id」の数字部分がそれにあたります。

アプリケーションIDについては、そもそもサイト内のページをOGP対応させる(認識させる)ためにFacebookに「サイト自体」をアプリで登録しておく必要があるので、そのアプリケーションIDです。

これで完了。

記事ではこの公開しているコードについては未検証とありましたが、自分がやってみて、URL Linterでテスト、自分でLikeボタンをクリックした結果を見たり(これだけだと検証にならないけど)、このライブラリをつけてから各記事のソースを見る限り、なんか大丈夫そうです。

簡単にできる OGP を組み込むまでの最短手順

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

2012/05/23追記
WordPressプラグインの「Open Graph Pro」に変更しかけましたが(このプラグインを使うと固定画像の表示じゃなくなるのとかが良かったので)ogp:descriptionを出力してくれたり、してくれなかったりしてDebuggerで「修正すべき警告」と指摘されたりするので、結局このやり方に戻しました。All in One SEO Packのdescriptionの内容を流用する記述で回避しようとしましたが、これだとogp:descriptionが重複して出力される場合もあり、これまたエラーになるので断念。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿