Cat Speak

札幌在住のWebデザイナー・コモモのブログ

ホーム > ウェブ制作Tips > Facebook > Facebookページ作成時に気をつけたいこと

Facebookページ作成時に気をつけたいこと

先日、お仕事で初めてFacebookページを作成しました。
作ってみた感想としては、意外と簡単だけど、自分のFacebookページの制作ではなく、クライアントさんが管理するページなこともあり、手順を把握するのがけっこう面倒くさいなぁと感じました。
また、私はFacebookをあまり有効活用していなかったため、Facebookページ=welcomeページと勘違いしていたところがあったなぁと思います。
正直、まだ少し迷っている部分もあるのですが、今後も制作することがあると思うし、全体的な流れとクライアントさんとのやり取りで必要だったことや手順をメモしておきます。


今回私が制作したのは、以下の2つのことができるという、Facebookページとしては最低限の仕様だったと思います。

  • ウォールと外部ブログを同期させる
  • welcomeページがある

web上の情報は、記事ごとに細切れになっているので、全体の流れが把握しにくかったので、制作に必要な流れをフローチャートで表してみました。


それぞれの手順を順を追って解説していきます。

1.Facebookページをつくる

下記URLにアクセスします。
http://www.facebook.com/pages/create.php
※Facebook上では、フッタにある「focebookページを作成」をクリックします。

あとは、サイトの指示にしたがうだけで、Facebookページはすぐにできちゃいました。
nanapiで作成手順がまとめられていたので参考にしました。

nanapi – Facebook ページ(旧ファンページ)の作り方

なお、当たり前なんですが、この2点は事前にクライアントに確認しておく必要があります。

  • 登録するカテゴリ
  • Facebookページの名前

welcomeページとか他のことに気を取られて忘れてしまっていたりしたので、個人的にメモです。

ページを作成したら、公開するまでは、編集画面の「権限の管理」で「公開範囲」を「管理人のみ」にしておきます。


2.ページに必要なアプリを追加する

Facebookページでは、左のナビ部分のことを「タブ」と呼んでいます。

「ウォール」「基本設定」は必須のタブですが、あとは好きなタブを追加・削除することができます。
この「タブ」には、編集画面でアプリを割り当てる必要があり、デフォルトアプリとして、「写真」「ノート」「リンク」「イベント」「動画」が用意されています。さらに、サードパーティーアプリや自分で作成したアプリを追加することも可能です。

つまり、今回の仕様では、

  • ウォールと外部ブログを同期させるために、RSS Grafittiというサードパーティーアプリを導入し、
  • welcomeページ用のアプリを自分で作成することになります。

サードパーティーアプリを追加するには、アプリの情報ページで「マイページへ追加」をクリックして作成したFacebookページを選択します。
(RSS Grafittiの使い方については、他のブログ等でよく紹介されているし、アプリによって使い方が違うので特に説明しません。)

その他にも、サードパーティーアプリは色々あると思うのですが、まだ使ってみたことがないのでよくわかっていません。
普通は、RSS Grafittiとコンタクトフォーム系のものを入れるようですね。


3.welcomeページの作成

先ほども触れましたが、welcomeページは自分でアプリとして制作しなければなりません。

アプリを制作するには、自分が「開発者登録」を行う必要がありますが、そのために「Developers」というアプリに登録します。

なお、「Developers」で、アプリを作るには「携帯メールアドレス」か「クレジットカード登録」のどちらかを自分のアカウントに登録しておく必要があります。

【参考】

※上記のサイトを参考に作成しましたが、少し仕様が変わってしまっているようです。

なお、welcomeページは、自分で用意したサーバにHTMLを用意しておき、Facebookでiframeを表示する仕様になっています。
したがってクライアントに、サーバをどうするか確認しておく必要があります。

また、個人のアカウントのセキュリティ設定で、セキュア接続をオンにしている場合があり、サーバもSSLでないといったんセキュア接続を解除するようにメッセージが表示されてしまうので、SSLに対応するかどうかの確認も必要です。サーバにiframe用のHTMLを用意したら、welcomeページ用のアプリを作成します。

1.下記アドレスにアクセスし、右上の「Create New App」をクリックします。

https://developers.facebook.com/apps

2.ダイアログで、アプリ名の記入、言語選択をして、新規アプリを作ります。
※ここでセキュリティーチェックがあります。

3.アプリの設定が色々ありますが、必要なのは下記の項目だけです。
メニューから、On Facebook>Canvas Settingを選択します。

  • Canvas Page
    アプリのURL http://apps.facebook.com/入力した名前/
    ※既にある名前は入力できません。
    Facebookページには表示されないURLなので、そこまでこだわらなくてもよいかもしれません。
  • Canvas URL(Secure Canvas URL)
    iframeに表示させる外部サーバのディレクトリ名を入力します。
    ※必ず「/」で終る。
  • IFrame Size
    iframeはデフォルトで520×800pxになっています。横幅520pxを変更することはできませんが、高さ800pxは変更が可能です。変更する場合は「Auto-resize」をチェックしますが、HTML側にもJavaScriptが必要です。
  • Tab Name
    Facebookページ上に表示されるタブ名です。表示させたい名前を付けてください。
  • Tab URL(Secure Tab URL)
    Canvas URLはディレクトリですが、Tab URLは表示させるHTMLファイル名を指定します。

Canvas Pageを入力すると
http://apps.facebook.com/入力した名前/
にアクセスすると作成したページを誰でも見ることができるようになってしまうので、About>Advancedから、公開するまではサンドボックスモードにしておきます。

About>Basic Infoで、アイコンの設定をしておきます。(Facebookページのタブのアイコンとして表示されます)

上記の全ての設定が終ったら、ナビゲーションの下方にある「View App Profile Page」をクリックします。

アプリの情報ページが表示されるので、「マイページに追加」をクリックすると、ダイアログがあらわれるので、Facebookページを選択します。これで、welcomeページがタブに追加されました。

4.タブの順番入れ替え、不要なタブの削除等を行う

最後に、タブの下にある「編集」ボタンを押すと、順番の入れ替えや削除が可能なので、手直しします。


ここまでの手順でFacebookページはほぼ完成ですが、製作中はページは非公開です。
なので、クライアントがいる場合、確認してもらえるように、クライアントにも管理者登録してもらわなければなりません。

少し面倒ですが、welcomeページをサンドボックスモードにしている場合、クライアントにも開発者登録をしてもらい、アプリの管理者になってもらわないと、ページを見てもらうことができません。

クライアントがOKであれば、ページを公開します。
welcomeページのサンドボックスモードを解除するのも忘れないようにします。

なお、公開後はクライアントに管理をまかせ、自分自身は管理者から抜けることもできるのですが、RSS Grafittiのようなアプリも個人アカウントの管理に置かれるようなので、抜ける場合は設定をクライアントに移しておかなければならないと思います。(アプリにもよると思うのですが、まだよくわかっていません。)

公開後も、クライアントがメンテナンスすることは普通は難しいと思うので、共同管理者のままで居る方が良いとは思うのですが・・
作り方は参考サイトが見つかるのですが、あまりこういうことまでは書かれていないので、他の制作者の方はどうしているんでしょう?

【追記:8月3日】今日はじめて知ったのですが、「ビジネスアカウント」というのが作れるんですね。。これなら、クライアントにもビジネスアカウントでログインしてもらえばいいし、クライアントにも管理者登録してもらってーとか・・面倒なことはなかったですね orz ・・せっかく書いたし、複数管理者にする時には上記の手順は必要なので、残しておこうと思いますが・・そうですよね。ないと困りますよね。。


また、公開後、いいね!が25人以上つくと、

http://www.facebook.com/mypage/

のように、FacebookページのURLにユーザーネームを割り当てることができます。
既にあるユーザネームは利用できないので、事前にURLの候補を決めておく必要があります。


最後に、クライアントと事前に決めておくことをまとめてみます。

  • welcomeページ、プロフィール画像のデザイン
  • Facebookページの名前
  • 登録するカテゴリ
  • 基本情報の項目
  • 導入するアプリの検討
  • welcomeページに利用するサーバ情報(セキュア接続についても検討)
  • 短縮URLに利用するユーザネーム

今回、Facebookページプロフェッショナルガイドを参考に作成しましたが、まだ発売されたばかりの書籍なのに、すでに管理画面や文言等が微妙に違っていて少し戸惑いました。

しょっちゅう仕様が変更になるらしいので、サイトを参考にする場合も、なるべく最新の日付のものを見た方が迷いが少ないかもしれないですね。

コメントを残す

人気の記事