facebookページ構築勉強会

facebookページ構築勉強会
2011年4月5日
高塚

Copyright (C) MindFree Co.Ltd. All Rights Reserved.
1

index

1. 基本的な制作の流れ
2. 提案について
3. facebook ページ開設フロー
5. 予備知識：ビジネスアカウントについて
6. 予備知識：個人アカウント ⇔ facebookページアカウントの切り替え
7. 予備知識：プロフィール画像、タブのサイズについて
8. 開設におけるポイント
9. その他注意点など
10. 管理画面の説明 - 1 ～ 10
11. アプリについて
12. オリジナルページ(iframe)について
13. オリジナルページ(iframe)の追加手順 - 1 ～ 3
14. オリジナルアプリをつくる - 1 ～ 3 (参考： Profile Photo Mosaic)
15. 参考：ウォールでのエンゲージメントを高める方法

2

基本的な制作の流れ
１－１）営業／提案
２）まず、確認すること／ご用意頂くもの
・概要資料の提供３）基本コンテンツの選定
・コンテンツの提案・持っているサイトの情報(URL)
・外部サイトとの連携の提案例：企業サイト、採用サイト、ECサイト、Twitter、リクナビ・ウォール
・管理アカウント用Eメールアドレスの発行・基本データ
・管理人の設定・写真
・サーバーの有無の確認 (サーバーが必要です！) ・ディスカッション
・運用方法(3ヵ月先程度の簡単なスケジュールをご作成頂く) ・リンク
・ファン25名獲得後のURLの決定(username) ・ノート
--------------------------------------- ・動画
１－２）お問い合わせ http://www.facebook.com/xxxxxx ・イベント
※「xxxxxx」の部分が変更可能です。 (・レビュー)
→お客様から訊き出す内容 (英数字(A～Z、0～9)とピリオド(．)のみ使用可能です。
・コーポレート、採用、製品、キャンペーンなど、
何を目的としたページか。変更ページURL
・FBページで望まれている内容(何がゴールか) http://www.facebook.com/username/
・具体的にやりたいコンテンツのイメージは無いか。 ---------------------------------------
これらの情報がないと
全く制作が進められな
いわけではないが、先
４）アプリ／カスタムタブの選定５－１）制作(社内) に訊いておくとスムーズ。

・Welcome ・スケジュール作成
・Twitter ・ディレクション(担当者の決定)
・Flickr
６）ページの公開
・Poll
・RSS ・ファン25名の獲得(社内協力
・Slides ＋呼びかけのアドバイス)
・YouTube …etc ５－２）制作(台湾) ・ファン25名獲得後
「username(URL)」を変更
※Involverなどのフリーアプリの使用・運用アドバイス
・スケジュール作成
※オリジナルのカスタムアプリ・ディレクション(担当者の決定、
(iframe)の開発やりとり・資料の翻訳)

７）サイトの連携、各種ボタンの設置、コンテンツの拡充など
・「いいね！」ボタンの設置(ソーシャルプラグイン)
・コンテンツの追加
・キャンペーンの企画 …etc
・改善案の提供

3

提案について

● facebookページ提案書作成のポイント
・ facebookに関する認知があまりない企業様には・・・
→Fanpacの営業資料から必要箇所を引用して、まずはfacebookの説明からはじめる。
・パワポ上で構成イメージを作る(イメージがわかりやすい)。
・タブ構成の提案・説明をする。
・目玉コンテンツや外部連携などについては、1ページを使って詳細に解説。

● 提案の流れ一例
１）不件の整理 (目的やターゲットの整理、「○○を目指しましょう！」)
２） facebook 概要
３）ご提案内容
・基本コンテンツ
・その他のコンテンツ - 1～3 (オリジナルコンテンツ)
・外部サイトとの連携によるコンテンツ
４）外部サイト連携の参考事例
５）運用について
６）運用についての参考事例
７）ワークフロー

4

facebookページ開設フロー

① ②

ページの名前を入力(後で変更可能)し、規約に同意
のチェックを入れて、「利用開始」ボタンをクリックします。

facebookの個人アカウントを開設し、ログイン。

http://www.facebook.com/pages/manage/#!/pages/create.php ③
にアクセスし、facebookページのカテゴリ(会社・ブランド・アーティストな
ど)を選択。(後で変更可能) 完了。
諸々の基本設定へ。

5

予備知識：ビジネスアカウントについて

以下の手順で、個人プロフィールが無いfacebookページアカウント(ビジネスアカウント)を開設することができ
る。 ⇒ MFではビジネスアカウントを用いてfacebookページの構築は行っていない。

「ビジネスアカウントは、自分が作成したファンページやソーシャル広告を見ることはできますが、ユーザーのプロ
フィールやその他のコンテンツを見ることはできません。さらに、ビジネスアカウントは検索対象には含まれず、
友達リクエストを送信したり、受け取ったりすることはできません。(※ヘルプより)」

● 個人アカウントとビジネスアカウントの違い
個人アカウントビジネスアカウント
トップページ個人管理画面 facebookぺージ

なし
プロフィール名前や国籍など個人情報を入力します。
(追加すると個人アカウントに変わります。)

メッセージ他の個人アカウントにコンタクトをとることができます。直接他のアカウントにコンタクトをとることはできません。

友達他の個人アカウントに友人申請ができます。友達申請ができません。

すべてのfacebookページに「いいね」、閲覧・書き込みがで
facebookぺージすべてのfacebookページに「いいね」、閲覧・書き込みができます。
きません。

● ビジネスアカウント登録手順
1. ログアウトした状態で、facebookトップページの「著名人、バンド、ビジネスのためにfacebookページを作成」をクリック
2. facebookページのカテゴリ(会社・ブランドなど)を選び、ページの名前を入力 (後に変更可能)
3. 個人アカウントに登録しているメールアドレスとは異なるアドレスを新規に登録
4. facebookから届いたメールを確認し、ページを開設

※facebookページ開設後、「プロフィールを作成」を行うと、個人アカウントができてしまいますのでご注意ください。

6

予備知識：個人アカウント ⇔ facebookページアカウントの切り替え

下記の「切り替える」を押すと、任意のfacebookページ
アカウント名に切り替わり、他のfacebookページ上でコ
ミュニケーションをとることができる。(設定は元に戻せ
る。)

7

予備知識：プロフィール画像、タブのサイズについて

参考： facebookの新プロフィール画面で、写真をうまく使ってデザインする方法
http://creazy.net/2011/01/facebook_profile_design.html
180px

540px
520px

自由
8

開設におけるポイント

1) 公開／非公開
「facebookページを編集 > 権限の管理」で、
“公開範囲”の“管理人”にチェックを入れておくことで、管理人以外のユーザーに対し、ページを非公開にすることができる。
基本的には、事前に準備を行った後に公開するので、ページを非公開に設定してから作業を行うと良い。

2) アクセス時の表示ページ設定
「facebookページを編集 > 権限の管理」で、“デフォルトで表示するタブ”を任意のコンテンツに設定することで、「Welcome」ページ
などをアクセス時の最初に表示させることができる。

3) URLの変更
facebookページ公開後、25人以上ファンがつくとURLを好きな名称(ユーザーネーム)に変更することができる。
なお、ユーザーネームは一度しか変更が効かないので、慎重に設定を行う。

http://www.facebook.com/xxxxxx
※「xxxxxx」の部分が変更可能です。
英数字(A～Z、0～9)とピリオド(．)のみを使用することができる。

変更は下記より行います。
http://www.facebook.com/username/

その他注意点として、 facebookページ公開後に100人以上のファンがつくと、ページの名前が変更できなくなる。
それまでは変更可能なので、早めに正式名称を決定すべき。

9

その他注意点など

・ facebook は、基本的にバグが多かったりサイトが丌安定な時がよくあるので、
URL(username)変更やメルアド変更を行う時など、うまくいかない時がある。
(後日行うとうまくいったりする。)

・先方都合で本登録用のメールアドレスの発行が遅い時、かつスケジュールが厳しい
時は、Gmailなどで仮のアドレスを登録しておき、後に差し替えるイメージで作業を
進めるとよい。
(但し、アドレス管理が煩雑になってくるので、出来るだけ事前に用意すべき。)

・クライアントがとくにイメージを持っていない場合は、関連サイト(コーポレート、採用
サイト、Twitterなど)を確認し、ざっくりとこちらで作成したものを見せて確認を取っ
ていくと、やりとりがスムーズに進む。

10

管理画面の説明 - 1

このページで投稿・コメントする際、常にこのfacebook
ページアカウント名として行うかどうか。
(管理人としてウォールに投稿する際はチェック)

ここにチェックが入っていると、facebook
ページに投稿やコメントがあった場合、個人
アカウントにメールでお知らせが届く。
(はずしてOK)

11


公開／非公開を設定
(チェックを入れると非公開になる)

ここでWelocomeタブの設定などを
行うことができる。

ユーザーからの投稿制限
(基本無視でOK)

12

「基本データ」タブの情報を編集することができる。

13


ウォール投稿時などに表示されるサムネイルの微調整が可能。

14


「いいね！」しているページを任意で表示
設定可能。

管理人の表示／非表示の設定が可能。
(基本非表示)

15


facebookページのファンに一斉にメールを送る
ことが可能。(うまくいかない時もある・・・)

・・・など、このページから宣伝のあれこれ
に役立つ設定などが行える。

ウェブサイトにLike Boxを埋め込むコードを取得。
16


管理人の追加／削除が行える。
(facebookのアカウント名・または登録されているメー
ルアドレスを入力し変更を保存)

17


このページで基本タブやアプリの設定、追加／削除などが行える。

様々なアプリを探して追加できる「アプリディレクトリ」へ
のリンク

18


携帯で写真をアップするためのメールアドレスや携帯版の説明などが書かれている。
(このページは、あまりさわることはない。)

19


アクセス解析「インサイト」で、
facebookページへのアクセス状況を
見ることが可能。
(月次レポートにもそのまま貼り付けて
使用できる。)

20

アプリについて

facebookアプリを活用することで、Twitterやブログ、Youtubeなどとの連携、簡単なフォームの設
定、アンケートコンテンツなどを、facebookページに簡単に追加することができます。

● facebookアプリ(一例)
Involver - RSS Feed
http://www.facebook.com/takisadaosaka.recruit?sk=app_56625786785

Involver - Twitter
http://www.facebook.com/MindFreeJapan?sk=app_53267368995

Involver - YouTube
http://www.facebook.com/pages/%E5%AE%9F%E9%A8%93%E4%BC%9A/163966400320806?sk=app_57675755167

Poll Daddy Polls
http://www.facebook.com/takisadaosaka.recruit?sk=app_138079047824

FAQ

Tabfusion - Music

Tabfusion - Portfolio

Contact Tab

21

オリジナルページ(iframe)について

かつては、「FBML」というものを使って、facebook内にソースコードを入力し、画像を外部サーバーにおいて
Welcomeページなどを表示させていた。

2011年3月より、新規FBMLの追加が出来なくなった。
変わりに「iFrame」というものを使ってWelcomeページなどを作成する仕様になった。
(iFrameを使うと、一つのWebページの中にフレームを作って別のWebページから読み込んだ内容を表示させるこ
とができる。)
ＦＢＭＬ活用事例 iFrame 活用事例

アイコンの設
定もできるよう
になった。

※参考サイト： facebookページにiFrameを設定する方法
http://msweb.moo.jp/facebook/529/
22

オリジナルページ(iframe)の追加手順 - 1
facebook に登録する
Iframeを使って外部サイトを表示させる場合、「アプリ」としてコンテンツを登録する必要があり、
そのためには、まず開発者として自分を登録する。

http://www.facebook.com/developers/ にアクセスして認証を
行う。

（01）、開発者ページで「+Set Up New App」をクリック。

（02）途中、アカウント認証についてメッセージが表示されたら、携
帯電話かクレジットカードの情報を登録して認証を行う。続いてア
プリケーション名を入力。

（03）入力後、セキュリティチェックをすると、設定画面へ移動。

23

（01） iframe で外部Webサイトを表示する場合は、「facebook Integration」を
詳細設定をする選ぶ。

（02）アプリケーションID、シークレットキー／ facebook API アクセス時に使
用。

（03） Canvas Page ／任意のURL を入力。ここで指定した文字が、新しく追
加するfacebook ページのURLとなる。使用可能な文字は、小文字の英字と
アンダーバー、7文字以上

（04） Canvas URL ／外部Webサイトなど、用意しているiframe のURLを入
力。ここで指定したURL がfacebook ページ内で表示される。参照するURLは
スラッシュ(/)で終わるか、クエリパラメータつきのURLでなければならない。
たとえば、http://example.com/index.phpのようなURL の形式では登録で
きないので、http://example.com/ か、
http://example.com/index.php?foo=1のように適当なパラメータをつけて
設定する必要がある。

（05） Canvas Type ／IFrame を選択

（06） iFrame サイズ／Auto-resize を選択。必要に応じてJavaScript 側で
FB.Canvas.setAutoResize()またはFB.Canvas.setSize
({width:***,hight:****})で任意の数字を指定しておく。

（07）タブ名／facebookページ内にタブとして表示される名前を作成。
英数字（大文字小文字、全角半角）、日本語、スペースが利用できる。最大
文字数は16字

（08） Page Tab Type ／IFrameを選択

（09）タブのURL ／作成したfacebook ページが表示された時に、最初に読
み込まれるファイル名（index.html、index.phpなど）を指定。
設定が終わったら「変更を保存」（10）をクリックして終了すると、「マイアプ
リ」という専用のページが作成される。
24


facebook ページにタブを追加する

facebook ページの詳細設定が完了したら、facebook ページにタブ
を追加して外部Webサイトを表示させる。

（01）まずはマイアプリで「Application Profile Page」をクリック

（02）画面左の「マイページへ追加」をクリックする。

（03）タブを追加したいfacebookページを選択する。

（04） facebook ページを表示してみると、左側のメニューに新しいタ
ブが追加されている。

25

オリジナルアプリをつくる - 1 (参考： Profile Photo Mosaic)

プロフィール画像を利用して遊べるアプリ

facebook ページに外部Webサイトを表示させ
る場合と同様に、facebook ページ内で動作する
アプリもiframeを使って表示させることができる。

このため、facebook API の知識がなくともWebサ
イト作成と同じ要領で手軽にアプリを作成可能だ。

今回はサンプルとして「Profi le Photo Mosaic」
というアプリを作成した。

このアプリは友達のプロフィール写真を利用してモ
ザイク画像を作成するというもの（画面参照）。自
分のプロフィール写真に友達がどのくらい使われて
いるか視覚的に楽しめるほか、作成した画像は
ウォールに投稿できるため、それを見た友達も自分
のプロフィール写真で試したくなるだろう。

アプリ自体はJavaScript SDKとXFBML、Canvas
を使用して作成しており、画像の取得部分以外は
すべてJavaScript で処理している。

Canvas はセキュリティの問題で他のドメインの加工
ができないため、画像を返す処理をサーバサイドで
行っている。画像の取得やデータベースを使う場合
など、JavaScript だけでできない処理は、PHP
SDKやPhyton SDKなどがfacebook から公開され
ているので、それを使って実装しよう。

26


JavaScript SDKでアプリを作る

アプリのサンプルコードを用意したので、これ
をベースに作成していこう。作成にはJavaScript
SDKを利用する。

（01）body より下の表示要素全体を「div#fbfoot
」でくくる。

（02） JavaScript SDKのコード読み込みの部分を変
更する。日本語の場合は”…/ja_JP/all.js”、英語の
場合は”…/en_US/all.js”のコードを読み込む。
今回は日本語を選んだ。選んだ言語の種類によって
「いいね！」ボタンなどの表示が変わるので、任意で
設定しよう。

（03）次に、FB.init で初期化を行う。取得済みのアプ
リIDの設定もここで行っておく必要がある

（04）続いて、アプリ内のiframe の画面サイズを自動
で変更するため、setAutoResize() メソッドを指定す
る。
なお自動リサイズを行う場合は、facebook
Integrationの詳細設定からiFrame サイズをAuto-
resize に必ず設定しておく。

（05）さらにアプリに「いいね！」タグを設置するため、
「fb:like」タグを記入する。

27


XFBML で認証処理ボタンを作る
（06）ユーザーがアイコン画像を取得するために必要
な認証処理ボタンを作成する。
作成にはXFBML の「fb:login-button」を使用するのが
便利。ここでは画面のコードのように、perms に必要
な権限を設定すればOKだ。

（07）続いて、「FB.Event.subscribe()」を使用して、
ユーザーが認証した時のイベント情報を受け取るよう
に設定する。

（08）すでに認証済みの場合は
「FB.getLoginStatus()」で情報を受け取るように設定
する。

FQL で画像を取得する
（09）友達の画像を取得するコードを作成する。
作成にはFQLを使用する。FQLを利用するとSQLのよう
に必要なデータだけを抽出して取得できるからだ。
FB.Data.query()からFQLを呼び出して画像のURL
を取得し、imgタグとして追加すればよい。

作成したアプリはfacebook にアプリ登録をし、
「facebook Integration」で設定すると公開でき
る。今回のアプリはhttp://www.facebook.com/
fanpac?sk=app_206350266061351/ より確認
できるので、ぜひ楽しんでいただきたい。

28

【参考】ウォールでのエンゲージメントを高める方法

（１） 80文字以下だと、エンゲージメントが27％向上

（２）勤務時間外に書き込むと20％向上

（３）木曜、金曜の書き込みは18％向上

（４）最後に質問する形の書き込みは15％向上

（５）土曜日の書き込みは、他の曜日よりエンゲージメントが18％低い

（６）月曜日から水曜日の書き込みは、そのほかの曜日より3.5％低い

※2011年4月調査会社 e-marketer 統計より

29

facebookページ構築勉強会

Recommandé

Recommandé

Contenu connexe

Similaire à facebookページ構築勉強会

Similaire à facebookページ構築勉強会 (20)

Plus de Mf Takatsuka

Plus de Mf Takatsuka (6)

facebookページ構築勉強会