オリジナルFacebookページ作成マニュアル [2015/4/24改訂版]

Publish2011/08/31(水)

Update2017/04/18(火)

オリジナルFacebookページ作成マニュアル [2015/4/24改訂版]

Facebookページを作成して運用するというのは昨今ではもうしていないところはないというくらい定着した感がありますが、作成したFacebookページにオリジナルのページを追加する手順を紹介します。
以前作成した記事の情報が古かったので、今回は内容を全面的に見直して[2015/4/24改訂版]という事で2015年4月24日現在の状態での作成手順になります。
なお、この情報はあくまでページを作成してFacebookページ内に埋め込むまでの手順になるので、ページ自体の作り込みは各自で行っていただくという前提です。
また、画面キャプチャは2015年4月24日現在での最新版になりますが、時の経過とともに変更されると思いますので、その際はご指摘ください。
可能な限り差分は追っていけたらと思っています。

オリジナルFacebookページの概念的な説明

実際の手順を説明する前に、まずは概念的な部分から説明します。
というのも、Facebookがどんどん仕様変更するので、これから紹介する画面等がすぐに古くなってしまう可能性が非常に高いです。
実際記事公開時点の2011年8月31日と、今回変更した2015年4月24日ではかなり画面が違ってました。
ですが、概念的な部分がイメージできていたら画面が変わっても何とかなる場合が多いです。
実際に今回も画面の遷移等がかなり異なりましたが、押さえておくポイントはほぼ同じでした。

オリジナルのFacebookページ作成の流れ

オリジナルFacebookページの作成の流れとしては

  1. Facebbokページを用意する(場所を確保する)
  2. オリジナルのFacebookページに埋込むページを用意する
  3. Facebookページ用にアプリの登録をする(Facebookページにページを埋め込むためにはアプリの登録が必要)
  4. 作成したアプリをFacebookページとひも付ける(連携させる事でFacebookページ上で表示できるようになる)

の4つの工程が必要です。特につまづきやすいのは3と4なので注意しましょう。
では具体的にどうしていくのかを説明します。

Facebbokページを用意する

まずはFacebookページ自体がないと話にならないので、場所を確保しましょう。
作成はhttp://www.facebook.com/pages/create.phpで行えます。
アクセスすると以下のようなページに移動しますので、作成するページの種類に応じてカテゴリを選び、情報を入力してページを作成しましょう。
ここは表示された手順通りにすれば問題なくページができるので、詳しくは省略します。

Facebookページを作成する

作成後は固有のURLを設定する

作成後はページのURLを固有のものに設定しましょう。
設定する事で覚えやすくなるので、プロモーションをする際に便利です。
以前は25名いいねを押してもらうと固有名のページが作れるという仕様でしたが、今の時点ではその制限はありません。
ただし、変更後に再度固有のURLを設定する事はできませんので、注意しましょう。

オリジナルのFacebookページに埋込むページを用意する

次にするのがFacebookページで使用するデザインを反映した埋め込み用ファイルの作成です。
画面幅は横幅760pxでぴったり収まりますが、モバイルでの閲覧も考えると横幅固定ではなく画面幅に合わせたレスポンシブで作っておくのがいいかと思います。
ファイル作成後は、作成したファイルを自身のサーバー上にアップロードするのですがここで注意点が2つあります。
1つはアクセスするURLはSSLに対応したURLである必要がありますので、サーバーでSSLが使えない場合はできないと考えましょう。
SSLは共用SSLでも大丈夫なので、共用SSLを提供しているレンタルサーバーへの乗り換えを検討するか、独自ドメインのSSL証明書を適用させるかといった必要があるかもしれません。
もう1つが、アクセスするURLの最後が「/」で終わる必要があるという事です。
例えば「.html」で終わる場合は設定時にエラーがでて設定する事ができません。
htmlで対応する場合は、「/index.html」として設定時に「/」で対応しても大丈夫です。
以前は「index.php」じゃないと駄目とかありましたが、「index.html」でも問題なく動作しました。

Facebookページ用にアプリの登録をする

Facebookページを作って埋め込み用のファイルの作成が終わったら、ファイルをFacebookページに埋め込ませる為にFacebookアプリとして登録します。
埋め込みページをFacebookアプリとして作って、Facebookページにそのアプリを埋め込むというイメージです。
ちょっと分かりづらいですが、作成したページはアプリ内に埋め込まれ、Facebookページからはそのアプリにリンクが貼っているだけなんです。

その為にまずはDeveloper登録を行います。
Developer登録はこちらのURLで行えます。
https://developers.facebook.com/

登録が終わったら、アプリを作成します。
まずはアプリの作成画面に遷移し、「Add a New App」ボタンをクリックします。

Add a New App
Add a New Appをクリックする

すると4つの選択肢が表示されます。
今回は「Facebookキャンバス」で設定を行いますので、「Facebookキャンバス」を選択してください。

「Facebookキャンバス」を選択
「Facebookキャンバス」を選択

すると、画面が切り替わって何やら登録するっぽい画面がでてきます。
ここを華麗にスルーして、画面右上にある「Skip and Create App ID」を選択します。

Skip and Create App ID
「Skip and Create App ID」を選択する。

設定画面に移動したあとは、「Display Name」で表示名を、「Namespace」でアプリのURLを設定します。
is this a … となっているところは「いいえ」のままにして、カテゴリを「ページ用アプリ」を選択し、「Create App ID」で作成しましょう。

App IDを作成する
各種項目を設定する。

設定完了後はセキュリティチェックがあります。
今回はイスが表示されている画像を全部選べという少しどういう意図かわからない内容でしたが、機械による自動登録対策でしょう。
セキュリティチェック
セキュリティチェックを行う

つぎに完成画面から「Getting Started」を選び、アプリの設定を続けます。
FacebookAppが完成
「Getting Started」を選ぶ。

するとまた4つの選択肢がでてきますので、今回も「Facebookキャンバス」を選びます。

Facebookキャンバスを選択
「Facebookキャンバス」を選択する

すると、コードがたくさん表示された画面に移動します。
ここで「Setup the Facebook SDK for JavaScript」の部分のコードを埋め込むファイルに追記します。
また、「Where is your app hosted?」の項目はSSLで表示できる埋め込み用ページのURLを設定します。
Setup the Facebook SDK for JavaScript
コードの埋め込みとURLの設定をする。

次へを選択して次の画面に移動すると「Setup Facebook Login」の項目でまた埋め込みファイルに追記するコードが表示されますので、内容を再度コピペし、サーバーにアップロードします。
Setup Facebook Login
またしてもコードを追記する。

完了したら次へを選択して次の工程に移ります。
これらの設定に問題がなければこの時点で埋め込みが行われたアプリが完成しています。
「Open Your App」を選択して表示を確認しましょう。

Open Your App
「Open Your App」で確認する

今回作ったテスト用の場合は、以下のような形になりました。
確認する
確認。

これでアプリ自体の設定はできたのですが、上の方のバーが「Finished」になっていないので気持ち悪いです。
「Finished」にするには、ページをスクロールして画面を動かすか、「Finished」の部分を選択して移動させるかすると「Finished」が表示されます。
表示されますが何かおかしいですよね。。。

Finished
「Finished」の動作がおかしい

作成したアプリをFacebookページとひも付ける

アプリを作成したあとは、このアプリをFacebookページからリンクさせる必要がああります。
まずはアプリの管理画面から「Add Platform」で要素を追加します。

Add Platformで追加
「Add Platform」で要素を追加

すると色々とでてきますが、今回は「PageTab」を追加します。

PageTabを追加
「PageTab」を追加

すると管理画面に追加する設定項目(PageTabの追加設定)が表示されるので、「Secure Page Tab URL」にSSLのURLを入力して保存しましょう。

Secure Page Tab URLにSSLのURLを入力する
「Secure Page Tab URL」にSSLのURLを入力

次に設定したPageTabの情報をFacebookページに連携させるのですが、ここでの設定が何と手動です。

https://www.facebook.com/dialog/pagetab?app_id=[appid]&next=https://www.facebook.com

の「[appid]」の部分に管理画面で表示されている「App ID」の数値を入れ、ブラウザでアクセスします。
すると、管理権限を持つFacebookページを選択できる画面になるので、連携先のFacebookページを設定して保存します。

Facebookページに追加する
Facebookページに追加する

以上で設定は完了です。
一応できているかどうかを確認しましょう。
連携させたFacebookページに移動し、「もっと見る」を見ると先ほど追加したアプリの名前が表示されています。

追加されてる
追加されてる

あとは確認するだけです。
作成した内容がアプリに表示され、Facebookページからリンクが貼られています。

完成
これで完成を確認完了です。お疲れさまでした。

まとめ

設定自体はシンプルですが、設定する場所などがけっこうややこしいので最初にやると少し分かりづらいですね。
でも、概念的な部分が分かれば比較的簡単にFacebookページを制作する事が出来ます。
内容を読んでいただければ分かるように、ページ自体の作成は比較的簡単です。
ですが、問題はやはり埋め込むページの内容だと思います。
この部分のクオリティや戦略によって、Facebookページが活用されるか否か分かれると思うのでしっかり考えて作った方がいいのではないかと思います。
しっかり内容を考えて作成するかどうかを検討ください。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、Web運用サポート、Webサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期更新中です。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
サイトの運用や活用にお困りの方、Web運用やブログ更新などの講演のご依頼など、お気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

関連記事

  • Googleフォームをサイトに埋め込む場合の手順Googleフォームをサイトに埋め込む場合の手順 昨日のGoogleカレンダーに引き続き、これまたよくある「Googleフォームをサイトに埋め込む手順」を説明します。 まず、Googleフォームを利用するメリットですが、大きく分けると以下の3つが考えられます。 Googleフォームをサイトに埋め込むメリット プログラムが動かないサーバーでも設置できる プログラムの知識がなくてもサイトにフォームを設置できる […]
  • Googleカレンダーをサイトに埋め込む場合の手順Googleカレンダーをサイトに埋め込む場合の手順 今日はたまに聞かれる事がある「Googleカレンダーをサイトに埋め込む場合の手順」を説明します。 サイトに埋め込む場合のメリットとしては、以下の2つがあげられます。 作業の手間を減らす(個別の設定やHTMLでの記述等の実質の作業時間) 管理を簡易にする(変更はGoogleカレンダーで行うだけ) 普段Googleカレンダーを使用している人は個人的なスケジ […]
  • Facebookページとスポットを統合する方法Facebookページとスポットを統合する方法 今日はFacebookページを運用していて、かつ実際の店舗等がある場合に役立つ情報を紹介します。 例えばこんな事はないですか? ・Facebookで誰かが勝手に自分の店舗のスポットを作ってチェックインしてる ・似たようなページがスポットが複数あって分かりにくいのでひとつにしたい 実際の店舗をされている方であれば気になるところだと思います。 例えばこんな感じ […]
  • WordPress利用マニュアル -総合版-WordPress利用マニュアル -総合版- これまで、WordPressを使っているお客さんには個別にマニュアルを作ってお渡ししていましたが、共通の作業になる部分の投稿の仕方とか固定ページの作成や編集方法なんかはサイトで公開した方がいいんじゃないかという事を思ったので、「これから初めてWordPressを使う」人向けの基礎的な部分の紹介をしていこうと思います。 もうそんな事は知っているよという人向きではありませんので […]
  • サイト運用の現在と未来を考えるサイト運用の現在と未来を考える 今日は違う事を書こうと考えていたのですが、僕がいつも参考にしている長谷川恭久さんの記事でとても考える事があったのでそれについて書こうと思います。 書こうと思ったきっかけになった記事はこちら。 なぜ緊急時になるとデザインが崩れるのか 緊急告知の時に、ある程度運用がしっかりしているはずの大手ですらデザイン度外視になる件について書いてあったのですが、僕はその部分ではな […]
  • HTML/CSSの基礎を学習する時にドットインストールを使ってみてはどうかHTML/CSSの基礎を学習する時にドットインストールを使ってみてはどうか GW中に色々考えていたんですが、これからサイトを運用していこうとか、サイトを活用して何かをしたいという人は、まず「HTML」と「CSS」の基礎的な知識を学習した方がいいと、しておかないと色々と厳しいと思っています。 HTMLとCSSを知らなくても、ブログを書いたり、更新したりもある程度は何とかできます。 ただし、知っていないとできない事が多いという事を考えると必須の知識だ […]

よく見られている記事

ふにろぐナビ

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ソーシャルとか。

NewEntry

はてブで人気の記事

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month