July 10, 2011

FacebookページをiFrameでデザインする方法

Facebookページをデザインすることにこだわって勉強してみました。
休みの日ごとに作業していたので、なかなか難しいこともあって前に進めなかったのですが、やっとこぎつけることができましたので、備忘録としてここに記載することにいたしました。

Facebookは良くできたソーシャルネットワークですが、デザイン設定しているときの設定速度が鈍いところもあり一日たつと設定されているということもあります。(Facebookの方でチェックが入るシステムなのかもしれませんが)
また手順が違っていると設定できないこともあり、始めから手順どおりに行うとちゃんと設定したりしますので、多少扱いにくいところが見受けられます。
でもだから面白いのかもしれません。Macソフトに似たところがあって、なかなか難しいのですが、設定できるとなぜか愛情を感じてしまう面白いソフトです。

私は50歳からWebの勉強したものですから、行き詰って、戻って、再出発して、一段階アップして、そしてその上に入るので、多少時間がかかりますが、同じようにつまづいている方にとっては分かりやすいものが書けるのではないかと思い備忘録を書いています。

① Facebookページ を設定する。
個人のFacebookは行っていたのですが、企業でも使えるFacebookページがリニューアル(今まではファンページ)されたのでチャレンジしてみました。
② Facebookページだけでも作れるのですが、そのあとの設定で色々とデザインする場合、管理人ページとして個人ページが必要になりますので、最初から個人ページと企業ページの2つを同時に作っておくことをお勧めいたします。
③ iFrame ( Inline Frame ) が使えるようになって、デザインもかなり凝ったものができるようになりましたので、iFrameを使ってデザインすることにいたしました。
④ Facebookページから「いいね」を押してファンになるページに入るようにする設定も含めいデザインしてみようと思います。

Facebookページを作成するはこちらから 

開発者登録をする
Facebookアプリの開発者登録をしていない場合は、開発者登録をしましょう。 開発者ページにアクセスしてください。 
以下のような 画面A が表示されますので、「許可する」をクリックします。
以下の 画面B に遷移しますので、赤枠の「Create one.」をクリックします。

画面C 開発者としての認証を促されますので、携帯電話、もしくはクレジットカードのいずれかで認証してください。クレジットカードは怖いので携帯電話になると思いますが、携帯メールのアドレスは間違わずに入力してください。間違えてしまうと、認証番号が届かずに認証できないままになってしまいますので注意をしてください。
携帯電話の場合は携帯アドレスを入れてそのアドレスに認証番号が送られるので、その番号を入れると認証になります。

これで認証ができました。
次にアプリケーションIDを取得します。

Facebook DEVELOPERS から取得できます。 

上にあるメニューの中から「マイアプリ」をクリックしてください。
［+Set Up New App］をクリックして、アプリケーション登録をします。
アプリケーション名を入力して、利用規約に同意して［アプリケーションを作成］をクリック。
セキュリティチェックの画面に遷移するので、入力して送信します。

アプリケーション名として　sekinephoto としています。

同意するにして、アプリケーションの作成を押すと

セキュリティチェックが出ますので、文字を入れて送信を押してください。

下記の画面になったら 左の上の　「Facebookについて」　をクリックしてください。

その中のアイコンを変更を押してアイコンを設定しておいた方がいいと思います。
(16×16pix)

アイコンをアップロードしておいてください。

上記のようなアイコンが設定された形になります。

次に同じ画面の2つ下にある「Facebook Integration」をクリックしてください。

この画面でiFrameを設定していきます。
※もちろん事前にここに入れるサイトは作成しておく必要があります。
横サイズは520pix以下ですが、経験からすると500pix以下で作っておいた方がいいようです。(iFrameに入れるサイトを構築する...今回はBiNDで設定してみましたので実施した時の備忘録を後ほど別ページで説明いたします)

今回、私が設定した内容を記述し注意点も入れておきます。

① キャンバスページ　http://apps.facebook.com/○○○○○○○/
アプリケーションのFacebook上のURLです。
すでにあるURLは取得できません。文字数は７文字以上。
使用可能文字は小文字の英字とアンダーパー「_ 」だけです。
② iFrameを読み込むサーバーのサイトアドレスです。
http://www.○○○○○.○○○/
最後はスラッシュ「/」で終わらせてください。
③「Auto-resize」を選択します。
スクロールバーが出る場合がありますので、出ないようにする方法を後ほど説明いたします。
④ タブ名　追加するページタブの名前を決めて登録します。
Facebookの左サイドのメニューの中で表示される名前です。
今回は「Welcome」としてみました。
⑤ タブのURL　作成したFacebookページが表示された時に、最初に読み込まれるファイル名。私の場合はBiNDサーバー登録していましたのでhttp://sekine.○○.bindsite.jp/index.html と入れてあります。
※注意 : index.html だと認識しない場合もあるそうです。その場合index.htmlのファイルだけindex.phpに変更する方法もあります。
またサーバーによってはPOSTが許可されていないサーバーもありますので、その場合は上の画面の詳細設定の中に「POST for Canvas」の項目がありますので、その項目を「無効」に設定してみてください。
※ディスカバリーの「Social Discoverry」の項目は「無効」にしておきます。自分で使うためだけのものであるので、他のユーザーの検索対象にする必要がないための処置です。

その設定を終えましたら「変更を保存」を押します。

次にFacebookページの中にそのページを設定します。
タブを追加します。
マイアプリの画面が出ていると思いますが、その画面の中で右のところに「Application Profile Page」がありますので、それをクリックします。

次に画面左のマイページに追加をクリックします。
次のような画面が現れます。

その中から設定するFacebook サイト名を選び「Facebookページに追加」を押します。

このようにWelcomeのところを押すと、今設定したiFrameが表示されたページになります。このような形が出来上がりましたら完了です。
後はこのページを最初のページに設定する作業だけになります。

ここまだたどりつくために、 このブログも参考に  させていただきました。

最後にFacebookページに来てくれた方が初めに見るページを設定します。
Facebookページの利用開始ページにある「基本データーを編集」をクリックしてください。

次に下記の画面になりますので

デフォルトで表示するタブを一番初めに見せたいページにしてみます。
今回は「Welcome」というページに設定したいので、「Welcome」を選んで設定しています。
こうすることで、初めて入ってきた方はこの設定のページを見てくれることになります。

※注意としてデザイン設定を行う管理人のページまたはFacebookページからは、Welcomeのページに飛んでいるかどうか見ることができません。誰か(他人)のFacebookで自分のFacebookページを見てもらわないと、設定状態を見ることができないのです。 この状態の判断がFacebookの厄介なところではないでしょうか。このことが分かるまでにかなり悩んでしまいました。

こちらが、私のFacebookページ  です。

※注意 : 重要ですのでお読みください。
この備忘録を書いた後、8月はじめにアプリの追加をしようとしたところ、
Developersの設定の画面が何故か出てこないのです。
何故なのか、悩んで調べてみてもまだインターネットで見つけることも
できませんでしたが、何とかやっているうちに自分流でできました。
その記録として備忘録を8月13日のページに載せましたのでご覧ください。
変更になったページはDevelopersの設定画面が変わってしまった をご覧ください。

※注意 : 更にまたまたDevelopersの画面が変更になってしまいました。
そのページはまたまたDevelopers設定画面変更 をご覧ください。

写真をクリックすると800pixで
「Facebookにiframeを設定する」
を見ることができます
拡大した後写真の右側をクリックすると
次の写真に進みます
また写真の左側をクリックすると
前に戻ることができます

     Home
     Photograph
     Books
     Web
     Life
     Profile
     RSS