WordPress+共有SSLでFacebookページにコンテンツを表示する: 小粋空間

Top ＞ Facebook ＞ WordPress+共有SSLでFacebookページにコンテンツを表示する

WordPress+共有SSLでFacebookページにコンテンツを表示する

Posted at May 27,2011 1:55 AM
Tag：[Facebook, SSL, WordPress]

「Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ」でお知らせしたとおり、FacebookのIFrameタブはセキュアな接続のみとなる予定です。IFrameタブのコンテンツを制作する場合、この条件は避けて通れなくなります。

このエントリーではそれにさきがけて、WordPress+共有SSLでFacebookページのIFrameタブにコンテンツを表示する実験を行ってみました。WordPressで通常のサイト（http）を運営しつつ、同時にFacebookページをWordPressを使って管理するケースを想定しています。

実験環境は次のとおりです。

独自ドメイン（Value Domain取得）
さくらインターネット・マネージドサーバ＋共有SSL ※スタンダードプラン以上であれば共有SSL利用可能
WordPress 3.1

１．さくらインターネットに独自ドメインを設定する

Value Domainの管理画面で、取得したドメインのネームサーバ設定画面で、「他社提供/自前ネームサーバー」を選択してから「ns2.dns.ne.jp」「ns1.dns.ne.jp」を設定します。他に設定する項目はありません。

ネームサーバ設定画面

さくらインターネットのコントロールパネルの「ドメイン設定」→「新しいドメインの追加」をクリック。

新しいドメインの追加

「他社で取得したドメインを移管せずに使う～」の「ドメインの追加へ進む」をクリック。

ドメインの追加

ドメイン名を設定して「送信する」をクリック。

ドメイン名を設定

内容を確認して「送信する」をクリック。

内容を確認

追加されました。続いて「詳細設定にすすむ」をクリック。

設定完了

「マルチドメインの対象のフォルダをご指定ください」の項目で、ドメインに対応するパスを設定します。ここではWordPressのインストールディレクトリのひとつ上位の階層を設定します。

詳細設定

２．共有SSLを設定する

注：この作業は、１項の作業を終えて30分ほど待ってから行ってください。

共有SSLを設定するには、１項の設定画面にある「共有SSLの利用をお選びください」から「共有SSLを利用する」を選択。

共有SSLの設定

非推奨の旨のダイアログが表示されるので「OK」をクリック。

ダイアログ

正常に反映されると、ドメイン一覧の「共有SSL」欄に「表示」のリンクが表示されます。クリックすれば、SSLでアクセスします。さくらで共有SSLを利用する場合のURLは「https://securexxxxx.sakura.ne.jp/独自ドメイン/」となります。

設定完了

１項の作業直後に共有SSLを設定しても「このドメインでは利用できません」というエラーではじかれるので、焦らず、時間を空けて再度実行してください。

設定エラー

共有SSLを設定した状態での、httpとhttps（SSL）でWordPressのトップページにアクセスした画面を比べておきます。

httpでアクセス（http://独自ドメイン/）

httpsでアクセス（https://securexxxxx.sakura.ne.jp/独自ドメイン/）

httpsでアクセスしたときにスタイルが反映されないのは、link要素のhref属性がhttpsになっていないためです（この対処は後で実施します）。

３．WordPressの画面をFacebookアプリのIFrameタブとして設定する

注：Facebookアプリの作成方法は割愛しますので、「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の２項を参照してください。

登録したFacebookアプリの「Facebook Integration」→「Secure Tab URL」に任意の記事ページのセキュアURLを設定します。この後Facebookページにアプリを追加するのですが、現状は「タブのURL」にも通常のURLを設定しておかないと、IFrameタブをFacebookページに表示する設定が行えないようです。

セキュアURLを設定

これでFacebookアプリを追加したFacebookページのIframeタブからアクセスすると、次のように表示されます（実験ですのでレイアウトは無視してください）。これはFirefox 3.6/4での表示です。

Facebookページ（Firefox）

ただし、IE9では次のようにスタイルが適用されません。

Facebookページ（IE9）

ちなみに、IFrameタブにアクセスするときのFcebookアカウント設定の「アカウントのセキュリティ」→「セキュアな接続(https)」は、次のようにチェックをしています。

アカウントのセキュリティ

４．スタイルを適用できるようにする

2011.06.01 プラグイン作りました。プラグインを利用すれば本項の設定は不要です。

WordPressのURLをSSLや相対URLに変更する「wp_replace_domain」プラグイン

ということで、IEでもスタイルを適用できるようにする方法を紹介します。これはWebデザイナーの口田さんから教えて頂いたサイト情報「WordPress で URL をすべて相対 URL にする方法」のコードを元にしています。

対処方法は、利用しているテーマのfunctions.phpの最後に、以下のコードを設定します。

class relative_URI {
    function relative_URI() {
        add_action('get_header', array(&$this, 'get_header'), 1);
        add_action('wp_footer', array(&$this, 'wp_footer'), 99999);
    }
    function replace_relative_URI($content) {
        $home_url = trailingslashit(get_home_url('/'));
        return str_replace($home_url, 'https://securexxxxx.sakura.ne.jp/独自ドメイン/', $content);
    }
    function get_header(){
        ob_start(array(&$this, 'replace_relative_URI'));
    }
    function wp_footer(){
        ob_end_flush();
    }
}
if ($_SERVER['HTTPS']) {
    new relative_URI();
}

元情報のコードと異なる部分は以下です。