Facebook Pageでオリジナルコンテンツを作る

  • 投稿者:
  • カテゴリ:
このエントリーをはてなブックマークに追加

Facebookにログインしてhttp://apps.facebook.com/statichtml/にアクセスします。

「アプリに移動」をクリックします。

110730_facebookpage01.jpg

「アプリの許可」というページに移動したら右下の許可する」をクリックします。

110730_facebookpage02.jpg

httpsで利用している場合、「セキュアな接続を解除しますか?」と表示されるので「続行」をクリックします。

110730_facebookpage03.jpg

左のサイドバーから「Static HTML」を選び、表示されたページで「Static HTML 管理画面へ」をクリックします。

110730_facebookpage32.jpg

110730_facebookpage04.jpg

Static HTMLのページに移動したら「Facebookでログイン」をクリックして、「アプリの許可」というウィンドウの「許可する」をクリックします。

110730_facebookpage05.jpg

110730_facebookpage06.jpg

移動したページでプルダウンからStatic HTMLを設置するFacebookページを選択してそのFacebookページを登録します。

110730_facebookpage07.jpg

「戻る」をクリックすると、登録したページの一覧が表示され、リストの右側に「編集する」というボタンが表示されます。

110730_facebookpage08.jpg

110730_facebookpage09.jpg

「編集する」をクリックすると、編集ページに移動します。

110730_facebookpage10.jpg

編集ページは「WYSIWYG」モードと「HTML」モードがあります。ページを表示させた時は「HTML」モードになっているので、「WYSIWYG」モードで使う場合は、ボタンをクリックして切り替えてください。

110730_facebookpage11.jpg

「画像のアップロード」というタブをクリックすると、使用する画像をアップロードするページが開きます。

110730_facebookpage12.jpg

アップロードする画像を選び「アップロード」をクリックします。

110730_facebookpage13.jpg

画像がアップロードされると「登録されている画像の一覧」にアップロードした画像が追加されます。アップロードした画像を削除したい場合は、削除したい画像のサムネイルの下にあるチェックボックスをチェックして「削除」をクリックします。

110730_facebookpage14.jpg

サムネール画像の右側に表示されたHTMLソースをすべて選択してコピーします。

110730_facebookpage15.jpg

編集ページの入力範囲にコピーしたものを貼付けます。このとき、ソースを貼付けるので「HTML」モードにしておいてください。

110730_facebookpage16.jpg

貼付けたら「HTML」モードから「WYSIWYG」モードに切り替えます。そうすると、画像が枠の中の左側に表示されます。

画像を真ん中に表示させるには、「WYSIWYG」モードのまま画像の右側にカーソールを移動させて、上部に表示されているツールの「Center Align」をクリックします。

110730_facebookpage17.jpg

ページ下部に移動して「確認する(プレビュー)」をクリックすると、完成したページのイメージを確認出来ます。OKなら「保存する」をクリックします。編集をやり直す場合は「戻る」をクリックします。

110730_facebookpage18.jpg

110730_facebookpage19.jpg

切り替わったページで「タブを追加(アプリのインストール)」をクリックします。さらに、ページが切り替わり「Static HTML」を追加しますかと聞かれるので「アプリケーションの追加先」を確認して、「Static HTMLを追加する」をクリックします。これでFacebookページに作成したページが追加されます。

110730_facebookpage20.jpg

110730_facebookpage21.jpg

Facebookページを開くと左サイドバーに「Static HTML」という項目が追加されています。これをクリックすると、先ほど作成したページが表示されます。

110730_facebookpage22.jpg

ただし、項目名が「Static HTML」では分かりづらいので、項目名を変更します。facebookページの右上にある「アカウント」から「ページ名でFacebookを使用」をクリックして、facebookページに切り替えます。

110730_facebookpage23.jpg

110730_facebookpage24.jpg

110730_facebookpage25.jpg

右上の「Facebookページを編集」から管理画面に移動して、左サイドバーの「アプリ」を選択します。

110730_facebookpage26.jpg

110730_facebookpage27.jpg

「追加済みアプリケーション」の中から「Static HTML」の「設定を編集」をクリックします。

110730_facebookpage28.jpg

110730_facebookpage29.jpg

「Static HTMLの設定を編集」が表示されたら「カスタムタブ名」にタイトルを入力し「保存」→「OK」と進みます。

110730_facebookpage30.jpg

これで変更は完了しているので、右上の「Facebookページを見る」をクリックして、変更内容を確認します。

左サイドバーの「Static HTML」が「ようこそ!」に変更されています。

110730_facebookpage31.jpg

Facebookページ:HONDA-BEAT.JP(ホンダ ビート)

このエントリーをはてなブックマークに追加