ホームページ作成の小技-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を使用して乱数を発生させ、リロードする度に写真がランダムに表示されるようにしております。


スポンサーサイト

FACEBOOK/ファンページの作成手順

第一章 ファンページを作成して「iframe」を追加するまでの手順…忘れそうなので、「満席ドットコム」というファンページを作成しながら、その作成手順を記載して行こうと思います。

【ファンページの作成】

①フェイスブックへログインした状態で、「Facebookページを作成」ページへ移行
http://www.facebook.com/pages/create.php

Facebookページを作成画面

②この場合、「会社または団体名」を選択
カテゴリと会社名を記入して「利用開始」ボタンを押す

fb02.jpg

③下記のようなファンページが作成されます。

fb03.jpg



【ファンページの設定】「ようこそ」画面での設定

■画像を追加
①ファンページの左上に表示されるタイトル画像が表示されます。
②個人のページと違い縦540px×横180pxまでの画像が使えるのでそれを最大限に活用しましょう。
③「編集」画面の「プロフィール写真」と同じ画面です。


【ファンページの設定】「編集」画面での設定

■権限の管理
①「デフォルトで表示するタブ」を変更すると、訪問した時に最初に表示されるページが変更出来ます。
■基本データ
①おもて画面で表示される「基本データ」項目を変更します。
■プロフィール写真
①サムネイルを編集ボタンを押すと、サムネイル画面に表示する写真の位置を設定します。
②保存ボタンを押して「セキュリティ警告」ボタンが出た場合、「いいえ」を押します。
(「はい」を押すと設定が反映されません。)
■マーケテイング ウェブサイトに「いいね!」ボックスを追加
①他で作成したブログなどにファンページをリンクさせます。
②ファンページの「ウォール書き込み」を更新するとその内容が反映されます。
③使い方
「いいね!ボックスを追加」ボタンを押すと「Like Box」と言う英語の画面が出ます。
・Facebook Page URL
ファンページを表示させて、そのURLをコピーして貼り付けます。
・Width
表示される「いいね!ボックス」の幅を設定します。
・Color
表示される「いいね!ボックス」の背景色を設定します。
・Show Faces Stream Header
チェックを外した状態でボックスの外をクリックすると結果が表示されるので、お好みの設定にしてください。
こんな感じになります。

■管理者の管理
①サイトに書き込みが出来る管理者を追加します。
②「追加したい人の名前」を入力して「変更を保存」ボタンを押します。
③追加したい人の「パスワード」を入力する画面が出ますが、「パスワード」では無く、「メールアドレス」を記入します。



フェイスブックにファンページ作成

■2011年03月29日(火)午前

FaceBookで「FBML(FacebookMarkupLangage)」と言うアプリを使って「ファンページ」を作成し、それをアレンジすると「企業のホームページ」が作成出来る。
というので挑戦して見ました。

FBMLはFaceBookが作成した独自の言語で、その文法に従って書いていけばオリジナルのHPが完成します。
HTMLの知識がある人は、それでホームページを作成して、FBMLのコンテンツ部分にコピペすれば、それでも完成します。

それで、ネットを捜しまわって、FBMLの設置法の情報を収集しました。
①FBMLの設定方法
http://www.skuare.net/2010/11/facebook.html
http://www.koikikukan.com/archives/2011/01/31-005555.php
http://www.facebook.com/fbmlpage
http://www.atmarkit.co.jp/fsmart/articles/fbfanpage/01.html
②FacebookファンページのFBMLで使えるタグ11選
http://www.skuare.net/2011/01/facebookfbml11.html
③作成見本
http://www.atmarkit.co.jp/fsmart/articles/fbfanpage/01.html
…などがあります。
とりあえず、午前中の作業として、作成したこのブログにフェイスブックへのリンクフィールドを作成。
フェイスブック内で新規に書き込みをするとブログに反映されるようになります。

■2011年03月29日(火)午後

だいたい設置法が判って来たので、実際に作成しようと思い、FaceBookにアクセス。
そうしたら、午前中は表示されていたアプリ「FBML」がありません。
設置法が書かれたサイトに、
「3月11日でFBMLの機能を廃止する」
と書かれてはいたけれど、まだ機能していたので、まだ大丈夫らしいと思っていたのですが…。
新しいファンページを作成して試したりしたけれどやはり駄目でした。

■2011年03月30日(水)

仕方が無いので、インラインフレームで作ることにして、再度、iframeでの作成法を収集。
http://creazy.net/2011/02/facebook_static_iframe.html
http://socialmediaexperience.jp/2889
などを参照にして、ようやく完成させました。

完成したファンページがこれです。
http://www.facebook.com/pages/%E6%9C%89%E9%99%90%E4%BC%9A%E7%A4%BE%E3%82%A8%E3%83%A0%E3%82%B7%E3%83%BC%E3%83%90%E3%82%BA/192079717494297

■フェススブック。映画になったりして、凄い物に見えるけど、開発者は、ほとんど「ユーザー・インターフェイス」を考えておりません。
Windows3.1時代のマイクロソフト製品を思い出しました。
これじゃ今の所、Googleの脅威にはならないわ。

copyright © 2011 BreathTake all rights reserved. / Template By innerlife02
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。