Facebookページの仕様変更点まとめ　～2011年10月1日からSSL対応が必須へ ～

FacebookページのSSL対応について

Facebookページの作成方法を当ブログで以前ご紹介しましたが、2011年10月1日から仕様が変更になりSSL対応が必須になりましたので今回は変更点について確認してみたいと思います。

以前まではSSLに対応していないFacebookページに『https』でアクセスした場合、Facebookページの作成 第1回『iframe対応ページ追加』 / Facebook基礎でご紹介したように警告が表示されていました。

警告は表示されますがこのまま『続行』をクリックすればページ表示可能だったのですが、10月1日以降は対応していない場合は表示することができないということになります。

この問題の1番の解決方法はSSLの設定をするということです(当然ですが・・・)。大抵の共有レンタルサーバーには共有SSLが用意されているのでこちらを利用するのが一番簡単ではないかと思います。

Step01

まずは、Facebook開発者のアプリページにいきます。
https://developers.facebook.com/apps/

左側の『Recently Viewed』に各アプリが表示されていると思いますので、変更したいアプリをクリックして選択します。その後右上に『設定を編集』と書かれたリンクがあるのでクリックしてください。

Step02

編集画面の真ん中あたりに『アプリをFacebookに結合する方法を選択してください』の項目があるので、下の画像を参考にSSLのURLを記入して『設定を保存』ボタンをクリックしてください。

以上でSSLへの対応は完了になります。10月からのSSL対応についてご紹介してきましたが、以前から対応していた方には新しいことはまったくなかったですね。逆に、SSLの設定を事情によってできない方は今後困ってしまう状況になりますが、当ブログで紹介しました『Static HTML Iframe Tab』はSSLに対応しているので今後も利用できます。その他にもSSL対応しているアプリがいくつもありますので、使いやすいアプリを選択することで対応していくのが良いと思います。

『Static HTML Iframe Tab』でSSL対応

10月1日からの仕様変更のタイミングで、検証もかねてウェルカムページを変更しましたので、ご紹介したいと思います。尚、詳しい導入方法はFacebookページの作成 第3回『Static HTML Iframe Tabアプリケーションを使ってページ作成』 / Facebook基礎でご確認ください。

今回はウェルカムページを最初に表示するようにして『いいね』をクリックしたユーザーとそうでないユーザーを分岐するようにしました。

Step01

ウェルカムページのページを開き、右上の『settings』をクリックして設定画面に移動します。

Step02

設定画面に移動したら『いいね』をクリックしてくれたユーザーに表示するコンテンツを『Page Source:』で選択します。今回は『URL』からコンテンツページを読込むようにしました。

Step03

次にまだ『いいね』をクリックしていないユーザーに表示するコンテンツを『Non-Fan Page Source: 』で選択します。こちらも『URL』からコンテンツページを読込むようにしました。

これで設定は完了です。最後に『Save Settings』ボタンをクリックしてください。

尚、表示の確認はページ上部に『View as Non-Fan』と書かれたリンクがあるので、クリックすると『いいね』を押していない場合のページが表示されます。またクリック後にリンクのテキストが『View as Fan』と変更されるので、再度クリックすると『いいね』をクリックした状態のページが表示されるようになります。

Step04

『Static HTML Iframe Tab』での設定が完了したので、最初に表示されるページにこのページを指定します。右上の『Facebookページを編集』ボタンをクリックして『Edit Profile』ページにいきます。

『Edit Profile』ページに移動したら、『権限の管理』⇒『デフォルトで表示するタブ』に最初に表示したいページを選択して完了です。

※尚、管理者は上記の設定をしても一番最初にウォールが表示されてしまうようなので注意してください。

関連記事

• Facebookページの作成 第1回『iframe対応ページ追加』 / Facebook基礎
• Facebookページの作成 第2回『Facebookページのスクロールバーを非表示にする方法』 / Facebook基礎
• Facebookページの作成 第3回『Static HTML Iframe Tabアプリケーションを使ってページ作成』 / Facebook基礎