ホームページ作成の小技-BreathTake-

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--------(--) --:-- スポンサー広告 編集 |

FACEBOOK/ファンページへiframeを追加する手順

第二章 ファンページへ「iframe」を追加する手順

【開発者の登録】

Facebookアプリの開発者登録をしていない場合は、開発者登録をします。
(開発者登録をしないとアプリに利用が出来ません)

①まずは、「開発者ページ」にアクセスしてください。
http://www.facebook.com/developers

①以下のような画面が表示されますので、「許可する」をクリックします。
Facebook開発者ページ


②次のような画面になりますので、赤枠の「Create one.」をクリックします。
Facebook開発者ページ


③開発者としての認証を促されますので、携帯電話、もしくはクレジットカードのいずれかで認証してください。
Facebook開発者ページ


(注)クレジットカードの入力は心配だし、携帯メールは「PCメールを受信する」に設定しても届きませんでした。
携帯の電話番号を入力して認証する方式を選択すると、電話番等送信後、フェイスブックさんより電話がかかって来て、四桁の番号を教えてくれます。
それを入力すると「開発者画面」に入れるようになりますが、15分程度時間がかかるようです。


【アプリの登録】

①上記で登録した「開発者ページ」にアクセスします。
http://www.facebook.com/developers

②右上側にある「Set Up New App」をクリックします。
「Set Up New App」画面


③「アプリケーションを作成」画面が出ます。
「アプリケーションを作成」画面

・アプリケーション名を入力します。ここでは「manseki_iflame」と言う名前にしました。
・「規約に同意する」にチェックを入れて、「アプリケーションを作成」ボタンをクリックします。
・セキュリティチェック画面が出るので、書かれている文字を入力して「送信」ボタンをクリックします。
(管理人。入力する単語が良く判断出来ないので、この作業が苦手です…)

④「manseki_iflameを編集」画面が出ます。
「manseki_iflameを編集」画面

・アイコンとロゴを変更出来ますが、そのままにしておいても良いかと思われます。
(最終的にはアイコンがオモテ画面のメニュー項目に表示されます)
・言語は「日本語」を選択します。

⑤左メニューの左側のメニューから「Facebook Integration」に進みます。
Canvas
アプリのfacebook上のホームページのような存在です。
自由な名前をつけられますが、ここでは「manseki_iflame」にしました。
Canvas URL
iframeで呼び出されるページのURLを登録します(自分のサーバにインラインフレームで表示される内容をアップし、そのURLを登録)。
「/」で終わるディレクトリ指定にする必要があるので、index.htmlやindex.phpが必須となります。
Canvas Type
「iFrame」を選択
Discovery
アプリのディレクトリや検索などで他のユーザが見つけられるようにするかどうかという項目です
が、自分のページに追加したいだけなので、無効を選んでおきます。
タブ名
表画面のタブに表示される名前となります。

すべて入力したら「変更を保存」ボタンをクリックします。

⑥マイアプリの一覧ページになります。
「manseki_iflameを編集」画面

・右側中央の「Application Profile Page」をクリックします。
・お馴染のfacebook管理ページが出ます。
・左メニューの下方にある「マイページへ追加」をクリックします。
・自分が管理者になっているアプリやページの一覧がでてくるので、追加したいページに追加を押して終わったら閉じます。


【インラインフレーム用サイトの作成】


■以前、フェイスブックで使用していた「FBML」は、フェイスブック内のサーバーにファイルを作成出来ましたが
、仕様変更してインラインフレームしか使えなくなった現在、フレーム内に表示させるファイルを別の外部サーバーに置かなければなりません。ホームページ作成が出来るサーバーが無い人はそれを手に入れる必要があります。
また、最低限のHTMLの知識が必要となります。
(普通に作成したHPをインラインフレームで表示させているだけですから…)

①スタイルシートは外部に置かず、ヘッダー内に置いたほうが良い見たいです。
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
スタイルシートの内容を記入
-->
</style>

②インラインフレームの縦幅は800px固定、横幅の最大は520pxです。
・iframeでは、縦の長さが指定出来ないので、縦800px以上のホームページを作成するとスクロールバーが出てしまいます。
・その際、幅を520pxにすると、横のスクロールバーも出てしまいますので、横幅は500px以内程度に収めておくのが無難なようです。
(スタイルシートで指定するか、widthを480pxに指定したテーブルを作成して、その中にコンテンツを入れる。)
・もっとすっきりさせる為には、縦800px以内に収めてスクロールバーを出さない工夫が必要となります。

■完成したサイトこれがです。
PHPを使用して乱数を発生させ、リロードする度に写真がランダムに表示されるようにしております。


スポンサーサイト


□  by

>携帯の電話番号を入力して認証する方式を選択
どちらから選択できますか?

開発者の登録ができなくて先に進めません・・・

2011-04-02(Sat) 18:17 | URL | #- [ 編集 ]
□  by 管理人

■携帯番号での認証方法
①fecebookと書かれた青の帯の下の白い部分にカーソルを当てると、ホーム/プロフール/友達を検索/アカウント/フィードバック…と書かれた文字が出る。
②アカウントをクリックしてアカウント設定を出す。
③「マイアカウント」をクリック
④モバイルのタブを選択
…すると携帯番号で認証出来る画面が出たような…

一度認証すると、再度同じ画面は出ないようなので定かではありませんが…
この辺のどこかで「携帯番号で認証」画面がある筈なので捜してください。

2011-04-04(Mon) 09:19 | URL | #lDvg7iwI [ 編集 ]

管理者にだけ表示を許可する
Top
http://akb48boys.blog39.fc2.com/tb.php/11-5930d161
copyright © 2011 BreathTake all rights reserved. / Template By innerlife02
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。