何で今頃 Facwbook ページの話題なのかというと、重い腰をあげてやっと Facebook のアカウントを作ったので、その流れで Facebook ページを作ったときの備忘録ということでメモ代わりに書いてみました。
web の業界に足を突っ込んでいながら今まで Facebook のアカウントがなかったのもちょっと問題あるかもしれませんが、色々とワケありということで…
まぁ、お恥ずかしいハナシですが…
ここから本題 🙂
簡単に説明すると、このサイトが WordPress を使っているので、『Facebook ページ用の ページテンプレートと固定ページを作って Facebook ページに表示させてみた』というわけ。
厳密にいうと Facebook ページではなくて、いわゆる Facebook ページの『Welcome ページ』ですね。 🙂
なので、Facebook と WordPress がプログラム的なことで連携（連動）しているわけではないです。
WordPress の固定ページを Facebook の iframe ページに表示しているだけなので、何か釣りみたいなタイトルで申し訳ない。
まず、Facebook ページがないと始まらないので、作っていない方は作りましょう。
作り方は、こちらの『Facebookページの作り方 – Facebook navi』を参考にどうぞ。
次に iframe を使ったオリジナルページを作るには Facebook アプリケーション扱いになりますので、アプリの登録をしなければいけません。
今までアプリの登録をしたことがなければ、『Facebook開発者ページ』で開発者登録をする必要があります。
携帯電話（メール）かクレジットカードのどちらかで認証をしなければいけないので、ちょっと面倒ですね。
面倒ですが、難しくはないです 🙂
このあたりのことは色々な方が解説されているので、ココでは詳しい説明は省きます。
申し訳ないですが、検索してみてください。
しかし、Facebook の公式ページで開発者登録方法の説明を見つけられなかったけど、もしかしてそういうページはないの？
無事、開発者登録できれば Facebook 開発者ページのアプリページの右上にある『 + Create New App 』ボタンを押すとその名の通り新規でアプリを作ることができるのですが、今回は別の方法でオリジナルページを作ってみます。
iframe ページを作ることができるアプリは色々とあるようですが、今回は『Static HTML Iframe Tab : Custom Icons』というアプリを使います。
と、その前に WordPress の準備。
Facebook ページ用に WordPress のページテンプレートを作ります。
取りあえず、下記のようなテンプレートでいいのでは…（HTML5の要素を使ってませんが、html5.js はおまじないということで…）
[php]
<?php
/*
Template Name: Facebookページ
*/
?>
<!DOCTYPE HTML>
<html lang=”ja-JP”>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<title><?php wp_title( ‘|’, true, ‘right’ ); bloginfo( ‘name’ ); ?></title>
<link rel=”stylesheet” href=”/hogehoge/reset.css”>
<link rel=”stylesheet” href=”/hogehoge/style.css”>
<!–[if lt IE 9]>
<script type=”text/javascript” src=”/hogehoge/html5.js”></script>
< ![endif]–>
</head>
<body>
<div>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
</div>
</body>
</html>
[/php]
で、固定ページで Facebook ページ用の『Welcome ページ』を作ります。
Facebook ページの表示領域は横幅が520px なのでそれ以内に収まるようにしないとスクロールバーが表示されて不細工になってしまいます。
高さは、基本800px なのですがあとから調整できますのであまり気にしなくてもいいと思いますが、あまり大きいのもどうかと思いますので、そのあたりは適宜おまかせします。
以上で、準備 OK。
まぁ、WordPress を使っている方なら特に問題ないと思います。
先ほどの『Static HTML Iframe Tab : Custom Icons』というアプリのページにある
『 Install Page Tag 』を押すと…
アプリケーションを追加するか尋ねてくるので、
追加したいページを選択して、問題なければ、『 Static HTML Iframe Tab : Custom Iconsを追加する 』を押します。
すると Facebook ページに遷移し、左に『 Welcome 』というタブが追加されていると思います。
また、先ほどのアプリをインストールする画面で『 Install Page Tag 』を押すと『★』のアイコンが自動的に選択されるようですが、『 Install Page Tag 』を押さずにその下にある各アイコンを押してもインストールできます。
その時は Facebook ページのタブが選択したアイコンになります。
いよいよ、Welcome ページの設定です。
インストールされた『 Welcome 』タブを押します。
すると、『 Tab Settings 』という設定画面になります。
上から2つ目の『 Page Source 』に『 URL 』『 Redirect 』『 Image 』『 HTML 』という4つのラジオボタンがあります。
各ラジオボタンの説明をすると『 HTML 』は『 Editor | Source 』を選択してアプリ上で直接ページを作る。
『 Image 』は、画像ファイルを選択してアップロードします。
画像ファイルにリンクを設定できますので、指定のサイト、ページに遷移させることも可能です。（自動で新規ウインドウが開くようになるみたい）
『 Redirect 』はその名の通りリダイレクトさせるのですが、個人的にはあまり意味がないような気がします。
何か効果的な使い方があるのだろうか？
『 URL 』は iframe に表示させたいページの URL を記入ということなので、先ほど WordPress で作ったページの URL を記入します。
で、右上の『 View Tab 』を押すとプレビューできます。
以上で、『Welcome ページ』のできあがり！
もし、高さが800px 以上の場合は、スクロールバーが出ますが、先ほどの設定画面で希望の高さを指定して『Hide Scrollbars』にチェックを入れるとスクロールバーを消すことができます。
自分でアプリを作り『Welcomeページ』を作った場合は、JavaScript で高さやスクロールバーの指定をしなければいけませんので、こういうところもこのアプリを使うポイントかな。
あと、設定画面の下の方にある『 Install Another Tab 』を押すとアプリを追加できますが、同じタブ（アイコン）は同一ページにはインストールできないみたいです。
『→』と『★』には複数のタブが用意されているので、それだと同一ページにインストールできるようです。
という感じで、以外と簡単にできたのではないかと…
しかし、これだけだとこのアプリを選択した理由が半減します。
このアプリを使う最大の理由に『 Non-Fan Page Source 』というのが設定できる点にあります。
これは何かというと、『 いいね！ 』ボタンを押す前のページということ。
つまり『 いいね！ 』を押してくれた人だけが見ることのできるページを簡単に設定できる。
『 いいね！ 』を押す前と押したあとの表示を切り替えるのは、PHP でゴニヨゴニョしなければいけなかったと思いますが、このアプリだととっても簡単 🙂
こちらも4つのラジオボタンがありますが、この場合はリダイレクトさせるのに意味がないので、先ほどと違い『 Redirect 』は当然ありません。
ここに先ほどの URL を記入し、『 Page Source 』には『 いいね！ 』を押してくれた人用ページの URL を記入します。
で、『 いいね！ 』を押して見ると
という具合に表示が切り替わります。
もちろん、『 Non-Fan Page Source 』を設定しない使い方も OK です。
ちなみに iframe 上部にある『 Admin Tab Options 』というのは、管理人用のメニューですので一般の方が見た場合は表示されません。
また、このメニューで設定以外『 Stats 』がありますので、ページの統計を見ることもできます。
長くなりましたが、せっかく WordPress を使っているので「こういう使い方はどう？」というのを…
iframe を使った『Welcomeページ』なので、WordPress で別のページを作れば iframe 内でどんどんページを遷移させることができます。
例えば、
このページの『 次のページをご覧になる方はこちら 』を押すと
という風にページが遷移します。
メニュー、もしくはページネーションを考慮したボタンを配置すれば、それなりのコンテンツを見せることができるのではないでしょうか？
お問い合わせフォームの設置も可能ではないかと…
でも、「セキュリティ面でそれはダメだよ」ということや「Facebook の規約違反では？」ということがあれば、教えてください。
WordPress を Facebook のオリジナルページに使用することで、すでに WordPress を使っている方はもちろんのこと、使っていない方もこれを機に WordPress を導入して Facebook ページを作ってみてはいかがでしょうか。
WordPress を使うことによって Facebook ページの作成や更新が比較的簡単にできると思いますよ。
あと、Facebook ページに『Welcome ページ』をデフォルトで表示させる方法やタブの表記（Welcome の名称）の変更の方法、タブのアイコンをオリジナルのアイコンに変更する方法は次回 🙂
ちなみに、上記の画像のページはこの記事用に作ったので、公開していません。
もしよければ、デザインワークス・オンサイドの Facebook ページがありますので、そちらをどうぞ。
iframe 内でページ遷移させていませんが、色々とタブを付けてみました。
『いいね！』を押してもらえるとウレシイ 😀
また、感想などをお聞かせいただければありがたいです。
ただし、最初に書いたように最近 Facebook のアカウントを作ったばかりで、誰にも告知をしていません。
ということで、友達がいませんのでちょっと恥ずかしかったりする… 😀
あと、もうひとつ『Static HTML Iframe Tab : Custom Icons』を選択した理由があるのですが、それも次回。
