05 10月10月1日よりFacebookページの表示にSSLが必須になった件

2011年10月1日よりFacebookページでiFrameを使用している場合、SSLに対応していないとページが見えなくなるという話題で持ちきりだ。

しかし、実際のところ何がどうなっているのか、今ひとつ理解していないユーザーもおおいので、一度情報を整理してお届けする。

SSL接続とは「Secure Sockets Layer」での通信で、要はサーバーと自分との通信が暗号化され、第三者にデータを盗聴されることを防ぐ技術、クレジットカード番号の入力画面やgmailなどで昔から使われているあれだ、具体的にはURLの http:// が https:// になる。

当然Facebookという様々なサイトのゲートウエイとして使用できるサイトに関して、防犯意識の高いユーザーはSSLでの接続の方が安心感も高まるだろう。

さて、そんなFacebookへのSSL接続だが、10月以降も見えなくなったページなんか無いよ、と言う人がおおい、なぜならばFacebookへのログインはデフォルトではSSL接続はオフになっており、SSLでログインするには「アカウント設定」→「セキュリティー」→「セキュア接続」とすすみ「セキュアな接続(https)を利用する(可能な場合)」にチェックを入れてSSLでのログインを有効にする必要があるからである。

10月1日以前からすでにSSLによる接続は可能で、SSLで接続していたひとがSSL未対応のFacebookページを見ようとした場合、「このページはSSLに対応していません、それでも見ますか?」的な警告が表示されていたため、実質的には10月以前からSSLに対応していないページは実質見られていなかったとは思うが、1日からは完全に見られなくなったようだ。

では、自分のページが現在SSLに対応していない場合はどうすれば良いかというと、「ほっとく」か「対応する」かのいずれかの選択となる。

対応する場合は自らSSLを購入するか、サーバーに元からある共有SSLを使うことになる。
購入する場合は、自分のサーバーがSSLに対応しているかどうかをチェック、共有SSLがある場合は、あまり考えずに共有SSLの自分のページのURLをチェックしてアプリの設定画面でURLを追加するだけで可能となる。

具体的な方法は下記をチェック&チェック!


FacebookページのSSL対応ページをロリポップの共有SSLを使って作る


iFrame版 Facebookページ作成方法(最新版 仕様変更対応)

30 8月iFrame版 Facebookページ作成方法(最新版 仕様変更対応)

iframeアプリを作るためのデベロッパーページの仕様が変更されたようなので、最新版を解説。

Facebookページの作り方。 その3
でも書いたが、Facebookページを簡単に作成する方法として、FacebookアプリのiFrameを利用した方法が一般的である。

この方法を使うには、Facebookとは別にコンテンツを設置するためのサーバーが必要となるが、その分できることの自由度も増す。

以前FacebookiFrameアプリの作り方を紹介したが、いつの間にか仕様が変更されているようなので改めて解説しよう。

手順1.サーバーの準備
Facebookアプリで表示するコンテンツを、自分で用意したサーバー上に用意する。
今回は当ページで配布している「Facebook様wordpressテーマ」を利用したワードプレスをFacebookページ上に表示できるよう設定してゆく。

手順2.Facebookのデベロッパーページにて開発者登録を行う。

【開発者登録ページ】

https://www.facebook.com/developers/

手順3.アプリの登録

上のURLにaccessして開発者ページにログイン後、右上の「create New App」ボタンをクリック。

「NEW APP」のダイアログボックスが表示されるので

App name に任意のアプリの名前
local に「日本語」を選択
利用規約を読んだ上でチェックボックスにチェックを入れて「続行」ボタンをクリック

セキュリティー認証のダイアログボックスが表示されるので、表示されている文字を入力して「送信」ボタンをクリック

上の画面が表示されるのを確認してください。

「Select how your app integrates with Facebook」のなかの

「App on Facebook」と「Page Tab」に必要な項目を入力します
※「Website」「Mobile and Devices」は今回は使いません。
開いてしまった場合は右上の「×」マークで削除してください。

■「App on Facebook」の入力

Canvas URL: には自分のサーバーのWPをインストールしたURLを入力

Secure Canvas URL: SSL対応ページがある場合はSSL対応ページのURLをココに入力

入力例)

Canvas URL: http://ftown.pupu.jp/wp/

Secure Canvas URL: https://pupu-ftown.ssl-lolipop.jp/wp/

今回はロリポップの共有SSLを使ってSSLページを用意しています。SSLページがない場合は空白でOK

■「Page Tab」の入力

Page Tab Name:Facebookページの左メニューに表示されるタブ名を入力(任意の名前

Page Tab URL: タブがクリックされた場合iFrame内に表示されるページのURLを入力

Secure Page Tab URL:タブがクリックされた場合iFrame内に表示されるページのURLを入力(SSLページがある場合のみ)

Page Tab Edit URL:空白

設定例)

Page Tab URL:http://ftown.pupu.jp/wp/index.php

Secure Page Tab URL:https://pupu-ftown.ssl-lolipop.jp/wp/index.php

Page Tab Edit URL:空白

上記を入力後「保存」ボタンをクリックして設定を保存してください。

手順4.設定したアプリをFacebookページに関連つける

1.下記左メニューの「View App Profile Page」をクリックして設定したアプリを表示

2.画像赤枠の「自分のFacebookページのお気に入りに追加」をクリックして自分のFacebookページを表示して追加ボタンをクリック

残りは「Facebookページの作り方。 その3」を参照

これでFacebookページのいっちょあがりです