ホームページ作成/Facebookページの作り方

自由にHTMLを書くFacebookページの作り方

「Facebookページ」の中に、「1からHTMLソースを記述して自由にデザインしたページ」を追加する方法をご紹介。必要なだけページを加えて、Facebookページの内容をもっと拡充させてみましょう。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

Facebookページを拡充する

公開しているサンプルFacebookページ

公開しているサンプルFacebookページ

Facebookページを新規に開設し、各種機能を活用して最低限の環境を整えて情報発信する方法については、前回の記事「Facebookページの作り方(基礎編)」でご紹介致しました。

今回は、そのFacebookページに、「1からHTMLソースを記述して自由にデザインしたページ」を必要なだけ加え、Facebookページの内容をもっと拡充させてみましょう。

本記事では例として、「ホームページ作成TIPS」という名称のFacebookページを作成する過程を使って解説しています。このFacebookページは実際に以下のURLで公開していますので、覗いてみて下さい。
http://www.facebook.com/hp.tips

Facebookページに加えた「独自ページ」群(アプリの形で表示)

Facebookページに加えた「独自ページ」群(アプリの形で表示)

Facebookページに、1からHTMLソースを記述した独自のページ(※以下、「独自ページ」と呼びます)を加えるためには、以下のような手順が必要です。

[1] 外部サイトに、Facebookページとして表示させたいHTMLを用意する。
[2] 開発者機能を使って、「独自ページを表示させる」ためのアプリを登録する。
[3] Facebookページに、([2]で作った)アプリを追加する。

今回は、上記の手順を用いて、独自ページをFacebookページに加える方法をご紹介致します。

独自ページを「Facebookページ」上で表示する仕組み

独自に作成したHTMLを、直接Facebookサイト上にアップロードして表示することはできません。「インラインフレーム」という方法を用いて、任意のサーバ上にアップロードしたHTMLファイルに、Facebookの外枠を加えるような形で表示します。

外部サイトに置いたページを、インラインフレームで合成

外部サイトに置いたページを、インラインフレームで合成


ですから、独自ページをFacebookページに加えるには、どこかにある任意のサーバ上に(独自ページの)HTMLファイルをアップロードしておく必要があります。

例えば、冒頭でご紹介したサンプルFacebookページ内にある「ようこそ!」ページでは、実体のHTMLファイルは以下の場所に置いてあります。facebook.com内にはありません。
http://tomoyo.sakura.ne.jp/sns/facebook/3/

上記のHTMLが、インラインフレームを用いてFacebookページ内に合体されることで、以下のような「ようこそ!」ページができあがります。
http://www.facebook.com/hp.tips/app_469959693019693

SSLを利用できるウェブサーバが必須

また、データを暗号化して送受信する仕組みである「SSL」を使ってアクセス(HTTPではなくHTTPSでアクセス)できる必要があるため、無料のホームページスペースには置けないと考えた方が良いでしょう。アップロード先には、SSLが利用できるサーバを用意して下さい。

先ほどご紹介したサンプルFacebookページの実体は、以下の場所にありますが、
http://tomoyo.sakura.ne.jp/sns/facebook/3/
このページは、以下のようにプロトコルをHTTPSにしてもアクセスできます。
https://tomoyo.sakura.ne.jp/sns/facebook/3/

このように、SSLを使ってアクセスできる必要があります。これは、単純に「http://」を「https://」に書き換えれば良いわけではない点に注意して下さい。サーバ側でSSLが利用可能でなければなりません。

SSLは、レンタルサーバ会社が提供している「共有SSL」サービスを利用する方法で構いません。例えば、「さくらインターネット」や「ロリポップ」などのレンタルサーバでは、安価なコースでも共有SSLが利用可能です。

それでは、Facebookページに独自のページを追加する手順を見ていきましょう
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます