Archive for 6月, 2011

03 6月Facebookページの作り方。 その4 (WordPressを使ってFacebookページを作る方法)

■ここからはiFrameの中身のお話
(Wordpressを使ってFacebookページを作る方法)

iFrameを使ってFacebookページを作るには、別途自分でファイルを置くためのサーバーを用意する必要がある。
今までレンタルサーバーなどを使ったことがない人にとっては若干ハードルが高くなる。

1.いいねボタンのオンオフで表示されるページを切り替える

よく見かける機能だ、FBML時代は非常に簡単に実装できたが、iFrameになってからは、この機能も若干ハードルが高くなった。ただしこれに関しては、非常にいいソースが提供されている。(下記URL参照)
    http://www.facebook.com/fbml.sample?sk=app_198352453532934

上の「スタティックFBML」さんのページよりソースをダウンロードして設置しよう

2.wordpressをFacebookページで表示する。

弊社おすすめはこれである。
wordpressとは皆さんご存じの超メジャーblogツールであるが、WordpressをFacebookページに適応することで様々な機能を簡単にFacebook上で実装することが可能となる。

たとえば
1)文字や写真を思い通りに配置できる。
2)お問い合わせフォームを設置できる。
3)WordpressのRSS機能を使ってFacebookの「ノート」と同期できる
4)トップページの他、会社概要・利用規約・商品紹介など複数ページを展開できる

要するにwordpressをFacebook内に取り込むことで、Facebookで足りない機能を補完し、ビジネスを展開する上で必要な機能をすべてまかなうことができる。

設置サンプル
サンプル


【Facebook用Wordpressテンプレートのダウンロード】
下記フォームに入力していただくと、Facebook用WordpressテンプレートのダウンロードURLをお知らせします。
※無料 サポート等無いです。自己責任にて使用してください。


お名前
メールアドレス

□設置方法

1.先に説明したアプリの登録でiFrameページを作成する
 ※Facebookの仕様変更によりSSL(https)対応サーバー以外のサーバーを受け付けなくなるようです。
2.別サーバーにWordpressを設置し、iFrameアプリのcampusページにWPのURLを登録する。
3.WordpressのthemeをFacebookのサイズに合うものに変更する
 ※FacebookのiFrameの左右のサイズは初期設定は左右520px、上下800pxでサイズをはみ出した場合はスクロールバーが表示される。
 ※当ホームページ配布のFacebook用themeファイルを使用することでカスタマイズすることなく設置可能です。上のフォームよりダウンロードしてください。
4.javascriptを使用してスクロールバーがでないように設定する
 ※javascriptを使用することで、Facebook側がWordpressの記事の上下のサイズを自動取得し、その大きさに合うiFrameページを表示する
 ※この件もホームページ配布のFacebook用themeファイルを使用することで解決可能です。

ここいらのURLを参考にしてjavascriptを設置しよう

http://ascii.jp/elem/000/000/593/593097/
http://ascii.jp/elem/000/000/596/596552/
http://tam-tam.co.jp/tipsnote/javascript/post1097.html

03 6月Facebookページの作り方。 その3

■Facebookページの作り方 (応用編)

Facebookページの作成方法の仕様が変更となっています。最新版はこちら(2011年8月30日現在)

Facebookページの基本的な作り方に関しては「初級編」で解説した。
この項ではFacebookページに「ランディングページ」や「お問い合わせフォーム」と言った独自のページを追加する方法について解説する。

Facebookページにオリジナルのページを追加するには「iFrame」というテクニックを使うことになる。iFrame自体インターネット創明期から有った技術で特に目新しいものではない、簡単に説明すると、「Facebook上のページに窓を開けて、その窓の向こうに、ユーザーが自ら用意したホームページを表示する」というもの。

このため、厳密に言うとFacebook上にオリジナルページを作るのではなく、Facebookを通して自分のサーバーの自分のホームページをお客に見せる技術である。

※2010年まではFBMLというFacebook専用言語を使い、Facebookサーバー上に自分のオリジナルページを設置できたが、現在このサービスは終了している。

では早速設置方法について見ていこう。

1.サーバーを準備する
iFrameでオリジナルページをFacebook上に表示するためには、オリジナルページのファイルを置くためのサーバーが必要になる。
サーバーは基本的には何でも良いが、サーバーの仕様やApacheのバージョンによってはエラーになることも報告されているため、Facebookページ対応をうたっているサーバーを選択するのが無難

2.Facebookにて開発者登録を行う。
自分のFacebookページに設置するiFrameは「Facebookアプリケーション」扱いとなるため、自分で設置するには開発者として登録する必要がある。

【開発者登録ページ】

https://www.facebook.com/developers/

1)開発者登録をするためには「アプリ許可」のダイアログボックスが表示されるので、「許可」をクリック
2)開発者ページのトップページに飛ぶので、右メニューにある「Create one.」のリンクをクリックする。
3)認証画面が表示され、携帯電話・もしくはクレジットカードでの認証を促されるのでどちらかで認証を完了する。

以上の段取りで開発者としての登録は完了、次にアプリケーションの登録に移る。

3.アプリケーションを登録

うえの画面でこれから作成するページ(アプリケーション)の名前を任意でつけて登録


うえのセキュリティーチェック画面でテキストを入力してチェック

左メニューの「 Facebook Integration」をクリックして、自分のサーバー情報を入力しする。

■設定項目


1)キャンバスページ このアプリケーションのFacebook上のURLを設定する。
方法はキャンパスページのテキストボックスに任意の文字列を入れればOK,すでに使われているものは使えない。

2)Canvas URL ここには自分のサーバーのFacebook用ページのあるURLを入力する。
ファイル名までは入れずに/(スラッシュ)で終わる形で入力

3)iFrameサイズ ここは「Auto-resize」を選択する。
Auto-resizeとはFacebook側が読み込むサーバーのファイルの大きさを認識して、窓の大きさを自動設定する機能となる。

4)ディスカバリ Social Discovery ここではこのアプリケーションがFacebook上の検索で見つかるようにするか否かが選択できる。
通常は自分のページのみの対応で良いため、「無効」を選択する。

5)Page Tabs 「タブ名」を入力、何でも良い、ここで入力した文字列が、自分のFacebookページの左メニューに表示されるタブの名前になる

6)Page Tabs 「タブのURL」このにはこのタブをクリックしたときにiFrame内に表示されるページのファイル名を入力する。

例)Canvas URLが「 http://koukou.twinkle100.info/wp/ 」の場合
iFrameで最初に表示したいページが「http://koukou.twinkle100.info/wp/」のトップページの場合、「http://koukou.twinkle100.info/wp/index.php」など、index.php・index.html などのURLを入力する。

indexファイルとは違うページを表示したい場合、「http://koukou.twinkle100.info/wp/toppage.php」等を入力

最後に「保存」ボタンをクリックして入力した内容を保存する。これで設定は完了
※読み込み先のページは別途php・HTML等で作成する。

■今作ったアプリケーションを自分のFacebookページに追加する。

1.「マイアプリ」のページ、右メニュー内にある「Application Profile Page」をクリック

2.左メニューの「マイページへ追加」ボタンをクリック

3.表示されているダイアログボックスの中から、自分の追加したいFacebookページを選択して、「Facebookページに追加」ボタンをクリック。
これで自分のFacebookページに今作ったiFrameページが追加された。

4.追加したページを見てみると、左のメニュー内に今つかしたページが表示されているのが確認できる。

5.ページ上部の「基本データを編集」のリンクをクリック。

6.左メニューの「権限の管理」をクリックして、中央付近の「デフォルトで表示されるタブ」に今つかしたタブを選択して保存する。
これで、ビジターがあなたのページを訪れたとき、最初に表示されるページをオリジナルページに設定することが完了。

Facebookページを作ろう。 その4 へつづく

03 6月Facebookページの作り方。 その2

■Facebookページの作り方(初期編)

1.Facebookページ作成の初めの一歩

Facebookページを作るのは、本当に簡単である。
自分の個人ページの左サイドメニューのなかに「Facebookページ」と言うリンクがある。
それをクリックするとFacebookページの一覧画面が表示される。

まだ一つもFacebookページを作っていない場合は、何も表示されないので右上の「+Facebookページを作成」ボタンをクリック。

2.「Facebookページを作成」画面が表示される

「Facebookページを作成」では下記の6つの分類が表示される。

地域ビジネスまたは場所
会社名または団体名
ブランドまたは製品
アーティスト、バンドまたは著名人
芸能・エンタメ
慈善活動またはコミュニティ

通常ビジネスとして作成する場合は、地域ビジネスまたは場所、会社名または団体名、ブランドまたは製品、あたりを選択しておけば良い、この分類はあとで変更可能だが、一点注意事項として、分類によっては”任意でトップに表示するページ”が選べない場合がある様なので注意。(まあ、選べなければ作り直すだけの話なのでたいした問題ではないが・・・)

3.これでFacebookページの作成は完了である。

Facebookページの機能としては、個人ページと同様で
・ウォール
・ノート
・ギャラリー
・リンク
・イベント
・ディスカッション

等がある。各機能を紹介すると、Facebookページの「ウォール」は投稿した内容の一覧が表示される部分で、このページに「いいね」してくれた人がファンページから掲示板のように投稿した内容も、このウォールに表示される。

「ノート」は管理人が長めの記事などを投稿する際に使用する、Facebookページをブログのように使用する場合は、主にこの「ノート」に記事を投稿する。

「ギャラリー」は写真を投稿末する際に使用する。
「リンク」は気になるページを発見した場合、URLを投稿するのに使用する
「イベント」はその名の通り、イベントの告知やお客を招待するときに使用する。
「ディスカッション」はその名の通り掲示板だ。

初級編まとめ

さて、おおざっぱにFacebookページの作り方について記述したが、このデフォルトの状態で「さぁ、ビジネスにつかうぞ!」というのは実は難しい。

インターネットを使ったビジネスを行う場合、おおくはホームページで問い合わせを受け付ける、もしくはメースアドレスを収集するというスタイルではないだろうか。

そのとき必要な機能は「ページを訪れたユーザーが読むべきランディングページ」や、「問い合わせを受け付けるフォームメール」、「メールアドレスを受け付けるフォーム」などだろう。ネットビジネスの基本は見込み客となり得るリストを集めることが何よりも重要となる。(ネットショップに関してはこの限りではないが・・・)

この通常ホームページを使ったビジネスをする上で必須ともいえる機能がFacebookページにはない。

でも、ちょっと待てよ?Facebookページでフォームメールやランディングページを見たことあるぞ?と言うあなたは鋭い。

Facebookではちゃんと自分用のオリジナルページを追加したり、フォームメールを組み込んだりできる機能が備わっている。

次の応用編では、Facebookページに自分のオリジナルページを追加する方法を解説する。

Facebookページを作ろう。 その3 へ続く

03 6月Facebookページの作り方。 その1

日本の大手SNSであるモバゲーがmobageと名前を変え、世界に打って出るという報道があった。(http://news.goo.ne.jp/article/sankei/world/snk20110530076.html)スマートフォンの急速な普及により、これまでのビジネスモデルの根幹が揺らいでいるDeNAやGREEにとってはスマートフォンを介しての世界進出は自然の流れと行っても良い。

一方で日本でのシェア拡大を狙うFacebookの最近の動きはどうだろうか、一部の報道によると「月に50万人前後のペースでユーザーを増やしている」とも言うが、Facebookアカウントを持っていることが常識というアメリカを代表とする英語圏と異なり、日本ではまだまだ普及しているとは言いがたい。
とはいえ初期のTwitterやAmeblo同様じわいじわりと影響力を持ってきているのは事実である。

実際のところ、Facebookの大きな特徴といえる「Facebookページ(ファンページ)」には、英語圏ではありとあらゆるページが存在するが、これが日本語となると、その情報量たるやまだスカスカである。
そう、すかすかだからこそ、今から始める価値があるのである。

簡単にFacebookページについて説明しよう。

ハレハメイドFacebookページ

Facebookページサンプル

Facebookにはユーザーが持てるページが2種類存在する。
一つはFacebook登録後、自動的に作成される自分自身の個人ページ、そしてもう一つがユーザーが任意で作成する「Facebookページ」である。
Facebookページは少し前まではファンページと呼ばれていて、自分の興味のある分野のページを作りファンを集めると言うスタイルが基本となる。

Facebookページで扱える内容は、日本の法律に違反していなければ何でも良い、「AKB48」のFacebookページでも好きな車のFacebookページでも何でも良い(ただし著作権には注意!)

このFacebookページ、イメージとしてはFacebook上に作成できる「ブログサービス」と言ったイメージで理解できるのではないだろうか。

さて、Facebookをビジネスで使用するとなると、このFacebookページを使うことが基本形となる。

Facebookページを作ろう。 その2 へ続く