TopWordPress > カスタマイズ > その他 > 2011年5月
2011年5月27日

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

May 27,2011 1:55 AM
Tag:[, , ]
Permalink

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

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

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

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

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

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

ネームサーバ設定画面

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

新しいドメインの追加

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

ドメインの追加

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

ドメイン名を設定

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

内容を確認

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

設定完了

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

詳細設定

2.共有SSLを設定する

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

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

共有SSLの設定

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

ダイアログ

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

設定完了

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

設定エラー

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

httpでアクセス(http://独自ドメイン/)
httpでトップページにアクセス

httpsでアクセス(https://securexxxxx.sakura.ne.jp/独自ドメイン/)
httpsでトップページにアクセス

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

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

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

登録した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)」は、次のようにチェックをしています。

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

4.スタイルを適用できるようにする

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();
}

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

  • httpsでアクセスがあった場合のみ追加コードを起動するように変更(青色部分)
  • 元のコードではスタイルが反映されなかったため、赤色部分(変更前は'/')をセキュアURLに変更

実際の運用では、IFrameタブで利用する特定のページのみ起動するようにした方が良いでしょう。

WordPressでFacebookページのコンテンツを作る方法は、7月刊行予定の「Facebookページプロフェッショナルガイド」に掲載しています(宣伝)。

Facebookページプロフェッショナルガイド
Facebookページプロフェッショナルガイド
蒲生トシヒロ・他
毎日コミュニケーションズ

5.注意事項

今回の実験結果は他のレンタルサーバでも同様に表示されることを保障するものではありません。予めご了承ください。

6.関連情報

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3