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